How to add a dot indicator on a Gridview ? (Flutter) - flutter

Question

Is there a way in Flutter to show a dot indicator on Gridview ? or is there a widget like gridview that I can combine it with CarouselSlider ?
Something like this:
Thank you in advance for your answers!

Answer 1

based on The Design picture you provided, Instead of a grid view, you actually need a Carousel, or a page, to implement the pagination.
carousel_builder package or PageView widget is the solution for implementing the pagination.
to achieve the dots indicator, you can use dots_indicator mentioned in the comments.
then you should use your pageview or carousel controller, and on changing the index, update your indicator.
I'll provide the code of an image_slider I implemented, you can edit and achieve what you want:
class ImageSlider extends StatefulWidget {
final List<String> urls;
final bool openImagePopUp;
final PageController sliderController;
const ImageSlider(
{Key key, this.urls, this.openImagePopUp = false, this.sliderController})
: super(key: key);
#override
_ImageSliderState createState() => _ImageSliderState();
}
class _ImageSliderState extends State<ImageSlider> {
int currentSlideIndex;
PageController sliderController;
void setCurrentImageIndex(int newIndex) {
setState(() {
currentSlideIndex = newIndex;
});
}
#override
void initState() {
currentSlideIndex = 0;
sliderController =
widget.sliderController ?? PageController(initialPage: 0);
super.initState();
}
#override
void dispose() {
sliderController.dispose();
super.dispose();
}
void nextPage() {
sliderController.nextPage(
duration: Duration(milliseconds: 250), curve: Curves.easeOut);
}
void previousPage() {
sliderController.previousPage(
duration: Duration(milliseconds: 250), curve: Curves.easeOut);
}
#override
Widget build(BuildContext context) {
return Stack(children: [
Directionality(
textDirection: TextDirection.ltr,
child: PageView.builder(
controller: sliderController,
onPageChanged: (newIndex) {
setCurrentImageIndex(newIndex);
},
itemCount: widget.urls.length,
itemBuilder: (context, index) {
return InkWell(
onTap: widget.openImagePopUp
? () {
context.read<NavigationService>().showPopUp(
ProductDetailsImagePopUp(urls: widget.urls), context);
}
: null,
child: Image.network(
createImageUrl(widget.urls[index]),
fit: BoxFit.contain,
errorBuilder: (context, error, stackTrace) {
return LoadImageErrorWidget();
},
),
);
},
),
),
if (widget.urls.length > 1) ...[
Positioned(
left: 0,
bottom: 10,
child: CircleIndicators(
index: currentSlideIndex,
length: widget.urls.length,
),
),
Center(
child: Directionality(
textDirection: TextDirection.rtl,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
if (currentSlideIndex < widget.urls.length - 1)
IconButton(
icon: Icon(Icons.chevron_left), onPressed: nextPage),
Expanded(child: Container()),
if (currentSlideIndex > 0)
IconButton(
icon: Icon(Icons.chevron_right), onPressed: previousPage),
],
),
),
)
]
]);
}
}