Resetting the status when the parent widget status is reinitialized

[evferrer87]

I have an app with multiple pages. In one of them I have the CarouselSlider widget with 2 sliders, when I move to the second slider and switch to a different page and going back again to the page containing the CasouselSlider, always show the second slider, however my indicator is indicating the first page, making that my indicator dot doesn't match the current page displayed.

I would like to reset the CarouselSlider when the parent widget is reinitialized (making _currentPage = 0 again)

Here is my CarouselSlider implementation:

import 'package:carousel_slider/carousel_slider.dart'; import 'package:flutter/material.dart';

class InfoSectionCharts extends StatefulWidget { const InfoSectionCharts({ super.key, required this.children });

final List children;

@override State createState() => _InfoSectionChartsState(); }

class _InfoSectionChartsState extends State {

CarouselController buttonCarouselController = CarouselController(); var _currentPage = 0;

@override void initState() { super.initState(); }

@override Widget build(BuildContext context) {

return Stack(
  alignment: Alignment.center,
  children: [
    CarouselSlider(
        items: widget.children.map((e) {
          return e;
        }).toList(),
        carouselController: buttonCarouselController,
        options: CarouselOptions(
          enableInfiniteScroll: false,
          pageSnapping: false,
          autoPlay: false,
          enlargeCenterPage: true,
          viewportFraction: 1,
          height: 280,
          onPageChanged: (index, page) {
            setState(() {
              _currentPage = index;
            });
          }
        )
    ),
    Positioned(
        bottom: -5,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: List<Widget>.generate(widget.children.length, (i) {
            return Container(
              padding: const EdgeInsets.only(left: 5, right: 5),
              child: buildDot(i),
            );
          }).toList()
        )
    )
  ],
);

}

Widget buildDot(int index) { return InkWell( onTap: () async { if (index > _currentPage) { var iterations = _currentPage; for (var i = iterations; i < index; i++) { await buttonCarouselController.nextPage( duration: const Duration(milliseconds: 100), curve: Curves.linear ); } } else { var iterations = _currentPage; for (var i = index; i < iterations; i++) { await buttonCarouselController.previousPage( duration: const Duration(milliseconds: 100), curve: Curves.linear ); } } }, customBorder: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10), ), child: Container( margin: const EdgeInsets.all(5), height: 10, width: 10, decoration: BoxDecoration( shape: BoxShape.circle, border: Border.all(color: Colors.black), color: _currentPage == index ? Colors.black : null ), ), ); } }

Thanks

[malaire]

Try adding different key:s to your CarouselSlider:s so that their state is kept separate. (I solved a similar problem this way.)