Home > Back-end >  Getting Index From Carousel slider -Flutter
Getting Index From Carousel slider -Flutter

Time:10-23

I,m using the carousel slider package in my code , i'm trying to extract an index from this slider to add to my dot indicator at the bottom of the slider : I.m using 2 packages : https://pub.dev/packages/carousel_slider and Dot Indicator

 Padding(
              padding: EdgeInsets.fromLTRB(
                  size.width * 0.05, 35, size.width * 0.05, 0),
              child: CarouselSlider(
                options: CarouselOptions(
                  aspectRatio: 2.0,
                  enlargeCenterPage: true,
                  scrollDirection: Axis.horizontal,
                  autoPlay: true,
                ),
                items: [
                  Card(
                    clipBehavior: Clip.antiAlias,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20),
                    ),
                    child: Image(
                      image: AssetImage("assets/greenhouse.jpg"),
                    ),
                  ),
                  Card(
                    clipBehavior: Clip.antiAlias,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20),
                    ),
                    child: Image(
                      image: AssetImage("assets/greenhouse.jpg"),
                    ),
                  ),
                ],
              ),
            ),
            new DotsIndicator(
              dotsCount: 5,
              position: 1,
              decorator: DotsDecorator(
                color: Colors.grey,
                activeColor: greencol,
              ),
            ),

CodePudding user response:

save your index with onPageChange:

 int _currentIndex = 0;

 Padding(
              padding: EdgeInsets.fromLTRB(
                  size.width * 0.05, 35, size.width * 0.05, 0),
              child: CarouselSlider(
                options: CarouselOptions(
                  aspectRatio: 2.0,
                  enlargeCenterPage: true,
                  scrollDirection: Axis.horizontal,
                  autoPlay: true,
                  onPageChanged: (index, reason) {
                    _currentIndex = index;
                    setState((){});
                  },
                ),
                items: [
                  Card(
                    clipBehavior: Clip.antiAlias,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20),
                    ),
                    child: Image(
                      image: AssetImage("assets/greenhouse.jpg"),
                    ),
                  ),
                  Card(
                    clipBehavior: Clip.antiAlias,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20),
                    ),
                    child: Image(
                      image: AssetImage("assets/greenhouse.jpg"),
                    ),
                  ),
                ],
              ),
            ),
            new DotsIndicator(
              dotsCount: 5,
              position: _currentIndex.toDouble(),
              decorator: DotsDecorator(
                color: Colors.grey,
                activeColor: greencol,
              ),
            ),
  • Related