扑动点指示器到浏览量

Question

我想为综合浏览量添加一个点指示符。当一个人将图像从右到左滚动时，我的代码上的图像会发生变化。那里没问题，但我无法在我的代码中添加点指示符。当我滚动图像时如何放置点指示器，点也会切换到图像的顺序.......................... ..................................................... …………

                            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

你可以用这个包做到这一点：https://pub.dev/packages/page_view_indicators

在示例中您可以看到如何实现它。

编辑：像这样实现你的点指示器：

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