How to make dot indicator carousel slider in flutter using different shape?

Question

I am using a carousel slider and want to give a dot indicator but in a different shape. I have tried it with a normal Dot Indicator in case if it helps to understand my problem. Any help could be helpful.


 List<String> itemsList = [
    'https://varro.imgix.net/1680590502894.jfif?w=600&h=370&fit=scale&q=65',
      'https://varro.imgix.net/1680590539865.jfif?w=600&h=370&fit=scale&q=65',
      'https://varro.imgix.net/1680600677822.jpg?w=600&h=370&fit=scale&q=65',
      'https://varro.imgix.net/1680600689626.jpg?w=600&h=370&fit=scale&q=65',
      'https://varro.imgix.net/1680600702003.jpg?w=600&h=370&fit=scale&q=65',
  ];

int currentIndex = 0;

@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children : [ 
CarouselSlider(
            options: CarouselOptions(
                height: 250.0,
                viewportFraction: 1.5,
                initialPage: 0,
                scrollDirection: Axis.horizontal,
                onPageChanged: (index, reason) {
                  setState(() {
                    _current = index;
                  });
                }),
            items: imageList
                .map(
                  (item) => imageList.isEmpty
                      ? Image.asset(width: MediaQuery.of(context).size.width, 'assets/images/no_image_available.png')
                      : Image.network(
                          width: MediaQuery.of(context).size.width,
                          item,
                          fit: BoxFit.fill,
                        ),
                )
                .toList(),
          ),
DotsIndicator(
              dotsCount: itemsList.length,
              position: _current.toDouble(),
            )
]
)
);
}

can you describe what do you mean by different shapes – Md. Yeasin Sheikh Apr 05 '23 at 10:35 — Md. Yeasin Sheikh, Apr 05 '23 at 10:35

score 1 · Accepted Answer · answered Apr 05 '23 at 10:38

To change the shape , you can use shape for all dots and activeShape for active one.

DotsIndicator(
  dotsCount: imageList.length,
  position: _current.toDouble(),
  decorator: DotsDecorator(
    shape: const Border(),
    activeShape:
        RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0)),
    size: Size(10, 10),
  ),
)

Find more on dots_indicator

How to make dot indicator carousel slider in flutter using different shape?

1 Answers1