使用 StreamBuilder 作为 GoRouter 导航栈的根

Question

目前我有一个 StreamBuilder 在HomePage和LandingPage页面之间切换，具体取决于当前的身份验证 state。我遇到的问题是我无法在 state 更改时将堆栈弹出到原始/landing目录。 这意味着当用户登录时， AuthPage保留在堆栈的顶部，而 StreamBuilder 在下面构建HomePage 。

授权门

class AuthGate extends StatelessWidget {
  const AuthGate({super.key});

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<User?>(
      stream: FirebaseAuth.instance.authStateChanges(),
      builder: (context, snapshot) {
        return snapshot.hasData ? const HomePage() : const LandingPage();
      },
    );
  }
}

LandingPage 这会将 AuthPage 推送到堆栈。

class LandingPage extends StatelessWidget {
  const LandingPage({super.key});

  ...

        Row(
          children: <Widget>[
            FloatingActionButton.extended(
              heroTag: UniqueKey(),
              onPressed: () {
                context.push('/auth');
              },
              label: const Text('Get started'),
            ),
            FloatingActionButton.extended(
              heroTag: UniqueKey(),
              onPressed: () {
                context.push('/auth');
              },
              label: const Text('Log in'),
            ),
          ],
        )

  ...

  }
}

授权更改前的堆栈

授权更改后堆栈

请注意AuthPage如何保持在堆栈的顶部，但StreamBuilder下的 Widget 更改为HomePage

_{（这是我的第一个 Stack 问题，所以请随时要求我修改任何信息等。）}

Answer 1

如果您使用的是 GoRouter，那么您想要实现的目标应该通过 GoRouter 完成，类似于此：

GoRouter(
        refreshListenable:
            GoRouterRefreshListenable(FirebaseAuth.instance.authStateChanges()),
        initialLocation: '/auth',
        routes: <GoRoute>[
          GoRoute(
            path: '/landing',
            name: 'landing',
            builder: (context, state) {
              return LandingPage()
            },
            routes: [
              GoRoute(
                path: 'auth',
                name: 'auth',
                builder: (context, state) => const AuthPage(),
              ),
            ],
          ),
          GoRoute(
            path: '/home',
            name: 'home',
            builder: (context, state) => const HomePage(),
          ),
        ],
        errorBuilder: (context, state) {
          return const Scaffold(
            body: Text('404'),
          );
        },
        redirect: (context, state) async {
          final userRepo = injector.get<UserRepository>();

          final user = FirebaseAuth.instance;

          const authPaths = [
            '/landing',
            '/landing/auth',
          ];

          bool isAuthPage = authPaths.contains(state.subloc);

          if(user != null) {
            if (isAuthPage) {
              return '/home';
            }
          }
          if(!isAuthPage) {
            return '/auth';
          }
          return null;

          
        },
      );

class GoRouterRefreshListenable extends ChangeNotifier {
  GoRouterRefreshListenable(Stream stream) {
    notifyListeners();
    _subscription = stream.asBroadcastStream().listen(
      (_) {
        notifyListeners();
      },
    );
  }

  late final StreamSubscription _subscription;

  @override
  void dispose() {
    _subscription.cancel();
    super.dispose();
  }
}

另请阅读有关 GoRouter 的文档。