Search code examples
fluttercarouselindicator

Display two pictures in carousel at a time


carousel with indicator, and two pictures at a time

How can I make something like this, up on the picture with flutter? I searched through flutter carousel_slider 2.2.1 library, but it doesn't have features that display two pictures at a time.

    Widget _buildReport() {
  return CarouselSlider(
    options: CarouselOptions(
      height: 150.0,
      autoPlay: true,
      autoPlayInterval: Duration(seconds: 4),
      autoPlayAnimationDuration: Duration(milliseconds: 800),
      autoPlayCurve: Curves.fastOutSlowIn,
    ),
    items: [1, 2, 3, 4, 5].map((i) {
      return Builder(
        builder: (BuildContext context) {
          return Container(
              width: MediaQuery.of(context).size.width,
              margin: EdgeInsets.symmetric(horizontal: 5.0),
              child: Image(
                image: AssetImage('assets/dog.jpg'),
                fit: BoxFit.cover,
              ));
        },
      );
    }).toList(),
  );
}

Solution

  • You can do it with carousel use Row widget with MainAxisAlignment.spaceBetween and wrap each image with Expanded like this :

    Container(
                      width: MediaQuery.of(context).size.width,
                      margin: EdgeInsets.symmetric(horizontal: 5.0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Expanded(
                            child: Image.asset(
                              "assets/",
                              fit: BoxFit.cover,
                            ),
                          ),
                          Expanded(
                            child: Image.asset(
                              "assets/",
                              fit: BoxFit.cover,
                            ),
                          ),
                        ],
                      ),
                    )
    

    Running apps :

    enter image description here