How To Easily Set Flutter Carousel Slider Full Width

List itemColors = [Colors.green, Colors.purple, Colors.blue];

SizedBox(
          height: 200,
          width: double.infinity,
          child: CarouselSlider(
            items: [
              for (int i = 0; i < itemColors.length; i++)
                Container(
                  color: itemColors[i],
                  alignment: Alignment.center,
                  child: Text(
                    'Item $i',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                )
            ],
            options: CarouselOptions(
                autoPlay: true, autoPlayInterval: Duration(seconds: 3)),
          ),
        )

Implementing Flutter Carousel Slider Full Width

For that, we have to use the options constructor of Flutter carousel slider. It takes carousel options and by using its view port fraction constructor, we can easily set the full width of carousel items. This constructor takes a double(decimal value) but we can also pass integer to it.

For demonstration, we will pass 1 to that constructor. See the below code:

options: CarouselOptions(
          viewportFraction: 1
            )

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatelessWidget {
  List itemColors = [Colors.green, Colors.purple, Colors.blue];
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body: Center(
        child: SizedBox(
          height: 200,
          width: double.infinity,
          child: CarouselSlider(
            items: [
              for (int i = 0; i < itemColors.length; i++)
                Container(
                  color: itemColors[i],
                  alignment: Alignment.center,
                  child: Text(
                    'Flutter Carousel Slider Full Width Items',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                )
            ],
            options: CarouselOptions(
                viewportFraction: 1,
                autoPlay: true,
                autoPlayInterval: Duration(seconds: 3)),
          ),
        ),
      ),
    ));
  }
}