Flutter Web：使用Getx时点击浏览器返回按钮如何关闭弹窗并返回页面？

问题原因 #

默认情况下，浏览器返回按钮会直接触发页面路由的返回操作，GetX的Get.dialog弹出的弹窗不会被优先处理，导致点击返回时直接回到上一页面，而非先关闭弹窗。

解决方案一：给弹窗添加返回拦截（针对性处理） #

修改弹窗组件，用WillPopScope包裹AlertDialog，拦截系统返回事件，优先关闭弹窗：

Widget _createFormDialog(BuildContext context) {
  controller.descriptionEditorController.clear();
  return WillPopScope(
    onWillPop: () async {
      Get.back(); // 关闭当前弹窗
      return false; // 阻止系统默认的页面返回行为
    },
    child: AlertDialog(
      title: Text(
        "lbl_create_form".tr,
        style: AppStyle.headingMedium.copyWith(color: context.theme.listTileTheme.selectedTileColor),
      ),
      content: AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        width: Get.width * 0.7,
        height: Get.height * 0.8,
        child: SingleChildScrollView(
          
        ),
      ),
      actions: [
        Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
          ],
        )
      ],
    ),
  );
}

解决方案二：全局路由拦截（处理所有弹窗场景） #

如果应用中有多个弹窗需要处理这种情况，可在GetX初始化时添加全局路由拦截器，统一判断弹窗状态：

void main() {
  runApp(const MyApp());
  // 添加路由拦截
  Get.addRouteMiddleware((route) {
    // 判断是否有弹窗打开
    if (Get.isDialogOpen ?? false) {
      Get.back(); // 关闭弹窗
      return false; // 不执行本次页面路由返回
    }
    return true; // 正常执行页面返回
  });
}

说明 #

• 方案一仅针对当前弹窗生效，适合单个弹窗场景；
• 方案二全局生效，所有弹窗都会被优先处理，适合多弹窗的应用；
• 使用Get.back()关闭弹窗是GetX的标准方式，能正确维护弹窗栈状态。

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