动画平滑指示器不起作用？ 扑

Question

I'm building an app with a PageView Widget and I wanted to add AnimatedSmoothIndicator .

I added a CarouseLslider to the pageView to make it auto run

but it never changes .. I tried a lot of methods but none of them work

can anyone help..

class FoodPageBody extends StatefulWidget {
  const FoodPageBody({Key? key}) : super(key: key);

  @override
  State<FoodPageBody> createState() => _FoodPageBodyState();
}

class _FoodPageBodyState extends State<FoodPageBody> {
  
  PageController pageController = PageController(viewportFraction: 1);

  int activeIndex = 0;

//------------------------------------------------------------------------------

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 340,
      child: PageView.builder(
          controller: pageController,
          itemCount: 5,
          itemBuilder: (context, position) {
            return _bulidPageItem(position);
          }),
    );
  }

  Widget _bulidPageItem(int index) {
//------------------------------------------------------------------------------
// Slide image 🚩
    return Column(
      children: [
        CarouselSlider(
          options: CarouselOptions(
            onPageChanged: (index, reason) {
              setState(() {
                activeIndex = index;
              });
            },
            enlargeStrategy: CenterPageEnlargeStrategy.height,
            enableInfiniteScroll: true,
            enlargeCenterPage: true,
            autoPlayCurve: Curves.ease,
            autoPlay: true,
            autoPlayInterval: const Duration(seconds: 5),
            height: 320,
          ),
          items: [
            Stack(
              alignment: Alignment.topCenter,
              children: [
                Container(
                  margin: const EdgeInsets.only(left: 5, right: 5),
                  height: 220,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    color: index.isEven
                        ? const Color(0xFFffd28d)
                        : const Color(0xFF89dad0),
                    image: const DecorationImage(
                        image: AssetImage('images/chineseFood.jpg'),
                        fit: BoxFit.cover),
                  ),
                ),
//------------------------------------------------------------------------------
// Slide Information 🚩
                Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                    margin:
                        const EdgeInsets.only(left: 20, right: 20, bottom: 15),
                    height: 130,
                    decoration: BoxDecoration(
                      boxShadow: [
                        BoxShadow(
                            color: Colors.grey.withOpacity(0.3),
                            blurRadius: 6,
                            spreadRadius: 0.7,
                            offset: const Offset(1, 4))
                      ],
                      borderRadius: BorderRadius.circular(25),
                      color: Colors.white,
                    ),
//------------------------------------------------
// Slider title
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          const BigText(
                            text: 'Chinese side',
                          ),
//----------------------------------------------
// Slider Rating
                          const SizedBox(height: 10),
                          Row(
                            children: [
                              Wrap(
                                children: List.generate(
                                  5,
                                  (index) => const Icon(Icons.star,
                                      color: AppColor.mainColor, size: 12),
                                ),
                              ),
                              const SizedBox(width: 10),
                              SmallText(text: 4.5.toString()),
                              const SizedBox(width: 10),
                              const SmallText(text: '1287 comments'),
                            ],
                          ),
                          const SizedBox(height: 20),
//----------------------------------------------
// Slider Icons
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceAround,
                            children: const [
                              SliderIcons(
                                  color: AppColor.iconColor1,
                                  text: 'Normal',
                                  icon: Icons.circle),
                              SliderIcons(
                                  color: AppColor.mainColor,
                                  text: '1.7km',
                                  icon: Icons.location_pin),
                              SliderIcons(
                                  color: AppColor.iconColor2,
                                  text: '32min',
                                  icon: FontAwesomeIcons.clock),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
//------------------------------------------------------------------------------
// Slider Dots 🚩
        AnimatedSmoothIndicator(
          activeIndex: activeIndex,
          count: 5,
          effect: const WormEffect(),
        )
      ],
    );
  }
}

Answer 1

The issue is here, the CarouselSlider 's items is just one of this snippet. Therefore, onPageChanged active index is always getting 0. To have five items, we need to generate item here.

I think pageView is not necessary for this case.

 @override
  Widget build(BuildContext context) {
    return SizedBox(height: 340, child: _bulidPageItem());
  }

  Widget _bulidPageItem() {
//------------------------------------------------------------------------------
// Slide image 🚩
    return Column(
      children: [
        CarouselSlider(
          carouselController: carouselController,
          options: CarouselOptions(
            onPageChanged: (index1, reason) {
              debugPrint("on Page changed $index1");
              setState(() {
                activeIndex = index1;
              });
            },
          ),
          items: List.generate(
            5,
            (index) => Stack(