Flutter Web中如何检测浏览器前进/后退按钮的点击？

核心实现方案 #

Flutter Web可以通过监听浏览器原生事件结合路由状态管理，实现对前进/后退按钮的检测与拦截，以下是具体实现方式：

1. 监听浏览器popstate原生事件 #

直接通过dart:html包监听浏览器的popstate事件，这是触发前进/后退操作时浏览器会抛出的原生事件：

import 'dart:html' as html;

void setupBrowserNavListener() {
  html.window.addEventListener('popstate', (event) {
    // 此处可处理前进/后退触发后的逻辑
    print("浏览器前进/后退按钮被点击");
  });
}

2. 区分浏览器后退与内部路由弹出 #

如果需要区分是浏览器按钮触发，还是Flutter内部路由操作（如Navigator.pop），可以结合PopScope和状态标记实现：

bool _isBrowserTriggered = false;

@override
void initState() {
  super.initState();
  // 注册浏览器事件监听
  html.window.addEventListener('popstate', (event) {
    _isBrowserTriggered = true;
  });
}

@override
Widget build(BuildContext context) {
  return PopScope(
    onPopInvoked: (didPop) {
      if (_isBrowserTriggered) {
        // 浏览器后退按钮触发的操作
        _handleBrowserBack();
        _isBrowserTriggered = false; // 重置标记
      } else {
        // Flutter内部路由弹出操作
        _handleInternalPop();
      }
    },
    child: Scaffold(
      // 页面内容
    ),
  );
}

void _handleBrowserBack() {
  // 这里可以实现自定义拦截逻辑，比如阻止回退或跳转指定页面
  Navigator.of(context).pushReplacementNamed('/login');
}

void _handleInternalPop() {
  // 处理内部路由弹出的逻辑
}

3. 阻止从登录页重新进入OTP页的具体逻辑 #

可以通过全局状态标记来控制路由访问：

• 在OTP页完成验证后，设置一个全局标记（如isOTPVerified = true，可借助Provider/Riverpod等状态管理工具维护）
• 在登录页的初始化或路由守卫中检查该标记，若已验证则拦截跳转到OTP页的操作
• 在popstate监听回调中，当检测到回退到登录页时，同步更新路由状态，避免用户再次进入OTP页

注意事项 #

• 页面销毁时记得移除事件监听，避免内存泄漏：

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

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