How to create image slider with Dot Indicator in flutter?

user_12755955 0
Viewed 3030

Example image with dot indicator

I have multiple images each with their own redirect link. Currently this works fine at displaying using a list view build to display the images inside a gesture detector.

However, I’d like to add a dot indicator to show which image is being viewed. How can I get the index of the image being displayed? Or increase / decrease a counter when swiping left or right.

dart flutter
2 Answers

You should post the code of what you have done so people can see what your exact problem is.

If you're using ListView.builder, you can get index from itemBuilder. Then create a variable to hold the value of that index when you interact with the list

int currentIndex;

itemCount: list.length,
itemBuilder: (context, index) {
  currentIndex = index;
}

Then below the listView, add a custom dot indicator list.

Row(
  children: [
    for(int i = 0; i < list.length; i++)
      Container(
        height: 10, width: 10,
        decoration: BoxDecoration(
          color: i == currentIndex ? Colors.white : Colors.grey,
          borderRadius: BorderRadius.circular(5)
        )
      )
  ]
)
user_96619360

You can get the index from itemBuilder. and change index by pass index in activeIndex parameter of AnimatedSmoothIndicator.

for smooth indicator smooth_page_indicator

AnimatedSmoothIndicator(
                  activeIndex: index,
                  count: images.length,
                  effect: ExpandingDotsEffect(
                    radius: 10,
                    dotWidth: 10,
                    dotHeight: 10,
                    activeDotColor: Colors.green,
                    expansionFactor: 4,
                    dotColor: Colors.green.withOpacity(0.17),
                  ), // your preferred effect
                  onDotClicked: (index) {
                    pageViewController.animateToPage(
                      index,
                      duration: const Duration(milliseconds: 500),
                      curve: Curves.ease,
                    );
                  },
                )

For handling pageview by clicking on dot

pageViewController.animateToPage(
                      index,
                      duration: const Duration(milliseconds: 500),
                      curve: Curves.ease,
                    );
user_162777920
Related