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

Question

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

Answer 1

the onpagechanged parameter of the carousel was updating the instance of the provider not the actual provider.

Carousel slider should be :

CarouselSlider(
                    items: picturescarousel
                        .map<Widget>((item) => item as Widget)
                        .toList(),
                    options: CarouselOptions(
                      viewportFraction: 1,
                      autoPlay: true,
                      onPageChanged: (index, reason) {
                        // print(
                        //    'page changed to ${slidercontrollerinstance.currentIndex}');
                        //slidercontrollerinstance.updateController(index); wrong
                        ///it was updating the class but the class must be updated from the provider class below
                        Provider.of<SliderController>(context, listen: false)
                            .updateController(index);
                      },