Flutter如何在侧边抽屉Drawer中展示已登录用户的姓名与邮箱

实现方案 #

你在注册逻辑中已经将用户名同步到了Firebase Auth的displayName字段，用户邮箱是Firebase Auth默认自带的字段，所以最简单的实现方式是直接从Auth的当前用户实例读取数据，不需要额外请求Firestore。如果需要读取你存在Firestore的其他自定义字段，再用第二种方案即可。

方案1：直接从Firebase Auth读取（推荐，性能最优） #

不需要修改现有逻辑，直接修改Drawer代码即可，同时加了空判断兜底，避免未登录场景报错：

import 'package:firebase_auth/firebase_auth.dart';

// 替换你原有Scaffold的drawer属性代码
drawer: Drawer(
  child: ListView(
    padding: EdgeInsets.zero, // 移除顶部默认留白，避免Header出现白边
    children: [
      UserAccountsDrawerHeader(
        decoration: BoxDecoration(
          color: AppColors.secundary,
        ),
        accountEmail: Text(FirebaseAuth.instance.currentUser?.email ?? '未绑定邮箱'),
        accountName: Text(FirebaseAuth.instance.currentUser?.displayName ?? '匿名用户'),
        // 如需展示头像可以打开下面注释，用你存在Auth的photoURL或者Firestore的url字段
        // currentAccountPicture: CircleAvatar(
        //   backgroundImage: NetworkImage(FirebaseAuth.instance.currentUser?.photoURL ?? '默认头像本地地址'),
        // ),
      ),
      // 你原有Drawer的其他菜单项保留在此处即可
    ],
  ),
),

注意：如果刚注册完成跳转首页后拿不到displayName，可以在注册逻辑的updateUser!.updateDisplayName(username);后面加一行重载用户信息的代码：

await updateUser.reload();

就能立刻同步最新的用户信息到本地。

方案2：从Firestore读取自定义字段 #

如果你需要用到你存在Firestore的valitycnh、自定义头像url等字段，先优化你的userSetup存储逻辑，避免同一个uid生成多条用户文档：

Future<void> userSetup(String displayName, DateTime valitycnh, String url) async {
  CollectionReference users = FirebaseFirestore.instance.collection('Users_Client');
  FirebaseAuth auth = FirebaseAuth.instance;
  String uid = auth.currentUser!.uid.toString();
  // 改成用uid作为文档id存储，同一个用户只会生成一条文档，方便后续查询
  await users.doc(uid).set(
    {
      'uid': uid,
      'displayname': displayName,      
      'valitycnh': valitycnh,
      'url': url
    },
  );
  return;
}

再修改Drawer代码，用FutureBuilder异步加载Firestore数据：

import 'package:firebase_auth/firebase_auth.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

drawer: Drawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: [
      FutureBuilder<DocumentSnapshot>(
        future: FirebaseFirestore.instance.collection('Users_Client').doc(FirebaseAuth.instance.currentUser?.uid).get(),
        builder: (context, snapshot) {
          // 加载状态占位
          if (snapshot.connectionState == ConnectionState.waiting) {
            return UserAccountsDrawerHeader(
              decoration: BoxDecoration(color: AppColors.secundary),
              accountEmail: Text('加载中...'),
              accountName: Text('加载中...'),
            );
          }
          // 加载失败/无数据兜底
          if (snapshot.hasError || !snapshot.hasData || !snapshot.data!.exists) {
            return UserAccountsDrawerHeader(
              decoration: BoxDecoration(color: AppColors.secundary),
              accountEmail: Text('未绑定邮箱'),
              accountName: Text('匿名用户'),
            );
          }
          // 读取Firestore用户数据渲染
          Map<String, dynamic> userData = snapshot.data!.data() as Map<String, dynamic>;
          return UserAccountsDrawerHeader(
            decoration: BoxDecoration(color: AppColors.secundary),
            accountEmail: Text(FirebaseAuth.instance.currentUser?.email ?? '未绑定邮箱'),
            accountName: Text(userData['displayname'] ?? '匿名用户'),
            currentAccountPicture: CircleAvatar(
              backgroundImage: NetworkImage(userData['url'] ?? '默认头像本地地址'),
            ),
          );
        },
      ),
      // 你原有Drawer的其他菜单项保留在此处即可
    ],
  ),
)

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