如何在Flutter中实现跨页面展示的类Discord应用内通知提醒系统

• 全局浮层基础：Overlay 组件

这是实现跨页面悬浮通知的核心依赖，Flutter 中所有路由页面默认都挂载在全局 Overlay 栈下，你可以通过 Overlay.of(context) 获取全局实例，往其中插入自定义的 OverlayEntry，插入的条目会默认显示在所有页面上层，不会受页面跳转、路由切换的影响，完全满足「任意页面上层展示」的要求。

• 通知UI组件实现
  你可以组合以下Widget实现类Discord的通知样式：

  • Positioned/AnimatedPositioned：控制通知固定在屏幕顶部/指定位置，实现滑入、上移动画
  • AnimatedOpacity：实现显示、消失的透明度渐变效果
  • Row/Column：排版通知内的头像、消息文本、操作按钮
  • GestureDetector：处理通知点击跳转、侧滑删除、长按暂停自动消失等交互

• 全局通知调度
  你需要一个全局的通知分发中心来触发通知展示，不需要在每个页面单独做适配：

  • 可以用 EventBus 做全局事件订阅，业务模块/推送模块收到新通知时发送事件
  • 统一在APP根节点的初始化逻辑中监听通知事件，收到事件后操作 Overlay 插入/更新通知条目

• 队列逻辑处理
  如果有多个通知同时到达，需要做队列控制：

  • 限制同屏最多显示3-4条通知，超出的先放入待显示队列
  • 新通知到达时，已显示的通知自动向上偏移，避免重叠
  • 每条通知默认3-5秒自动销毁，销毁后自动从队列拉取下一条展示

// 插入全局通知的核心代码
void showOverlayNotification(BuildContext context, String content) {
  final overlay = Overlay.of(context);
  late OverlayEntry entry;
  entry = OverlayEntry(builder: (context) {
    return AnimatedPositioned(
      duration: const Duration(milliseconds: 300),
      top: 40, // 顶部偏移，避开状态栏
      left: 16,
      right: 16,
      child: Material(
        color: Colors.transparent,
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
          decoration: BoxDecoration(
            color: Colors.grey[900],
            borderRadius: BorderRadius.circular(8),
          ),
          child: Row(
            children: [
              const CircleAvatar(radius: 20),
              const SizedBox(width: 12),
              Expanded(child: Text(content, style: const TextStyle(color: Colors.white))),
            ],
          ),
        ),
      ),
    );
  });
  overlay.insert(entry);
  // 自动移除
  Future.delayed(const Duration(seconds: 4), () {
    if (entry.mounted) entry.remove();
  });
}

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