Flutter Web使用GetX多页面导航后浏览器返回按钮失效问题

问题根源 #

你遇到的浏览器返回按钮禁用问题，核心原因有两个：

1. 错误使用Get.offNamed：在WillPopScope的onWillPop回调里调用Get.offNamed，这个方法会替换当前页面在浏览器历史栈中的条目，而非执行常规返回操作。从EditPostScreen返回PetDetailScreen时，原本的EditPostScreen历史条目被替换成PetDetailScreen，导致历史栈变为Home -> Store -> PetDetail，此时再点击浏览器返回就没有上一页，按钮自然禁用。
2. 路由名称大小写不匹配：GetPage配置里是/PetDetailScreen/:docId和/EditPostScreen/:docId，但实际导航用的是/petDetail/${pet.docId}和/editPost/${pet.docId}，大小写不一致会导致路由匹配混乱，影响浏览器历史栈的正常记录。

解决方案 #

1. 修正路由名称大小写

将GetMaterialApp里的路由名称改成和导航时一致的小写格式，避免匹配问题：

GetMaterialApp(
  initialRoute: '/',
  getPages: [
    GetPage(name: '/', page: () => HomePage()),
    GetPage(name: '/store', page: () => StoreScreen()),
    // 统一为小写，和导航路径一致
    GetPage(name: '/petDetail/:docId', page: () => PetDetailScreen(docId: Get.parameters['docId']!)),
    GetPage(name: '/editPost/:docId', page: () => EditPostScreen(docId: Get.parameters['docId']!)),
  ],
);

2. 调整WillPopScope逻辑

如果不需要在返回时执行额外逻辑，直接删掉WillPopScope，让浏览器默认返回行为接管：

@override
Widget build(BuildContext context) {
  return Scaffold(
    // 页面内容...
  );
}

如果需要在返回前执行自定义逻辑（比如保存编辑内容），不要用Get.offNamed，处理完逻辑后返回true，让系统执行默认pop操作：

@override
Widget build(BuildContext context) {
  return WillPopScope(
    onWillPop: () async {
      // 执行自定义逻辑，比如保存数据
      await _saveEditedContent();
      // 返回true，允许系统执行默认返回，保留历史栈
      return true;
    },
    child: Scaffold(
      // 页面内容...
    ),
  );
}

3. 保持正确的导航方式

所有页面跳转继续使用Get.toNamed，这个方法会在浏览器历史栈中添加新条目，符合多层级返回需求：

// 保留原有正确的导航写法
Get.toNamed('/petDetail/${pet.docId}');
Get.toNamed('/editPost/${widget.docId}');

验证效果 #

修正后，按Home -> Store -> PetDetail -> EditPost顺序导航，浏览器历史栈会正确记录四个页面。点击浏览器返回按钮时，会按EditPost -> PetDetail -> Store -> Home逆序返回，不会出现按钮禁用或跳过页面的问题。

内容的提问来源于stack exchange，提问作者Dasun Dola