CODEWITHSUNDEEP
flutterdart
MD MEHEDI HASAN
MD MEHEDI HASAN

Reputation: 2470

How to create image slider with Dot Indicator in flutter?

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.

Upvotes: 2

Views: 4814

Answers (2)

Mayur Devmurari
Mayur Devmurari

Reputation: 64

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,
                    );

Upvotes: 0

Dung Ngo
Dung Ngo

Reputation: 1452

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)
        )
      )
  ]
)

Upvotes: 2

Related Questions