Мой точечный индикатор не обновляется при перемещении изображения внутри CarouselSlider во Flutter

Question

Как вы, ребята, читаете, название как-то не обновляется. Это происходит только тогда, когда я делаю горячую перезагрузку, а я этого не хочу. Я ожидаю, что когда пальцем проведете пальцем по изображению влево или вправо, за ним должен следовать точечный индикатор. Пожалуйста, помогите и заранее спасибо. Вот мой код карусели и точечного индикатора:

                                               final urlImages1 = [
                                   'https://i.imgur.com/Y3UejT0.jpg',
                                   'https://i.imgur.com/KNFL3qd.jpg',
                                   'https://i.imgur.com/fxAH9HY.jpg',
                                   'https://i.imgur.com/9GkgdKx.jpg',
                                          ];

                                         int currentIndex = 0; 

                                              child: Column(
                                                children: [
                                                  CarouselSlider.builder(
                                                    itemCount:
                                                        urlImages1.length,
                                                    itemBuilder: (context,
                                                        index, realIndex) {
                                                      final urlImage01 =
                                                          urlImages1[index];
                                                      return buildImage(
                                                          urlImage01,
                                                          index);
                                                    },
                                                    options:
                                                        CarouselOptions(
                                                            height: 300,
                                                            enlargeStrategy:
                                                                CenterPageEnlargeStrategy
                                                                    .height,
                                                            enlargeCenterPage:
                                                                true,
                                                            onPageChanged:
                                                                (index,
                                                                    reason) {
                                                              setState(() {
                                                                currentIndex =
                                                                    index;
                                                              });
                                                            }),
                                                  ),
                                                  SizedBox(
                                                    height: 10,
                                                  ),
                                                  dotIndicator(),
                                                ],
                                              ),



  Widget dotIndicator() => AnimatedSmoothIndicator(
    activeIndex: currentIndex,
    count: urlImages1.length,
    effect: JumpingDotEffect(
        dotHeight: 10,
        dotWidth: 10,
        dotColor: Colors.grey,
        activeDotColor: Colors.green),
  );

Изменить: Короче говоря, точки под этим изображением не перемещаются, когда я перемещаю изображение. Только с горячей перезарядкой.

Answer 1

Допустим, вы создали свой виджет вот так.

Если вы инициализируете свои переменные здесь (внутри метода сборки), всякий раз, когда состояние в этом виджете изменяется (здесь currentIndex), он снова вызывает метод сборки. Это означает, что все ваши переменные будут снова инициализированы присвоенным им значением (currentIndex = 0).

      import 'package:flutter/material.dart';

class ExampleWidget extends StatefulWidget {
  @override
  _ExampleWidgetState createState() => _ExampleWidgetState();
}

class _ExampleWidgetState extends State<ExampleWidget> {

  // here is the right place to initialize your variables if you want to preserve their state after a rebuild
  // int currentIndex = 0; 
  // also your urlImages1 list won't change. so, you should also initialize it here
  //     final urlImages1 = [
  //   'https://i.imgur.com/Y3UejT0.jpg',
  //   'https://i.imgur.com/KNFL3qd.jpg',
  //   'https://i.imgur.com/fxAH9HY.jpg',
  //   'https://i.imgur.com/9GkgdKx.jpg',
  // ];

  @override
  Widget build(BuildContext context) {
    // you should remove these two initializations
    final urlImages1 = [
      'https://i.imgur.com/Y3UejT0.jpg',
      'https://i.imgur.com/KNFL3qd.jpg',
      'https://i.imgur.com/fxAH9HY.jpg',
      'https://i.imgur.com/9GkgdKx.jpg',
    ];

    int currentIndex = 0; 

    return Column(
              children: [
                CarouselSlider.builder(
                  itemCount:
                      urlImages1.length,
                  itemBuilder: (context,
                      index, realIndex) {
                    final urlImage01 =
                        urlImages1[index];
                    return buildImage(
                        urlImage01,
                        index);
                  },
                  options:
                      CarouselOptions(
                          height: 300,
                          enlargeStrategy:
                              CenterPageEnlargeStrategy
                                  .height,
                          enlargeCenterPage:
                              true,
                          onPageChanged:
                              (index,
                                  reason) {
                            setState(() {
                              currentIndex =
                                  index;
                            });
                          }),
                ),
                SizedBox(
                  height: 10,
                ),
                dotIndicator(),
              ],
            );
  }
}
Widget dotIndicator() => AnimatedSmoothIndicator(
    activeIndex: currentIndex,
    count: urlImages1.length,
    effect: JumpingDotEffect(
        dotHeight: 10,
        dotWidth: 10,
        dotColor: Colors.grey,
        activeDotColor: Colors.green),
  );;

Надеюсь, это понятно. Я создал виджет, чтобы показать вам, где его разместить, он может не работать, если вы скопируете и вставите.

Answer 2

вам просто нужно изменить событие onPageChanged для CarouselOptions.

      onPageChanged:(index,reason) {
      setState(() {
           currentIndex = index;
      });
}),

к этому

      onPageChanged:(index,reason) {
      currentIndex = index;
      setState(() {});
}),

изменить состояние вашего приложения после инициализации.

или вы можете использовать любой другой метод управления состоянием, например GET.