Flutter监听Supabase认证事件实现页面跳转异常问题

问题根源 #

1. 状态重置导致页面跳转错误：触发passwordRecovery事件时，你调用pushAndRemoveUntil重新加载了当前的AuthApp组件，新实例的_resettingPassword初始值为false，因此重建后getNextPage()会返回首页而非重置密码页面。
2. 导航逻辑错误：不应该重新push自身组件，而是直接导航到目标页面并清空栈。
3. 代码遗漏：_currentUser变量未在类中声明，会导致编译错误。

修正后的代码 #

class AuthApp extends StatefulWidget {
  const AuthApp({super.key});

  @override
  State<AuthApp> createState() => _AuthAppState();
}

class _AuthAppState extends State<AuthApp> {
  late final StreamSubscription<AuthState> _authStateSubscription;
  bool _isLoggedIn = supabaseClient.auth.currentSession != null;
  User? _currentUser; // 补上未声明的用户变量

  @override
  void initState() {
    super.initState();
    _currentUser = supabaseClient.auth.currentUser; // 初始化当前用户
    _setupAuthStateSubscription();
  }

  void _setupAuthStateSubscription() {
    _authStateSubscription = supabaseClient.auth.onAuthStateChange.listen((data) {
      final AuthChangeEvent event = data.event;
      final Session? session = data.session;

      setState(() {
        _currentUser = session?.user;
        _isLoggedIn = session != null;
      });

      switch (event) {
        case AuthChangeEvent.signedIn:
          // 登录成功，清空栈并跳转首页
          Navigator.of(context).pushAndRemoveUntil(
            MaterialPageRoute(builder: (context) => const MainApp()),
            (route) => false,
          );
          break;
        case AuthChangeEvent.passwordRecovery:
          // 触发密码重置，清空栈并跳转重置页面
          Navigator.of(context).pushAndRemoveUntil(
            MaterialPageRoute(builder: (context) => const ResetPasswordScreen()),
            (route) => false,
          );
          break;
        case AuthChangeEvent.signedOut:
          // 登出，清空栈并跳转欢迎页
          Navigator.of(context).pushAndRemoveUntil(
            MaterialPageRoute(builder: (context) => const WelcomeScreen()),
            (route) => false,
          );
          break;
        default:
          // 其他认证事件无需处理导航
          break;
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    // 根据初始登录状态返回对应页面
    return _isLoggedIn ? const MainApp() : const WelcomeScreen();
  }
}

关键改动说明 #

• 移除_resettingPassword变量，直接在事件回调中处理导航，避免组件重建时状态丢失。
• 使用switch语句拆分不同认证事件的导航逻辑，每个事件直接跳转目标页面并清空导航栈。
• 初始化时直接获取当前用户和登录状态，确保组件首次加载时显示正确页面。
• 简化build方法逻辑，后续页面切换完全由认证事件的导航回调处理。

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