How to create Flutter Horizontal List View Dot Indicator ?

if you are using slider image and want show dot indicator and you are using  https://pub.dev/packages/carousel_slider package.

first of all defined int _current =0; and defined a list of image.

How to create Flutter Horizontal List View Dot Indicator code :

_SliderView() {
    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
      const SizedBox(height: 10),
      FutureBuilder<dynamic>(
          future: slider(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Column(
                children: [
                  CarouselSlider(
                    options: CarouselOptions(
                      viewportFraction: 1.0,
                      autoPlay: true,
                      height: SizeConfig.screenHeight * 1 / 4,
                    ),
                    items: sliderimage.map((i) {
                      return Builder(
                        builder: (BuildContext context) {
                          return Container(
                            width: MediaQuery.of(context).size.width,
                            margin: const EdgeInsets.symmetric(horizontal: 8.0),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(5),
                              image: DecorationImage(
                                image: NetworkImage(imgUrl2 + '$i'),
                                fit: BoxFit.cover,
                              ),
                            ),
                          );
                        },
                      );
                    }).toList(),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: sliderimage.map(
                          (i) {
                        int index = sliderimage.indexOf(i);
                        return Container(
                          width: 8.0,
                          height: 8.0,
                          margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
                          decoration: BoxDecoration(
                              shape: BoxShape.circle,
                              color: _current == index
                                  ? kPrimaryColor
                                  : Color.fromRGBO(0, 0, 0, 0.4)),
                        );
                      },
                    ).toList(),
                  ),
                ],
              );
            } else {
              return Column(
                children: [
                  CarouselSlider(
                    options: CarouselOptions(
                        viewportFraction: 1.0,
                        autoPlay: true,
                        height: SizeConfig.screenHeight * 1 / 4,
                        onPageChanged: (index, reason) {
                          setState(() {
                            _current = index;
                          });
                        }),
                    items: localimagelist.map((i) {
                      return Builder(
                        builder: (BuildContext context) {
                          return Container(
                            width: MediaQuery.of(context).size.width,
                            margin: const EdgeInsets.symmetric(horizontal: 8.0),
                            child: Image.asset(
                              '$i',
                              fit: BoxFit.cover,
                            ),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(5),
                            ),
                          );
                        },
                      );
                    }).toList(),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: localimagelist.map(
                          (i) {
                        int index = localimagelist.indexOf(i);

                        return Container(
                          width: 8.0,
                          height: 8.0,
                          margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
                          decoration: BoxDecoration(
                              shape: BoxShape.circle,
                              color: _current == index
                                  ? kPrimaryColor
                                  : Color.fromRGBO(0, 0, 0, 0.4)),
                        );
                      },
                    ).toList(),
                  ),
                ],
              );
            }
          }),
     
    ]);
  }

Custom shape for each dot 

You can customize the shape of each dot, for inactive and/or active dots.

Why This Implementation Works

• ✅ Easy to integrate
• ✅ Responsive for both Android and iOS
• ✅ Fully customizable (dot color, size, position, etc.)
• ✅ Compatible with latest carousel_slider versions

Tips for Production Use

• Add placeholder images using cached_network_image
• Replace the dots with animations or custom widgets for enhanced UX
• Use a PageView for more control if you need advanced logic

FAQs

Q: How do I add animation to the dot indicator?
Use AnimatedContainer instead of Container for smooth transitions.

Q: Can I position the dots above the slider?
Yes, just move the Row widget above CarouselSlider in the widget tree.

Q: Does this work with dynamic image lists from APIs?
Absolutely! Just replace imgList with your fetched data.

Adding dot indicators to your carousel_slider in Flutter not only improves user experience but also gives a professional look to your UI. This setup is simple, reusable, and completely customizable.

You can now easily add an image carousel with a visual indicator to your app without relying on third-party templates.