dinner formal
dinner formal

Reputation: 59

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

Upvotes: 1

Views: 1766

Answers (1)

Aldy Yuan
Aldy Yuan

Reputation: 2045

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

Upvotes: 3

Related Questions