如何在使用命名路由的Flutter应用顶层叠加全局悬浮Widget

方案1：使用MaterialApp.builder（推荐，适配命名路由场景） #

MaterialApp的builder方法返回的组件会嵌套在路由导航器的上层，所有路由切换都不会影响该层级的组件，完全兼容命名路由逻辑，不需要修改现有路由配置。
要实现下层页面可正常交互，只需要通过IgnorePointer控制事件透传即可：

import 'package:flutter/material.dart';

// 全局悬浮组件的状态控制可适配项目现有状态管理方案，此处为最简示例
ValueNotifier<bool> showFloatWidget = ValueNotifier(true);

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: "/someroute",
      onGenerateRoute: MyRouteManager.generateRoute,
      // 核心新增builder属性配置全局悬浮层
      builder: (context, child) {
        return Stack(
          children: [
            // 原有路由页面层级
            child!,
            // 全局悬浮层
            ValueListenableBuilder(
              valueListenable: showFloatWidget,
              builder: (context, isShow, _) {
                if(!isShow) return const SizedBox.shrink();
                // IgnorePointer默认ignoring=true时，悬浮层空白区域不拦截事件，下层可正常交互
                return IgnorePointer(
                  ignoring: true,
                  child: Stack(
                    children: [
                      // 需要响应点击的悬浮组件单独设置ignoring=false即可
                      Positioned(
                        left: 20,
                        top: 100,
                        child: IgnorePointer(
                          ignoring: false,
                          child: GestureDetector(
                            onTap: () {
                              // 悬浮组件的自定义点击逻辑
                              debugPrint("悬浮按钮被点击");
                            },
                            child: Container(
                              width: 50,
                              height: 50,
                              decoration: BoxDecoration(
                                color: Colors.blue,
                                borderRadius: BorderRadius.circular(25),
                              ),
                              child: const Icon(Icons.add, color: Colors.white),
                            ),
                          ),
                        ),
                      )
                    ],
                  ),
                );
              },
            )
          ],
        );
      },
    );
  }
}

该方案优势：

• 完全兼容现有命名路由逻辑，无需修改路由相关代码
• 悬浮组件生命周期和应用一致，路由切换不会触发悬浮组件重建
• 事件透传逻辑可灵活控制，需要响应交互的区域单独放开即可

方案2：使用Overlay动态插入（适合需要动态显隐/多悬浮实例的场景） #

如果需要随时动态插入/移除悬浮组件，可以用系统自带的Overlay实现，无需依赖第三方插件：

1. 先定义全局的NavigatorKey，用来获取全局Overlay实例

final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

2. 把key绑定到MaterialApp上：

return MaterialApp(
  navigatorKey: navigatorKey,
  // 其余原有配置保持不变
  initialRoute: "/someroute",
  onGenerateRoute: MyRouteManager.generateRoute,
);

3. 任意位置需要插入悬浮组件时调用：

// 构建OverlayEntry
final overlayEntry = OverlayEntry(
  builder: (context) {
    // 事件透传逻辑和方案1一致
    return IgnorePointer(
      ignoring: true,
      child: Positioned(
        left: 20,
        top: 200,
        child: IgnorePointer(
          ignoring: false,
          child: GestureDetector(
            onTap: () => debugPrint("动态悬浮按钮点击"),
            child: Container(
              width: 50,
              height: 50,
              color: Colors.red,
            ),
          ),
        ),
      ),
    );
  }
);
// 插入全局Overlay
navigatorKey.currentState?.overlay?.insert(overlayEntry);

// 需要移除时调用
// overlayEntry.remove();

注意事项 #

• 两种方案都不会拦截下层页面的交互，只要正确配置IgnorePointer的属性即可
• 悬浮组件的状态管理可以根据项目现有技术栈选择Provider、Riverpod、Bloc等，无需额外适配

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