Question 348226 in Flutter Question posted in
The official Flutter documentation can be found here.

Dot indicator not working- Flutter -Should rebuild indicator on page change

I’m trying to create a dot indicator for a carousel slider using the carousel_slider package. No idea why it’s not rebuilding at all. Simple carousel of images with a dot indicator at the bottom that rebuilds when based on index of image on the carousel.

CODE:

class Testhome extends StatelessWidget {
  const Testhome({super.key});
  final SliderController slidercontrollerinstance = SliderController();
  


  @override
  Widget build(BuildContext context) {
    
    

    return Scaffold(
        appBar: AppBar(
            title: Text('Welcome Alexander',
                style: ttextthemes.darktheme.headlineMedium),
            automaticallyImplyLeading: false,
            actions: [
              // Search icon button
              IconButton(
                  color: Colors.black,
                  icon: const Icon(Icons.search),
                  onPressed: () {
                    // Show modal search bar using a package or custom implementation
                  })
            ]),
        body: SingleChildScrollView(
            child: Column(children: [
          const SizedBox(height: Tsizes.spacebtwitems),

          //search bar
          const Tsearchbar(text: 'Search in Store'),
          //spacing
          const SizedBox(height: Tsizes.spacebtwitems),
          //heading
          const Theadingbar(
            text: 'Popular categories',
            showbutton: true,
          ),
          //spacing
          const SizedBox(height: Tsizes.spacebtwitems),
          //category icons
          const Homecategories(),
          Padding(
              padding: const EdgeInsets.all(Tsizes.spacebtwitems),
              child: Column(children: [
                CarouselSlider(
                    items: const [
                      CarouselImages(imageurl: Timages.onboardingimage2),
                      CarouselImages(imageurl: Timages.onboardingimage),
                      CarouselImages(imageurl: Timages.onboardingimage3)
                    ],
                    options: CarouselOptions(
                      viewportFraction: 1,
                      autoPlay: true,
                      onPageChanged: (index, reason) {
                        slidercontrollerinstance.updateController(index);
                      },
                    )),
                const SizedBox(height: Tsizes.spacebtwitems),
                Consumer<SliderController>(
                    builder: (context, slidercontrollerinstance, _) {
                  return Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        for (int i = 0; i < picturescarousel.length; i++)
                          Tcircularwidget(
                              hieght: 4,
                         

                colour: Provider.of<SliderController>(context,
                                          listen: false)
                                      .currentIndex ==
                                  i
                              ? const Color.fromARGB(255, 15, 74, 104)
                              : Colors.grey)
                      ]);
                })
              ]))
        ]

                // carousel
                )));
  }
}

final List picturescarousel = [
  const CarouselImages(imageurl: Timages.onboardingimage2),
  const CarouselImages(imageurl: Timages.onboardingimage),
  const CarouselImages(imageurl: Timages.onboardingimage3)
];

class SliderController extends ChangeNotifier {
  int _currentIndex = 0;

  int get currentIndex => _currentIndex;

  void updateController(int index) {
    _currentIndex = index;
    notifyListeners();
  }
}

class Tcircularwidget extends StatelessWidget {
  const Tcircularwidget(
      {super.key,
      this.colour = const Color.fromARGB(255, 15, 74, 104),
      this.hieght = 10,
      this.width = 10,
      this.borderradius = Tsizes.boarderradiusLG,
      this.padding = 5,
      this.margin});

  final Color colour;
  final double width, hieght;
  final double borderradius;
  final double padding;
  final EdgeInsets? margin;

  @override
  Widget build(BuildContext context) {
    return Container(
        width: width,
        height: hieght,
        padding: EdgeInsets.all(padding),
        margin: EdgeInsets.only(right: padding),
        decoration: BoxDecoration(
            color: colour,
            borderRadius: BorderRadius.circular(Tsizes.boarderradiusLG)));
  }
}

I don’t see why it’s not rebuilding. It’s only a simple dot indicator. Should be very simple, all the resources im using say im doing things properly

Tags:

2

Answers


  1. 0

    That happened because the controllers are defined inside the build method, so they get reinstantiated every time the widget rebuilds.

    To fix it, move them out from the build method.

    class Testhome extends StatelessWidget {
  const Testhome({super.key});

  CarouselController homepagecontroller = CarouselController();
  final SliderController slidercontrollerinstance = SliderController();

  @override
  Widget build(BuildContext context) {
    // ...
  }

    This is as shown in the example from the package’s readme.

    Login or Signup to reply.
  2. 0

    I think you are making some mistakes.

    1. You’re not using the homepagecontroller that you’ve created. Instead, you’re using a separate slidercontrollerinstance. You should use homepagecontroller consistently throughout your code for managing the carousel.
    2. You’re not initializing your CarouselController and SliderController inside a stateful widget, which means that your controller instances won’t persist across rebuilds.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search