颤动点指示器到页面浏览量

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