How to Make Flutter Swipe Campaigns Section?

Question

I am developing an application with Flutter. I need to design the following:

Campaign items will be a picture. In other words, the texts there will not be coded separately. A picture will be inserted directly.

I tried doing this with carousel_slider . And I was able to do something like:

It both keeps the next picture in the back, and there are no circles denoting the row at the bottom of the picture. I couldn't do these. Can you help me on how to do it?

Codes:

SizedBox(
  height: MediaQuery.of(context).size.height * 0.25,
  width:  MediaQuery.of(context).size.width,
  child: CarouselSlider(
    options: CarouselOptions(
      aspectRatio: 2.0,
      autoPlay: true,
      enlargeCenterPage: true,
      scrollDirection: Axis.horizontal
    ),
    items: [
      for (var i = 0; i < Campaigns.length; i++)
        InkWell(
          child: Container(
            width: MediaQuery.of(context).size.width,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              image: DecorationImage(
                image: NetworkImage(Campaigns[i].data()["Image"]),
                fit: BoxFit.fitWidth,
              ),
            ),
          ),
          onTap: () {
            // Navigator.push(context, MaterialPageRoute(builder: (context) => CampaignPage(Campaigns[i].data())));
          },
        ),
    ],
  ),
),

Thanks for help.

Answer 1

You can create your custom slider dots with container decoration. I wrapped widget with Stack then create dots with Container. You can change dot type and add an animation on it. Here is a basic example.

   Stack(
        children: [
          SizedBox(
            height: MediaQuery.of(context).size.height * 0.25,
            width: MediaQuery.of(context).size.width,
            child: CarouselSlider(
              options: CarouselOptions(
                  aspectRatio: 2.0,
                  autoPlay: true,
                  enlargeCenterPage: true,
                  scrollDirection: Axis.horizontal),
              items: [
                for (var i = 0; i < Campaigns.length; i++)
                  InkWell(
                    child: Container(
                      width: MediaQuery.of(context).size.width,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        image: DecorationImage(
                          image: NetworkImage(Campaigns[i].data()["Image"]),
                          fit: BoxFit.fitWidth,
                        ),
                      ),
                    ),
                     onPageChanged: (index, reason) {
                     setState(() {
                          _current = index;
                        });
                     }),
                    onTap: () {
                      
                      // Navigator.push(context, MaterialPageRoute(builder: (context) => CampaignPage(Campaigns[i].data())));
                    },
                  ),
              ],
            ),
          ),
          Positioned(
  top: 40
  child: Column(
    children: [

      Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: Campaigns.asMap().entries.map((entry) {
          return Container(
            width: 8.0,
            height: 8.0,
            margin:
                EdgeInsets.symmetric(vertical: 8.0, horizontal: 4.0),
            decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.grey
                    .withOpacity(_current == entry.key ? 0.9 : 0.2)),
          );
        }).toList(),
      ),
    ],
  ),
)
        ],
      ),