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.
_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.