Flutter Web项目中GetX框架下手机返回按钮失效问题求助

先确认基础配置 #

确保项目根组件用GetMaterialApp而非原生MaterialApp，GetX的路由管理依赖这个容器才能和Web浏览器历史栈正常同步：

void main() {
  runApp(GetMaterialApp(
    initialRoute: '/',
    getPages: [
      GetPage(name: '/', page: () => HomePage()),
      GetPage(name: '/detail', page: () => DetailPage()),
      // 其他路由配置
    ],
  ));
}

修复popState监听逻辑 #

你之前的监听会导致浏览器历史栈和GetX内部路由栈冲突——浏览器触发popState时已经回退了历史记录，再调用Get.back()会造成重复操作。改成以下方式，先阻止浏览器默认行为，再由GetX控制路由：

import 'dart:html' as html;

@override
void initState() {
  super.initState();
  // 监听浏览器返回事件
  html.window.addEventListener('popstate', (event) {
    // 阻止浏览器默认回退行为
    event.preventDefault();
    // 非初始路由时执行GetX返回
    if (Get.currentRoute != Get.initialRoute) {
      Get.back();
    }
  });
}

@override
void dispose() {
  // 移除监听避免内存泄漏
  html.window.removeEventListener('popstate', null);
  super.dispose();
}

正确使用back_button_interceptor包 #

该包默认处理移动端物理返回键，Web端需关联popState事件才能生效：

import 'package:back_button_interceptor/back_button_interceptor.dart';
import 'dart:html' as html;

@override
void initState() {
  super.initState();
  BackButtonInterceptor.add(interceptBackButton);
  // 关联Web的popState事件
  html.window.addEventListener('popstate', (event) => interceptBackButton(true, null));
}

@override
void dispose() {
  BackButtonInterceptor.remove(interceptBackButton);
  html.window.removeEventListener('popstate', null);
  super.dispose();
}

bool interceptBackButton(bool stopDefault, RouteInfo? info) {
  if (GetPlatform.isWeb) {
    if (Get.currentRoute != Get.initialRoute) {
      Get.back();
      return true; // 阻止默认行为，由GetX处理路由
    }
  }
  // 非Web端保留默认逻辑
  return false;
}

额外排查点 #

• 所有页面跳转统一用Get.toNamed()，不要混用原生Navigator.pushNamed，避免GetX路由栈和浏览器历史栈不同步。
• 在GetMaterialApp中开启enableLog: true，查看路由日志，确认GetX的栈变化和浏览器历史记录是否一致。

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