Carousel with progress bar in flutter

Question

How can i create a carousel with progress bar in flutter? I browsed through the pub.dev, but i coudn't find anything with that functionality.

I want to have something like this:

Answer 1

You can do like this. (using carousel package)

https://pub.dev/packages/carousel_slider

Ps: I used getx for state management (Obx, controller other in snippet), you can change code to setState or other state management..

    return Stack( 
       alignment: Alignment.bottomCenter, 
       children: [ 
         CarouselSlider.builder( 
           itemCount: controller.pics.length, 
           options: CarouselOptions( 
             height: 300, 
             viewportFraction: 1, 
             initialPage: 0, 
             autoPlay: false, 
             enlargeCenterPage: false, 
             autoPlayCurve: Curves.fastOutSlowIn, 
             scrollDirection: Axis.horizontal, 
             onPageChanged: (index, reason) => 
                 controller.activePicIndex.value = index, 
           ), 
           itemBuilder: (context, itemIndex, pageViewIndex) => Padding( 
             padding: Paddings.p32, 
             child: Image.asset( 
               'assets/example/phone.png', 
               fit: BoxFit.contain, 
             ), 
           ), 
         ), 
         Row( 
           mainAxisAlignment: MainAxisAlignment.center, 
           children: controller.pics 
               .map( 
                 (element) => Obx( 
                   () => AnimatedContainer( 
                     curve: Curves.easeOutExpo, 
                     margin: Paddings.p8.copyWith(left: 0, right: 6), 
                     duration: const Duration(milliseconds: 500), 
                     decoration: const BoxDecoration( 
                       borderRadius: Radiuses.r8, 
                       color: ColorPalette.black, 
                     ), 
                     child: SizedBox( 
                       width: 
                           controller.activePicIndex.value == element ? 18 : 9, 
                       height: 9, 
                     ), 
                   ), 
                 ), 
               ) 
               .toList(), 
         ), 
       ], 
     );

Result is