How to give the carousel image the full screen width?

Question

I am learning about carousel in flutter. I want to give the carousel image the full screen width. But the width is automatically taken by the carousel itself. Is there any way to give the image the full screen width inside carousel? Here I have used both carousel_pro and carousel_slider, neither works as I expected. Please help.

  List _images = [
    Image.network(
        "https://stimg.cardekho.com/images/carexteriorimages/630x420/Lamborghini/Lamborghini-Huracan-EVO/6731/1546932239757/front-left-side-47.jpg?tr=w-456,e-sharpen"),
    Image.network(
        "https://auto.ndtvimg.com/car-images/big/lamborghini/aventador/lamborghini-aventador.jpg?v=5"),
    Image.network(
        "https://www.lamborghini.com/sites/it-en/files/DAM/lamborghini/gateway-family/few-off/sian/car_sian.png"),
    Image.network(
        "https://www.topgear.com/sites/default/files/styles/16x9_1280w/public/images/news-article/2018/01/38eba6282581b285055465bd651a2a32/2bc8e460427441.5a4cdc300deb9.jpg?itok=emRGRkaa"),
    Image.network(
        "https://blog.dupontregistry.com/wp-content/uploads/2013/05/lamborghini-egoista.jpg"),
  ];

  List _images2 = [
    "https://stimg.cardekho.com/images/carexteriorimages/630x420/Lamborghini/Lamborghini-Huracan-EVO/6731/1546932239757/front-left-side-47.jpg?tr=w-456,e-sharpen",
    "https://auto.ndtvimg.com/car-images/big/lamborghini/aventador/lamborghini-aventador.jpg?v=5",
    "https://www.lamborghini.com/sites/it-en/files/DAM/lamborghini/gateway-family/few-off/sian/car_sian.png",
    "https://www.topgear.com/sites/default/files/styles/16x9_1280w/public/images/news-article/2018/01/38eba6282581b285055465bd651a2a32/2bc8e460427441.5a4cdc300deb9.jpg?itok=emRGRkaa",
    "https://blog.dupontregistry.com/wp-content/uploads/2013/05/lamborghini-egoista.jpg",
  ];



            Carousel(
                images: _images,
                autoplay: true,
                boxFit: BoxFit.fitWidth,
                dotBgColor: Colors.transparent,
                dotSize: 3,
                dotColor: Colors.red,
                dotIncreasedColor: Colors.red,
                autoplayDuration: Duration(seconds: 3),
                animationCurve: Curves.fastOutSlowIn,
              ),
            ),
            SizedBox(height: 20),
            CarouselSlider(
              items: _images2
                  .map(
                    (x) => Container(
                      width: double.infinity,
                      decoration: BoxDecoration(
                        image: DecorationImage(
                          image: NetworkImage(x, scale: 1),
                        ),
                      ),
                    ),
                  )
                  .toList(),
              autoPlay: true,
              height: 200.0,
            ),

Filch

try BoxFit.fill instead of BoxFit.fitWidth – Underbred

What about Carousel_Slider? – Filch

Answer 1

This is example, hope it works for you

 List<String> imgList;

     CarouselSlider(
                        items: map<Widget>(
                          imgList,
                          (index, i) {                    
                     return Container(
                              margin: EdgeInsets.all(5.0),
                              child: ClipRRect(
                                borderRadius: BorderRadius.all(Radius.circular(5.0)),
                                child: Stack(children: <Widget>[
                                  InkResponse(
                                      child: Image.network(i,
                                          fit: BoxFit.cover, width: 1000.0),
                                      onTap: //....

Underbred

Answer 2

CarouselSlider(
          options: CarouselOptions(
            viewportFraction: 1,

Backwater

the viewport Fraction is used to set the width of the carousel Slider if its 1 then it will use 100% of the screen but by default its 80%. – Backwater

worked for my carousel!! – Brachycephalic

Thank you Pang, Arshneet Kathuria...! Woking for me..! – Arcadia

Answer 3

this simple example from me

CarouselSlider(
          items: _products
              .map(
                (p) => Image.network(
                  p.foto,
                  width: MediaQuery.of(context).size.width,
                  fit: BoxFit.cover,
                ),
              )
              .toList(),
          options: CarouselOptions(
            viewportFraction: 1.0,
            enlargeCenterPage: false,
            initialPage: 0,
            onPageChanged: (index, reason) {
              setState(() {
                currentIndex = index;
                _product = _products[index];
              });
            },
          ),
        ),

Warton

Answer 4

use padEnds Property of CarouselSlider,

also assign full width for image

CarouselSlider(
          items: photoList
              .map(
                (e) => SizedBox(
                  width: double.maxFinite,
                  child: Image.network(
                    e,
                    fit: BoxFit.fitWidth,
                  ),
                ),
              )
              .toList(),
          options: CarouselOptions(
            autoPlay: false,
            initialPage: 0,
            enableInfiniteScroll: false,
            padEnds: false, // take full width, remove padding from all size
          ),
        )

Zaxis