How to make dot indicator carousel slider in flutter using asset/images?

Question

        CarouselSlider(
          options: CarouselOptions(
        
          ),
          items: [
   
            Image.asset('images/pizza.png'),
          ],
        ),

        DotsIndicator(
            dotsCount: 4,
            position: dotPosition.toDouble(),
//declare the position to autoplay
             
            ),
        ),

I don't know how to declare the dotIndicator so that the dot autoplay with the images.

Answer 1

You can use a variable to track the current index from onPageChanged .

class _MyWidgetState extends State<MyWidget> {
  final items = [
    Image.asset('images/drumstick.png'),
    Image.asset('images/pizza.png')
  ];

  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: [
            CarouselSlider(
              options: CarouselOptions(
                autoPlay: true,
                aspectRatio: 2.0,
                enlargeCenterPage: true,
                onPageChanged: (index, reason) {
                  setState(() {
                    currentIndex = index;
                  });
                },
              ),
              items: items,
            ),
            DotsIndicator(
              dotsCount: items.length,
              position: currentIndex.toDouble(),
            )
          ],
        ),
      ),
    );
  }
}