Flutter：Push路由切换页面时保持底部Overlay持续显示可行吗？

方案一：根布局嵌套Stack（最推荐） #

把底部Overlay放在App的根布局里，和Navigator同级，这样它会一直悬浮在所有页面之上，不受路由跳转影响：

1. 调整你的App根Widget结构，用Stack包裹Navigator和底部Overlay组件：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Stack(
        children: [
          // 核心路由导航区域
          Navigator(
            initialRoute: '/orders',
            onGenerateRoute: (settings) {
              switch (settings.name) {
                case '/orders':
                  return MaterialPageRoute(builder: (_) => OrdersView());
                case '/order-details':
                  return MaterialPageRoute(
                    builder: (_) => OrderDetailsView(
                      order: settings.arguments as Order, // 传递选中的订单数据
                    ),
                  );
                default:
                  return null;
              }
            },
          ),
          // 全局底部Overlay，始终显示在所有页面上方
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: Container(
              height: 60,
              color: Colors.grey[200],
              child: Center(child: Text("全局底部Overlay")),
            ),
          ),
        ],
      ),
    );
  }
}

2. 在Orders页面中，选中订单后正常执行push跳转：

// OrdersView中的订单点击事件
onTap: () {
  Navigator.pushNamed(
    context,
    '/order-details',
    arguments: selectedOrder,
  );
}

这种方案的优势：

• 实现简单，不需要复杂的状态管理
• 返回按钮、路由栈功能完全不受影响，和正常页面跳转一致
• Overlay的显示/隐藏、内容更新可以通过全局状态（比如Provider、Riverpod）轻松控制

方案二：全局OverlayEntry插入 #

如果不想调整根布局，也可以通过Flutter的Overlay API插入全局OverlayEntry：

1. 在App初始化时（比如在MyApp的State中）创建并插入OverlayEntry：

class MyAppState extends State<MyApp> {
  OverlayEntry? _bottomOverlay;

  @override
  void initState() {
    super.initState();
    _bottomOverlay = OverlayEntry(
      builder: (context) => Positioned(
        bottom: 0,
        left: 0,
        right: 0,
        child: Container(
          height: 60,
          color: Colors.grey[200],
          child: Center(child: Text("全局底部Overlay")),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(
        builder: (context) {
          // 在BuildContext可用时插入Overlay
          WidgetsBinding.instance.addPostFrameCallback((_) {
            Overlay.of(context)?.insert(_bottomOverlay!);
          });
          return OrdersView();
        },
      ),
    );
  }

  @override
  void dispose() {
    _bottomOverlay?.remove();
    super.dispose();
  }
}

2. 跳转逻辑和正常完全一致，返回按钮功能不受影响。

注意事项 #

• 不要在单个页面的dispose方法中移除OverlayEntry（除非你希望页面退出时Overlay消失），否则跳转到详情页时前一个页面的dispose会触发，导致Overlay被移除
• 如果需要根据选中的订单更新Overlay内容，只需要用状态管理工具（比如Provider）维护订单状态，Overlay组件监听状态变化即可

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