How to slide two carousel sliders in flutter at the same time in flutter? as when the first one chan-CodePudding

Trying to make parallel carousel sliders that changes when the first one change. My first approach was to take the index from the first one and inject it in the second but I was not able to do that. The second approach was to use the same controller but obviously that didn't work. Did anyone ever do that please help. Thanks in advance.

      SizedBox(
          height: ...,
          width: .... ,
          child: CarouselSlider.builder(
              itemCount: count,
              itemBuilder: (context, index, realIndex) {
                return StationItem(
                    station: allSectors.where((item) => item.iD == selectedSectorId).first.stations![index],
                    stationNumber: index 1,
                    changePage: _changePage,
                    changeTitle: _changeTitle);
              },
              carouselController: stationsCarouselController,
              options: CarouselOptions(
                onScrolled: (index){
                  setState(() => activeIndex = index as int);
                },
                initialPage: 0,
                onPageChanged: (index, reason) {
                  setState(() => activeIndex = index);
                },
                viewportFraction: 1,
                enableInfiniteScroll: true,
                enlargeCenterPage: true,
              )),
        ),
        Column(
          children: [
            SizedBox(
              width: ...,
              height: ...,
            ),
            SizedBox(
                width: ...,
                height: ...,
                child: FittedBox(
                    child: IconButton(
                        onPressed: _next,
                        icon: Image.asset('assets/icons/Right_arrow.png'),
                        splashRadius:...))),
            SizedBox(
              width: ...,
              height: ...,
            ),
          ],
        ),
        SizedBox(
          height: ...,
          width: ...,
        ),
        SizedBox(
            height: ...,
            width: ...,

            child: AbsorbPointer(
              child: CarouselSlider.builder(
                  itemCount: count,
                  itemBuilder: (context, index, realIndex) {
                    return StationLoadingImage(station: allSectors.where((item) => item.iD == selectedSectorId).first.stations![index]);
                  },
                  carouselController: stationsImageCarouselController,
                  options: CarouselOptions(
                    initialPage: activeIndex,
                    onScrolled: null,
                    onPageChanged: null,
                    viewportFraction: 1,
                    enableInfiniteScroll: true,
                    enlargeCenterPage: true,
                  )),
            )
        )

'''

CodePudding user response：

Can you provide some sample of your code so we can better understand what you're trying to do

CodePudding user response：

    class _HomePageState extends State<HomePage>
with SingleTickerProviderStateMixin {
late CarouselController buttonCarouselController =CarouselController(); 

@override 
   void initState() {
buttonCarouselController = CarouselController(length: .., vsync: this);
super.initState();}

@override
    void dispose() {
super.dispose();
_tabController.dispose();

}

 //You can then define both carouselController as 
carouselController:buttonCarouselController