flutter dot indicator to pageview - flutter

Question

I want to add a dot indicator to pageview. When a person scrolls the image to the right to left image changes on my code. NO problem with there but I couldn't manage to add a dot indicator to my code. How can I put a dot indicator when I scroll across images also the dots switch to the order of images.........................................................................................................
PageView.builder(
itemCount: totalCards.toInt(),
itemBuilder: (context, i) {
return Container(
margin: EdgeInsets.only(top: 10),
child: Container(
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: PageView(
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(4.0),
image: DecorationImage(
image: AssetImage(
photos[startphoto]),
fit: BoxFit.cover)),
),
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(4.0),
image: DecorationImage(
image: AssetImage(
photos[startphoto1]),
fit: BoxFit.cover)),
),
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(4.0),
image: DecorationImage(
image: AssetImage(
photos[startphoto2]),
fit: BoxFit.fitHeight)),
),
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(4.0),
image: DecorationImage(
image: AssetImage(
photos[startphoto3]),
fit: BoxFit.cover)),
),
],
),
),
],
),
)
);
},
),
),

Answer 1

You can do that with this package: https://pub.dev/packages/page_view_indicators
In the example you can see how to implement it.
EDIT: Implement your dot indicator like this:
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
final ValueNotifier<int> _pageNotifier = new ValueNotifier<int>(0);
final PageController _pageController = new PageController();
#override
Widget build(BuildContext context) {
return Column(
children: [
PageView.builder(
itemCount: totalCards.toInt(),
controller: _pageController,
itemBuilder: (context, i) {
...
},
onPageChanged:(index) {
setState(() {
_pageNotifier.value = index;
});
},
),
Center(
child: CirclePageIndicator(
currentPageNotifier: _pageNotifier,
itemCount: totalCards.toInt(),
),
)
],
);
}
}