CODEWITHSUNDEEP
fluttercarousel
fizik bata
fizik bata

Reputation: 381

How to give the carousel image the full screen width?

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,
            ),

Upvotes: 6

Views: 23926

Answers (4)

sahil prajapati
sahil prajapati

Reputation: 544

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
          ),
        )

Upvotes: 1

Farrel Anelca
Farrel Anelca

Reputation: 137

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

Upvotes: 1

Arshneet Kathuria
Arshneet Kathuria

Reputation: 671

CarouselSlider(
          options: CarouselOptions(
            viewportFraction: 1,

Upvotes: 57

GirlWhoCode
GirlWhoCode

Reputation: 628

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

Upvotes: 0

Related Questions