How to give the carousel image the full screen width?

user_12157443 0
Viewed 10875

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,
            ),
carousel flutter
3 Answers
CarouselSlider(
          options: CarouselOptions(
            viewportFraction: 1,
user_135136790

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: //....
user_113794690

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];
              });
            },
          ),
        ),
user_104135750
Related