如何在Flutter Web中使用Go Router，在浏览器的返回按钮或页面重新加载时显示警报对话框？

Question

我正在开发Flutter web应用程序，使用go_router进行页面导航。

期望： 从初始路由开始，当用户尝试使用浏览器的后退按钮或重新加载页面时，应显示一个警告框，询问：“您确定要退出吗？”一类的消息，用户交互页面允许退出或停留在同一页。

尝试的方法：

1. WillPopScope:

我已经在HomeRoute Widget中添加了WillPopScope小部件来检测popCallBack。但是因为我可能使用go_router进行导航，所以无法在按下返回按钮时触发它。

通过执行以下语句，我无法在控制台上打印出后退事件的日志。

return WillPopScope(
      onWillPop: () async {
        print("on Will Pop is Called");
        return false;
      },
      child: PaintScaffold(...)
);

MaterialApp.router的BackButtonDispatcher仅适用于Android，而不适用于Web。因此它将不起作用。 参考资料。

2. onBeforeUnload监听器

我尝试在index.html文件中添加脚本来检测onBeforeUnload事件。但是它的行为是意外的。它在chrome浏览器中表现良好，但在safari中，在按下返回按钮时不会显示警告框。但重新加载页面可以正常工作。

在iOS Safari浏览器上，无论何时页面卸载，onBeforeUnload都不会被触发。

  <script>
    window.addEventListener('load', function(ev) {
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        }
      }).then(function(engineInitializer) {
        return engineInitializer.initializeEngine();
      }).then(function(appRunner) {
        return appRunner.runApp();
      });
    });

     window.onunload = window.onbeforeunload = function(){
       return 'Are you sure you want to leave?';
     };
  </script>

当用户尝试退出页面时，是否有其他方法来解决此问题，使其显示一个警示框以请求确认？

谢谢。

- Happy Makadiya

---

在Flutter Web中可能不是这个问题。请查看此链接。 - yellowgray

Answer 1

从NavigatorObserver扩展Observer

---

代码

 GoRouter(
  initialLocation: '/',
  navigatorKey: _rootNavigatorKey,
  observers: [
    GoRouterObserver(),  Specify your observer here
  ],
  routes: [
    GoRoute(
      ...
    )
    GoRoute(
      ...
    ),
  ],
);

class GoRouterObserver extends NavigatorObserver {
  @override
  void didPush(Route<dynamic> route, Route<dynamic>? previousRoute) {
    showDialog()  Here show your dialog box
  }

  @override
  void didPop(Route<dynamic> route, Route<dynamic>? previousRoute) {
   showDialog()  Here show your dialog box
  }

  @override
  void didRemove(Route<dynamic> route, Route<dynamic>? previousRoute) {
   showDialog()  Here show your dialog box
  }

  @override
  void didReplace({Route<dynamic>? newRoute, Route<dynamic>? oldRoute}) {
    showDialog()  Here show your dialog box
  }
}

- Agni Gari