Flutter Web iOS端GetX路由左滑返回白屏问题求助

问题现象 #

• 使用GetX配置路由时，iOS端左滑返回触发后，所有页面路由被清空，页面变为白屏：
  
• 切换为GoRouter路由方案后，该问题依然存在：
  

可行解决方案 #

1. 拦截浏览器原生滑动返回行为 #

Flutter Web在iOS Safari中会与浏览器原生滑动返回逻辑冲突，导致路由状态异常。可在web/index.html中添加脚本拦截：

<script>
// 阻止iOS Safari顶部滑动返回
document.addEventListener('touchmove', function(e) {
  if (window.scrollY === 0) {
    e.preventDefault();
  }
}, { passive: false });

// 拦截popstate事件，避免浏览器默认路由操作干扰Flutter路由
window.addEventListener('popstate', function(e) {
  e.preventDefault();
});
</script>

2. 禁用GoRouter的原生滑动返回手势 #

在GoRouter配置中直接关闭iOS端的滑动返回手势，改用自定义返回按钮：

final GoRouter router = GoRouter(
  routes: [/* 你的路由列表 */],
  pageBuilder: (context, state) => CupertinoPage(
    child: state.page!,
    popGestureEnabled: false, // 禁用原生滑动返回
    maintainState: true,
  ),
);

3. GetX中维护路由栈最小长度 #

通过路由观察者监听返回事件，确保路由栈至少保留一个页面：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      navigatorObservers: [
        GetObserver(
          didPop: (route, previousRoute) {
            if (Get.routing.routeStack.length <= 1) {
              // 阻止清空路由栈，跳转到首页
              Get.offAllNamed('/home');
            }
          },
        ),
      ],
      getPages: [/* 你的路由配置 */],
    );
  }
}

4. 升级Flutter至最新稳定版 #

该问题属于Flutter Web在iOS端的已知兼容性问题，升级到3.13及以上的稳定版本，官方可能已修复路由与浏览器滑动返回的冲突。

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