Flutter Firebase切换用户后UI未更新显示正确用户信息问题

核心问题 #

你在类外部定义的userEmail只会在应用启动时获取一次当前用户邮箱，切换用户后不会自动更新，导致UI始终显示旧的邮箱地址。

修复方案 #

方案1：使用StreamBuilder监听用户状态变化

直接在UI中监听Firebase Auth的用户状态流，当用户登录/退出/切换时，自动重建对应UI部分：

class Dashboard extends ConsumerStatefulWidget {
  const Dashboard({Key? key}) : super(key: key);

  @override
  _DashboardState createState() => _DashboardState();
}

class _DashboardState extends ConsumerState<Dashboard> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(children: [
        // 用StreamBuilder监听用户状态变化
        StreamBuilder<User?>(
          stream: FirebaseAuth.instance.authStateChanges(),
          builder: (context, snapshot) {
            final currentUser = snapshot.data;
            final userEmail = currentUser?.email ?? 'Guest';
            return Padding(
              padding: const EdgeInsets.fromLTRB(0, 15, 0, 15),
              child: AutoSizeText(
                'Good Morning, $userEmail!',
              ),
            );
          },
        ),
        // 退出按钮
        ElevatedButton(
          onPressed: FirebaseAuth.instance.signOut,
          child: const Text('Sign Out'),
        )
      ]),
    );
  }
}

方案2：结合Riverpod监听用户状态（适配你的Consumer组件）

如果项目使用Riverpod，可创建全局Provider监听用户状态，在UI中响应变化：

1. 定义Auth状态Provider：

final authStateProvider = StreamProvider<User?>((ref) {
  return FirebaseAuth.instance.authStateChanges();
});

2. 在Dashboard中使用：

class _DashboardState extends ConsumerState<Dashboard> {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // 监听Auth状态变化
    final authState = ref.watch(authStateProvider);
    
    return Scaffold(
      body: Column(children: [
        authState.when(
          data: (user) {
            final userEmail = user?.email ?? 'Guest';
            return Padding(
              padding: const EdgeInsets.fromLTRB(0, 15, 0, 15),
              child: AutoSizeText(
                'Good Morning, $userEmail!',
              ),
            );
          },
          loading: () => const CircularProgressIndicator(),
          error: (error, stack) => Text('登录状态错误：$error'),
        ),
        ElevatedButton(
          onPressed: FirebaseAuth.instance.signOut,
          child: const Text('Sign Out'),
        )
      ]),
    );
  }
}

注意事项 #

• 移除类外部的final userEmail = FirebaseAuth.instance.currentUser!.email;，避免静态值导致的更新不及时问题。
• 两种方案都能实现用户状态变化时自动更新UI，选择符合你项目技术栈的方式即可。

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