标签: flutter-go-router

我正在开发 Flutter Web并使用go_router进行导航。

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

尝试过的方法：

1.WillPopScope：

我在 HomeRoute Widget 上添加了 WillPopScope 小部件来检测 popCallBack。但不知何故，按下后退按钮时不会触发它，因为我可能使用了 go_router 进行导航。

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

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 …

我使用 go_router 进行导航，使用 flutter_bloc 进行状态管理。

我想使用refreshListenable并在我的GoRouter配置中监听我的AuthBloC事件，但是，我无权访问我的GoRouter中的上下文，并且我不想提供它。

我发现的大多数答案都已过时，或者使用 StreamBuilder 等替代方案在事件更改时重新渲染整个应用程序，这并不理想。

如何在上下文之外监听我的 AuthEvents？

主程序.dart

return RepositoryProvider.value(
      value: authRepo,
      child: BlocProvider(
        create: (_) => AuthBloc(authRepo),
        child: MaterialApp.router(
          ...
          routerConfig: Routes.router,
          builder: (_, child) {
            final isRTL = LocaleSettings.currentLocale == AppLocale.ar;

            return Directionality(
              textDirection: isRTL ? TextDirection.rtl : TextDirection.ltr,
              child: child!,
            );
          },
        ),
      ),

块/auth/auth_bloc.dart

class AuthBloc extends Bloc<AuthEvent, AuthState> {
  AuthBloc(this._authenticationRepository) : super(const AuthState()) {
    on<AuthEvent>((event, emit) {
      event.when(
        authStateChangeEvent: (account) => _authStateChangeEvent(account, emit),
        signOutEvent: _signOutEvent,
        verifyAccount: _verifyAccount,
      );
    });
    _userSubscription = …

我想知道是否有 NavigatorpopUntil()方法的替代方法，或者有任何解决方法可以实现相同的目的。

如果我要使用Navigator. 我会像这样使用：

void _logout() {
  Navigator.popUntil(context, ModalRoute.withName('/login'));
}

如何实现同样的目标go router？

我看到一个 github 问题 - [go_router] Implement popUntil #2728，但没有相同的积极结果。

在我的 Flutter 应用程序中，我使用该go_router包来管理路由和Firebase Authentication用户身份验证。我有几个屏幕需要用户经过身份验证才能访问，例如帐户管理、交易和详细信息。

目前，我已经实现了重定向，go_router以确保未经身份验证的用户被正确重定向。但是，当用户已经位于这些屏幕之一并注销或会话过期时，我面临着挑战。

我正在考虑使用 BlocListener 来检测每个屏幕上身份验证状态的变化，但这似乎会导致代码重复。由于 Firebase 身份验证，我还有一个 Stream 通知身份验证状态的更改，并更新变量contex.isUserSignIn。

使用 go_router 和 Firebase 身份验证有效处理 Flutter 中的注销或会话过期事件的最佳实践是什么？

在应用程序启动时，我有一些配置页面（可以由用户跳过），用户设置一次，最后在仪表板页面中结束。

可能的导航流程（取决于用户已经设置的内容以及过去跳过的内容）：

'/' -> '/dashboard'
'/' -> '/language' -> '/dashboard'
'/' -> '/welcome'/ -> '/dashboard'
'/' -> '/welcome'/ -> '/language' -> '/dashboard'

如果我从 到/welcome我过去/language能够context.push('/language')导航回来 - 但我知道它可以被重定向到/dashboard。因此，如果我从任何地方转到/dashboard，我总是希望最终得到清晰的导航历史记录，这样，如果用户单击仪表板上的后退按钮，应用程序应该关闭，并且仪表板 AppBar 中没有后退箭头。

final router = GoRouter(
  routes: <GoRoute>[
    GoRoute(
      path: '/',
      redirect: (_, __) => '/welcome',
    ),
    GoRoute(
      path: '/welcome',
      builder: (_, __) => const WelcomePage(),
      redirect: (_, __) async {
        final skip = await ...
        if (skip) {
          return '/language';
        }

        return null; …

在 iOS 上，当我单击 URL 时，它会打开我的 Flutter 应用程序，但仍保留在主屏幕上。它不会转到给定页面。

例如，如果链接是https://my-app.com/page1，应用程序将直接转到/

这是 AASA：

.well-known/apple-app-site-association

{\n  "applinks": {\n    "apps": [],\n    "details": [\n      {\n        "appID": "com.my-app",\n        "paths": ["*"]\n      }\n    ]\n  }\n}\n

ios/Runner/Runner.entitlements

<?xml version="1.0" encoding="UTF-8"?>\n<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">\n<plist version="1.0">\n<dict>\n    <key>aps-environment</key>\n    <string>development</string>\n    <key>com.apple.developer.associated-domains</key>\n    <array>\n        <string>applinks:my-app.com</string>\n        <string>applinks:my-app-staging.com</string>\n    </array>\n</dict>\n</plist>\n\n

如果我检查https://search.developer.apple.com/appsearch-validation-tool中的网址，一切都会通过。

我的应用程序使用 go_router 5.0.1

<?xml version="1.0" encoding="UTF-8"?>\n<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">\n<plist version="1.0">\n<dict>\n    <key>aps-environment</key>\n    <string>development</string>\n    <key>com.apple.developer.associated-domains</key>\n    <array>\n        <string>applinks:my-app.com</string>\n        <string>applinks:my-app-staging.com</string>\n    </array>\n</dict>\n</plist>\n\n

我尝试在重定向中放置断点，但它从未被执行。 …

我一直在通过第三方集成（例如SentryNavigatorObserver，FirebaseAnalyticsObserver）来分析不同的导航观察者，以使默认情况下没有它的工具相同。但我注意到这些都没有真正捕获所有路线转换。当他们在相应的控制台中显示数据时我看到了它。是的，它适用于push/ ，但不会跟踪pop同一级别内的任何转换。go这很烦人。有人知道解决的方法吗？

例如，

观察到从/page到 的转变。/page/detail

/pageA从到 的过渡/pageB则不是。

在我的 Flutter 应用程序中，我使用go_router在页面之间导航。

以下是我的应用程序中的当前页面：

• accounts_page
• add_account_page
• import_accounts_page

现在，我想在 内部实现嵌套导航add_account_page，因此我可以使用多个步骤添加新帐户，比方说：

• account_info_step
• account_type_step
• account_detail_step

这是我尝试过的：

  final _navigatorKey = GlobalKey<NavigatorState>();
  final _addAccountNavigatorKey = GlobalKey<NavigatorState>();

  late final router = GoRouter(
    navigatorKey: _navigatorKey,
    initialLocation: "/accounts_page",
    routes: [
      ShellRoute(
        navigatorKey: _addAccountNavigatorKey,
        builder: (context, state, child) => AddAccountPage(child: child),
        routes: [
          GoRoute(
            parentNavigatorKey: _addAccountNavigatorKey,
            name: "account_info_step",
            path: "/account_info_step",
            builder: (context, state) => const AccountInfoStep(),
          ),
          GoRoute(
            parentNavigatorKey: _addAccountNavigatorKey,
            name: "account_type_step",
            path: "/account_type_step",
            builder: (context, state) => const AccountTypeStep(),
          ),
          GoRoute(
            parentNavigatorKey: _addAccountNavigatorKey,
            name: …

使用 flutter_bloc 和 go_router 实现基于身份验证更改的导航。

我需要做的是，如果用户经过身份验证，则应将其重定向到主屏幕，并能够导航身份验证流程...（HomeScreen，TestScreen1，TestScreen2）

如果用户在任何时候未经身份验证，则应将其重定向到登录屏幕，如果未知，则应重定向到启动屏幕。

我已经解决了许多 stackoverflow 问题和 github 问题，但没有一个提供我们如何实现这一目标的最佳实践。

问题：

• 无法在身份验证流程中导航，HomeScreen -> Test1 || 主屏幕 -> 测试 2

提供以下资产：

Tried to listen to a value exposed with provider, from outside of the widget tree.

This is likely caused by an event handler (like a button's onPressed) that called
Provider.of without passing `listen: false`.

To fix, write:
Provider.of<$T>(context, listen: false);

It is unsupported because may pointlessly rebuild the widget associated to the
event handler, when the widget tree …

这是一个场景，我用来StatefulShellRoute保留应用程序中每个选项卡的状态，当用户登录或更改应用程序的语言时，我需要刷新StatefulShellRoute以加载新数据。

我尝试给UniqueKey每个应用程序一个StatefulShellBranch，但是当我热重载或使用检查器时，它会重建整个应用程序，这对性能和开发流程不利。

那么有什么干净的方法来刷新我的吗StatefulShellRoute？