使用Flutter结合Firebase实现登录成功后无法自动跳转仪表盘问题

问题原因 #

• 你的login异步方法中，仅处理了登录请求和异常打印逻辑，登录成功后没有添加页面跳转代码，APP不会自动触发页面切换
• 你没有全局监听Firebase Auth的登录状态变化，只有APP重启时才会重新校验当前用户的登录状态，因此只有重启后才能进入仪表盘页面

解决方法 #

1. 先修改login方法，登录成功后主动触发路由跳转，代码修改如下：

void login(String email, String password) async {
  FirebaseAuth _auth =  FirebaseAuth.instance;
  User? user;
  try {
    UserCredential userCredential = await _auth.signInWithEmailAndPassword(
      email: email,
      password: password);
    user = userCredential.user;
    // 新增登录成功跳转逻辑
    if(user != null && mounted) {
      // 若使用原生Navigator路由：
      Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => const DashboardScreen()));
      // 若使用GetX路由，替换为下面的代码即可：
      // Get.offAll(() => const DashboardScreen());
    }
  } on FirebaseAuthException catch (e) {
    if (e.code == 'user-not-found') {
      print('No user found for that email.');
      // 可替换为toast提示用户
    } else if (e.code == 'wrong-password') {
      print('Wrong password provided for that user.');
      // 可替换为toast提示用户
    }
  }
}

2. 建议新增全局登录状态监听，无需手动跳转即可自动根据登录状态渲染对应页面，可在根组件中添加如下逻辑：

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StreamBuilder<User?>(
        // 监听登录状态变化
        stream: FirebaseAuth.instance.authStateChanges(),
        builder: (context, snapshot) {
          // 加载状态时显示加载动画
          if(snapshot.connectionState == ConnectionState.waiting) {
            return const Scaffold(body: Center(child: CircularProgressIndicator()));
          }
          // 已登录直接进入仪表盘，未登录进入登录页
          return snapshot.hasData ? const DashboardScreen() : const LoginScreen();
        },
      ),
    );
  }
}

补充优化点 #

• 调用login方法的onPressed回调中可以添加加载状态控制，避免用户重复点击触发多次登录请求
• 异常提示不要仅在控制台打印，可接入toast组件给用户直观的错误提示

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