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