如何在Flutter应用中从Firebase获取用户数据并展示到个人资料页

步骤1：添加Firestore依赖 #

先确保你的pubspec.yaml包含Firebase核心和Firestore依赖：

dependencies:
  flutter:
    sdk: flutter
  firebase_auth: ^latest_version
  firebase_core: ^latest_version
  cloud_firestore: ^latest_version

运行flutter pub get完成依赖安装。

步骤2：修改ProfilePage代码 #

以下是整合数据获取、状态管理和展示逻辑的完整代码：

import 'package:firebase_auth/firebase_auth.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:line_awesome_flutter/line_awesome_flutter.dart';
import '../Reminder/ui/theme.dart';

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

  @override
  State<ProfilePage> createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  final user = FirebaseAuth.instance.currentUser!;
  Map<String, dynamic>? _userData;
  bool _isLoading = true;
  String? _errorMessage;

  @override
  void initState() {
    super.initState();
    _fetchUserData();
  }

  // 从Firestore拉取用户数据
  Future<void> _fetchUserData() async {
    try {
      // 假设用户数据存在"users"集合中，文档ID对应当前用户UID
      DocumentSnapshot userDoc = await FirebaseFirestore.instance
          .collection('users')
          .doc(user.uid)
          .get();

      if (userDoc.exists) {
        setState(() {
          _userData = userDoc.data() as Map<String, dynamic>;
          _isLoading = false;
        });
      } else {
        setState(() {
          _errorMessage = "用户数据不存在";
          _isLoading = false;
        });
      }
    } catch (e) {
      setState(() {
        _errorMessage = "获取数据失败: ${e.toString()}";
        _isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text(
          'Profile',
          style: headingStyle,
        ),
        backgroundColor: Get.isDarkMode ? Colors.grey[700] : Colors.white,
      ),
      body: SingleChildScrollView(
        child: Container(
          padding: const EdgeInsets.all(10),
          child: Column(
            children: [
              SizedBox(
                width: 120,
                height: 120,
                child: Image(image: AssetImage("images/profile.png")),
              ),
              const SizedBox(height: 50),
              // 处理加载、错误、数据展示三种状态
              _isLoading
                  ? CircularProgressIndicator()
                  : _errorMessage != null
                      ? Text(_errorMessage!, style: TextStyle(color: Colors.red))
                      : Form(
                          child: Column(
                            children: [
                              TextFormField(
                                readOnly: true,
                                initialValue: _userData?['email'] ?? user.email,
                                decoration: InputDecoration(
                                    prefixIconColor: Get.isDarkMode?Colors.black:Colors.white,
                                    focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(100), borderSide: BorderSide(color: Get.isDarkMode?Colors.white:Colors.black,)),
                                    labelText: "Email",
                                    prefixIcon: Icon(LineAwesomeIcons.envelope_1, color:  Get.isDarkMode?Colors.white:Colors.black),
                                    border: OutlineInputBorder(
                                        borderRadius: BorderRadius.circular(100))),
                              ),
                              SizedBox(height: 10),
                              TextFormField(
                                readOnly: true,
                                initialValue: _userData?['fullName'] ?? "未设置",
                                decoration: InputDecoration(
                                    prefixIconColor: Get.isDarkMode?Colors.black:Colors.white,
                                    focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(100), borderSide: BorderSide(color: Get.isDarkMode?Colors.white:Colors.black,)),
                                    labelText: "Full Name",
                                    prefixIcon: Icon(LineAwesomeIcons.user, color:  Get.isDarkMode?Colors.white:Colors.black),
                                    border: OutlineInputBorder(
                                        borderRadius: BorderRadius.circular(100))),
                              ),
                              SizedBox(height: 10),
                              TextFormField(
                                readOnly: true,
                                initialValue: _userData?['dateOfBirth'] ?? "未设置",
                                decoration: InputDecoration(
                                    prefixIconColor: Get.isDarkMode?Colors.black:Colors.white,
                                    focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(100), borderSide: BorderSide(color: Get.isDarkMode?Colors.white:Colors.black,)),
                                    labelText: "Date of Birth",
                                    prefixIcon: Icon(LineAwesomeIcons.baby_carriage, color:  Get.isDarkMode?Colors.white:Colors.black),
                                    border: OutlineInputBorder(
                                        borderRadius: BorderRadius.circular(100))),
                              ),
                              SizedBox(height: 10),
                              TextFormField(
                                readOnly: true,
                                initialValue: _userData?['bloodType'] ?? "未设置",
                                decoration: InputDecoration(
                                    prefixIconColor: Get.isDarkMode?Colors.black:Colors.white,
                                    focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(100), borderSide: BorderSide(color: Get.isDarkMode?Colors.white:Colors.black,)),
                                    labelText: "Blood Type",
                                    prefixIcon: Icon(Icons.bloodtype, color:  Get.isDarkMode?Colors.white:Colors.black),
                                    border: OutlineInputBorder(
                                        borderRadius: BorderRadius.circular(100))),
                              ),
                              SizedBox(height: 15,),
                              SizedBox(
                                width: 100,
                                child: MaterialButton(
                                  onPressed: () {
                                    FirebaseAuth.instance.signOut();
                                  },
                                  color: Colors.redAccent,
                                  child: Text('SIGN OUT'),
                                ),
                              ),
                            ],
                          ),
                        ),
            ],
          ),
        ),
      ),
    );
  }
}

关键注意事项 #

• 集合与字段匹配：如果你的Firestore用户数据集合不是users，或者字段名（如fullName、dateOfBirth）和代码不一致，需要同步修改对应代码段。
• Firestore权限：在Firebase控制台设置Firestore规则，确保已登录用户仅能访问自己的文档：

  rules_version = '2';
  service cloud.firestore {
    match /databases/{database}/documents {
      match /users/{userId} {
        allow read, write: if request.auth != null && request.auth.uid == userId;
      }
    }
  }
  

• 状态处理：代码中加入了加载动画和错误提示，避免页面空白或异常崩溃，提升基础用户体验。

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