帶有進度條的輪播

Question

如何在顫動中創建帶有進度條的輪播？ 我瀏覽了 pub.dev，但找不到任何具有該功能的東西。

我想要這樣的東西：

Answer 1

你可以這樣做。 （使用輪播包）

https://pub.dev/packages/carousel_slider

ps：我使用getx進行狀態管理（Obx，controller other in snippet），可以改代碼為setState或者其他狀態管理..

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

結果是