flutterdartcarouselflutter-dependenciesimage-slider

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


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(),
            )
]
)
);
}

Solution

  • 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