Flutter中WillPopScope无法在Web端拦截浏览器返回按钮如何解决？

WillPopScope 官方默认仅响应 Flutter 内部导航栈的 pop 行为，不会监听浏览器原生的后退/前进按钮触发的历史记录变更事件，因此 Web 端默认无法触发 onWillPop 回调。

适配方案（按你的Flutter版本选择即可） #

方案1：Flutter 3.16+ 版本（推荐） #

用官方新增的 BackButtonListener 组件替代 WillPopScope，该组件原生支持监听包括Web浏览器返回在内的所有系统返回事件，你的代码可以修改为：

BackButtonListener(
  onBackButtonPressed: () async {
    print("will pop on web");
    Get.offNamed("/orders");
    // 返回true表示拦截当前返回事件，不执行系统默认返回逻辑
    return true;
  },
  child: Scaffold(...),
)

方案2：低版本Flutter兼容方案 #

如果你的Flutter版本低于3.16，可以手动监听浏览器的popstate原生事件实现拦截，在当前页面的State中添加如下代码：

import 'dart:html' as html;
import 'package:flutter/foundation.dart';

late html.EventListener popStateListener;

@override
void initState() {
  super.initState();
  if (kIsWeb) {
    // 注册返回事件监听
    popStateListener = (html.Event event) {
      print("监听到浏览器返回");
      Get.offNamed("/orders");
      event.preventDefault();
    };
    html.window.addEventListener('popstate', popStateListener);
    // 手动插入一条当前页面的历史记录，保证首次点击后退能触发监听事件
    html.window.history.pushState(null, html.window.document.title, html.window.location.href);
  }
}

@override
void dispose() {
  if (kIsWeb) {
    // 页面销毁时移除监听，避免内存泄漏
    html.window.removeEventListener('popstate', popStateListener);
  }
  super.dispose();
}

前置配置检查 #

不管用哪种方案，都需要先确认以下配置正确：

• 入口main函数中配置Web端的URL策略，避免路由hash模式导致的历史记录异常：

import 'package:flutter_web_plugins/flutter_web_plugins.dart';

void main() {
  if (kIsWeb) {
    setUrlStrategy(PathUrlStrategy());
  }
  runApp(const MyApp());
}

• 如果你使用GetX路由，需要在GetMaterialApp中配置导航观察者，保证GetX路由和系统路由栈同步：

GetMaterialApp(
  navigatorObservers: [GetObserver()],
  // 其余原有配置不变
  ...
)

注意事项 #

• 拦截事件后如果已经自己处理了路由跳转，记得返回true拦截默认事件，避免出现重复跳转的问题
• 如果需要全局拦截所有页面的返回，可以将BackButtonListener套在GetMaterialApp的child外层，不需要每个页面单独配置

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