如何在Flutter的Profile页面展示Firebase中的用户注册数据

1. 确认Firebase依赖配置 #

先确保pubspec.yaml中包含必要的Firebase依赖：

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.15.0
  cloud_firestore: ^4.8.3
  firebase_auth: ^4.10.0

执行命令安装依赖：

flutter pub get

2. 获取当前登录用户UID #

先验证用户是否已登录，获取其唯一标识UID：

final currentUser = FirebaseAuth.instance.currentUser;
if (currentUser == null) {
  // 用户未登录时跳转至登录页
  Navigator.pushReplacementNamed(context, '/login');
  return;
}
final userId = currentUser.uid;

3. 从Firestore读取用户数据 #

假设Firebase Firestore中存在users集合，每个用户数据以UID作为文档ID存储，包含name、age、email字段。通过以下方法异步获取数据：

Future<DocumentSnapshot<Map<String, dynamic>>> fetchUserData() async {
  return FirebaseFirestore.instance.collection('users').doc(userId).get();
}

4. 构建Profile页面展示数据 #

使用FutureBuilder处理异步数据加载，同时覆盖加载中、错误、无数据等场景：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('个人资料')),
    body: FutureBuilder<DocumentSnapshot<Map<String, dynamic>>>(
      future: fetchUserData(),
      builder: (context, snapshot) {
        // 加载中状态
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        }
        // 加载错误状态
        if (snapshot.hasError) {
          return Center(child: Text('加载失败: ${snapshot.error}'));
        }
        // 无用户数据状态
        if (!snapshot.hasData || !snapshot.data!.exists) {
          return const Center(child: Text('未找到用户信息'));
        }
        // 解析并展示数据
        final userInfo = snapshot.data!.data()!;
        return Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              ListTile(
                leading: const Icon(Icons.person_outline),
                title: const Text('姓名'),
                subtitle: Text(userInfo['name'] ?? '未设置'),
              ),
              ListTile(
                leading: const Icon(Icons.cake_outlined),
                title: const Text('年龄'),
                subtitle: Text(userInfo['age']?.toString() ?? '未设置'),
              ),
              ListTile(
                leading: const Icon(Icons.email_outlined),
                title: const Text('邮箱'),
                subtitle: Text(userInfo['email'] ?? currentUser?.email ?? '未设置'),
              ),
            ],
          ),
        );
      },
    ),
  );
}

补充：注册时写入用户数据到Firestore #

确保用户注册成功后，将信息同步写入Firestore，示例代码：

Future<void> registerUser(String email, String password, String name, int age) async {
  try {
    final authResult = await FirebaseAuth.instance.createUserWithEmailAndPassword(
      email: email,
      password: password,
    );
    // 将用户信息写入Firestore
    await FirebaseFirestore.instance.collection('users').doc(authResult.user!.uid).set({
      'name': name,
      'age': age,
      'email': email,
    });
  } on FirebaseAuthException catch (e) {
    // 处理注册错误（如邮箱已存在、密码强度不够等）
    debugPrint(e.message);
  }
}

可选：实时更新用户数据 #

如果需要实时同步用户数据（比如修改资料后自动刷新页面），可将FutureBuilder替换为StreamBuilder：

Stream<DocumentSnapshot<Map<String, dynamic>>> getUserDataStream() {
  return FirebaseFirestore.instance.collection('users').doc(userId).snapshots();
}

在页面中使用StreamBuilder<DocumentSnapshot<Map<String, dynamic>>>，逻辑与FutureBuilder基本一致，无需单独处理加载中状态（可通过initialData优化初始显示）。

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