Flutter中使用Smooth Page Indicator实现页面切换的配置方法

SmoothPageIndicator的状态完全和绑定的PageController同步，你只需要将同一个PageController同时绑定到承载页面的PageView组件即可实现指示器和页面切换的联动，以下分两种常用场景给出适配方案：

场景1：引导页在同一个PageView内切换（引导效果推荐方案） #

修改后的完整代码如下：

final controller = PageController(viewportFraction: 0.8, keepPage: true);

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        const SizedBox(height: 35.0),
        // 新增Expanded包裹的PageView，承载Page1和Page2
        Expanded(
          child: PageView(
            controller: controller,
            // 这里按你的实际页面组件替换即可
            children: const [
              // 你的原有Page1页面内容
              Page1(),
              // 要跳转的目标Page2页面
              Page2(),
            ],
          ),
        ),
        Container(
          child: SmoothPageIndicator(
            controller: controller, // 和PageView共用同一个controller即可自动同步状态
            count: 2,
            effect: const JumpingDotEffect(
              dotHeight: 16,
              dotWidth: 16,
              jumpScale: .7,
              verticalOffset: 15,
            ),
          ),
        ),
      ]),
    // 如果需要点击按钮触发跳转到下一页，修改onPressed逻辑如下
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        // 获取当前页码，没有到最后一页就切到下一页
        if(controller.page?.round() != 1){
          controller.animateToPage(
            1, 
            duration: const Duration(milliseconds: 300), 
            curve: Curves.easeIn
          );
        }else{
          // 已经在最后一页，执行你原来的扫码逻辑
          _scanQR();
        }
      },
      child: const Icon(Icons.qr_code),
      backgroundColor: Colors.pink,
    ),
  );
}

主要改动说明：

• 新增PageView组件作为页面载体，和SmoothPageIndicator共用同一个PageController，滑动页面或者调用controller的跳转方法时，指示器会自动同步更新状态
• 调整了FAB的点击逻辑，未到最后一页时切到下一页，到达最后一页后执行原有扫码逻辑

场景2：滑到最后一页需要跳转到独立路由的Page2 #

如果你要跳转的Page2是独立的路由页面，不属于PageView的子页面，可以通过监听PageController的页码变化实现跳转：

@override
void initState() {
  super.initState();
  controller.addListener(() {
    // 当滑动到第二页时，跳转到独立路由的Page2
    if(controller.page?.round() == 1){
      Navigator.push(context, MaterialPageRoute(builder: (context)=> const Page2()));
    }
  });
}

@override
void dispose() {
  // 页面销毁时同步销毁controller避免内存泄漏
  controller.dispose();
  super.dispose();
}

内容的提问来源于stack exchange，提问作者MaksIngenr