Flutter如何实现跨多页面常驻悬浮运行的timer widget

核心结论 #

不需要在每个跳转页面重复构建计时器组件，你遇到的问题本质是组件挂载层级不对——只要把计时器组件挂载到所有路由页面的上层，再把计时逻辑从页面生命周期中抽离，就能实现跨页悬浮、持续运行不中断。

踩坑预警：你之前尝试的方案为什么不生效 #

• 单页面内用Stack：Stack的层级仅对当前页面生效，路由切换时整个页面会被替换，Stack内的计时器会跟着页面一起销毁。
• 常驻ModalBottomSheet：showModalBottomSheet本质是推入路由栈的特殊路由页，跳转新页面时会被压在路由下层，无法跨页显示。
• 每个页面重复构建计时器：哪怕用全局状态同步时间，切页时组件反复销毁重建会导致动画跳变、渲染冗余，后续新增页面还要重复插入组件，维护成本极高。

推荐实现方案（最稳定） #

用应用根组件的builder属性搭建全局悬浮层，一次挂载全页面生效：

1. 抽离全局计时状态
   把计时器实例、剩余时长、运行状态、启动/暂停/重置方法全部抽离到和页面生命周期无关的状态层，不管用ValueNotifier、Provider、Riverpod还是Bloc都可以，核心原则是不要把Timer实例放在单个页面的State里，避免页面dispose时计时器被销毁中断。
2. 挂载全局悬浮计时器
   直接修改MaterialApp/CupertinoApp的builder配置，在所有路由页的上层叠放计时器组件，这个层级的组件不会随路由切换销毁：

   MaterialApp(
     // 保留你原有的主题、路由、首页等配置
     builder: (context, routedChild) {
       return Stack(
         children: [
           // 原有路由页面，占满全屏
           Positioned.fill(child: routedChild!),
           // 自定义计时器位置，比如底部悬浮、右上角悬浮都可以调整Positioned参数
           Positioned(
             bottom: 88,
             left: 16,
             right: 16,
             child: const GlobalFloatingTimer(),
           ),
         ],
       );
     },
   )
   

3. 适配业务需求
   你需要从1-2个指定页面启动计时器的需求，直接在对应页面调用全局状态里的startTimer()方法即可，悬浮计时器会自动监听状态变化启动倒计时，不需要做跨页面传值。如果需要在特定页面（比如全屏页、登录页）隐藏计时器，只需要在GlobalFloatingTimer里监听当前路由名，命中需要隐藏的路由时返回空组件SizedBox.shrink()即可。

备选方案：全局Overlay实现 #

如果你需要更灵活的动态显隐控制（比如计时器未启动时完全不渲染、不占位），可以用根Overlay插入悬浮组件：

• 应用启动时获取根Navigator的context，创建OverlayEntry包裹计时器组件，调用Overlay.of(context).insert()插入到全局Overlay层。
• 只要不主动调用entry.remove()，这个计时器就会一直浮在所有页面上层，启动/关闭时只需要通过全局状态控制组件内容即可。
• 注意不要在单个子页面的生命周期里插入OverlayEntry，避免页面pop时context失效导致组件异常。

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