Flutter Web中go_router搭配WillPopScope不生效，如何监听返回按钮？

当使用go_router管理Flutter Web路由时，WillPopScope的onWillPop回调不会被触发——这是因为go_router接管了浏览器的popstate事件以及Flutter Navigator的导航逻辑，默认不会将返回事件传递给WillPopScope。以下是两种可行的解决方案：

方法一：通过GoRouter的onPopPage回调处理 #

在初始化GoRouter时，重写onPopPage方法，这里会捕获所有路由弹出事件（包括浏览器返回按钮点击）：

final GoRouter router = GoRouter(
  routes: [
    // 你的路由配置示例
    GoRoute(
      path: '/',
      builder: (context, state) => HomePage(),
    ),
    GoRoute(
      path: '/detail',
      builder: (context, state) => DetailPage(),
    ),
  ],
  onPopPage: (route, result) {
    // 此处处理返回按钮逻辑
    print('浏览器返回按钮被点击');
    
    // 允许路由弹出则返回true，需阻止返回则返回false
    // 示例：在详情页弹出确认对话框后再决定是否返回
    // showDialog(...)
    return route.didPop(result);
  },
);

方法二：直接监听浏览器popstate事件 #

通过dart:html库直接监听浏览器的popstate事件，这种方式更直接针对Web端的返回按钮：

首先导入依赖：

import 'dart:html' as html;

然后在页面生命周期中添加/移除监听：

class DetailPage extends StatefulWidget {
  const DetailPage({super.key});

  @override
  State<DetailPage> createState() => _DetailPageState();
}

class _DetailPageState extends State<DetailPage> {
  late html.EventListener _popStateListener;

  @override
  void initState() {
    super.initState();
    _popStateListener = (html.Event event) {
      // 处理返回按钮逻辑
      print('浏览器返回按钮触发');
      
      // 如需阻止默认返回行为，可手动控制路由
      // 示例：阻止返回并停留在当前页面
      // router.pushReplacement('/detail');
      // 或弹出确认框
      // _showExitConfirmation();
    };
    html.window.addEventListener('popstate', _popStateListener);
  }

  @override
  void dispose() {
    html.window.removeEventListener('popstate', _popStateListener);
    super.dispose();
  }

  // 示例：弹出离开确认对话框
  void _showExitConfirmation() {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('确认离开？'),
        content: const Text('确定要返回上一页吗？'),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('取消'),
          ),
          TextButton(
            onPressed: () {
              Navigator.pop(context);
              context.pop(); // 手动触发路由返回
            },
            child: const Text('确定'),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('详情页')),
      body: const Center(child: Text('详情内容')),
    );
  }
}

注意：使用第二种方法时，需要区分是用户点击浏览器返回还是代码中调用的路由弹出操作，避免逻辑冲突。可以结合go_router的路由栈状态（如router.routerDelegate.currentConfiguration）做判断。

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