Flutter Web中Dialog/BottomSheet在设备/桌面键盘返回时不关闭问题

核心思路 #

Flutter Web默认返回键逻辑直接操作页面路由栈，但Dialog/BottomSheet是通过Navigator的Overlay路由栈管理的，不在页面路由栈中。因此需要拦截返回事件，优先关闭弹窗，再处理页面返回。

方案一：使用PopScope（Flutter 3.12+ 推荐） #

Flutter 3.12后推出的PopScope更适配Web/桌面端返回事件，替代旧版WillPopScope：

@override
Widget build(BuildContext context) {
  return PopScope(
    canPop: false, // 禁用默认返回行为
    onPopInvoked: (bool didPop) async {
      final navigator = Navigator.of(context);
      // 先判断是否有可关闭的弹窗
      if (navigator.canPop()) {
        navigator.pop(); // 关闭Dialog/BottomSheet
      } else {
        // 无弹窗时执行页面返回
        if (context.mounted) {
          navigator.pop();
        }
      }
    },
    child: Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () => showDialog(
            context: context,
            builder: (_) => AlertDialog(title: const Text("测试弹窗")),
          ),
          child: const Text("打开弹窗"),
        ),
      ),
    ),
  );
}

方案二：使用WillPopScope（兼容旧版Flutter） #

若项目基于Flutter 3.12以下版本，用WillPopScope实现拦截：

@override
Widget build(BuildContext context) {
  return WillPopScope(
    onWillPop: () async {
      final navigator = Navigator.of(context);
      if (navigator.canPop()) {
        navigator.pop();
        return false; // 阻止默认页面返回
      }
      return true; // 允许页面返回
    },
    child: Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () => showDialog(
            context: context,
            builder: (_) => AlertDialog(title: const Text("测试弹窗")),
          ),
          child: const Text("打开弹窗"),
        ),
      ),
    ),
  );
}

全局处理方案（全应用生效） #

要让整个应用遵循该逻辑，可在根路由外层包裹全局拦截组件：

class GlobalBackHandler extends StatelessWidget {
  final Widget child;

  const GlobalBackHandler({super.key, required this.child});

  @override
  Widget build(BuildContext context) {
    return PopScope(
      canPop: false,
      onPopInvoked: (didPop) async {
        final navigator = Navigator.of(context);
        if (navigator.canPop()) {
          navigator.pop();
        } else {
          // 最外层页面返回时可自定义逻辑，如退出应用
          if (context.mounted) {
            navigator.pop();
          }
        }
      },
      child: child,
    );
  }
}

// 在MaterialApp中引用
MaterialApp(
  home: GlobalBackHandler(child: const HomePage()),
);

注意事项 #

• 必须使用官方showDialog/showModalBottomSheet等方法打开弹窗，这类方法会将弹窗加入Navigator路由栈，canPop()才能检测到。
• 若使用自定义Overlay弹窗，需手动维护弹窗状态，在拦截返回事件时优先关闭自定义弹窗。

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