如何在我的 Flutter 应用中显示来自 Firebase 的用户数据？

我是颤振新手。如何将用户数据从 Firebase 检索到我的个人资料页面？

我的 Firebase 数据包含姓名、电子邮件、血型和出生日期。我想将此数据检索到我的应用程序的个人资料页面。

这是我的个人资料页面代码：

import 'package:firebase_auth/firebase_auth.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!;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        //leading: IconButton(onPressed: (){}, icon: const Icon(Icons.arrow_back_ios_new),),
        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),
              Form(
                child: Column(
                  children: [
                    TextFormField(
                      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(
                      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(
                      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(
                      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'),
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

使用任一StreamBuilder or FutureBuilder, 获取数据firebase，并相应地显示它。

1.流构建器

当您想要不断监听更改，并且希望数据在不热重载/重启的情况下得到更新时

2. 未来建造者

当您只想获取一次文档并且不需要不断监听文档的变化时。

1. 使用 StreamBuilder

    @override
     Widget build(BuildContext context) {
       return Scaffold(
         body: Center(
           child: StreamBuilder<DocumentSnapshot<Map<String, dynamic>>>(
             stream:  FirebaseFirestore
                      .instance
                      .collection('users')
                      .doc(FirebaseAuth.instance.currentUser!.uid) // ???? Your document id which is equal to currentuser
                      .snapshots(),
             builder:
                 (BuildContext context, AsyncSnapshot<DocumentSnapshot> snapshot) {
               if (snapshot.hasError) {
                 return const Text('Something went wrong');
               }
               if (snapshot.connectionState == ConnectionState.waiting) {
                 return const Text("Loading");
               }
               Map<String, dynamic> data =
                   snapshot.data!.data()! as Map<String, dynamic>;
               return Text(data['fullName']); // ???? your valid data here
             },
           ),
         ),
       );
     }
   

2. 使用 FutureBuilder

    @override
     Widget build(BuildContext context) {
       return Scaffold(
         body: Center(
             child: FutureBuilder<DocumentSnapshot<Map<String, dynamic>>>(
           future: FirebaseFirestore.instance
               .collection('users')
               .doc(FirebaseAuth.instance.currentUser!.uid) // ???? Your document id which is equal to currentuser
               .get(),
           builder: (_, snapshot) {
             if (snapshot.hasError) return Text('Error = ${snapshot.error}');
             if (snapshot.connectionState == ConnectionState.waiting) {
               return const Text("Loading");
             }
             Map<String, dynamic> data = snapshot.data!.data()!;
             return Text(data['fullName']); //???? Your valid data here
           },
         )),
       );
     }