如何使用 Firebase Firestore 在 Flutter 中显示用户名和个人资料图片答案

【问题标题】：How to show user name and profile picture in Futter using Firebase Firestore如何使用 Firebase Firestore 在 Flutter 中显示用户名和个人资料图片
【发布时间】：2023-01-20 16:52:36
【问题描述】：

我正在编写用于获取用户名和个人资料图片的代码。

我已经得到了文档ID。

终端：

Restarted application in 425ms.
flutter: DocumentReference<Map<String, dynamic>>(UserData/yKorLkbVK5jIGlWIti95)

我也在 UI 上工作 enter image description here

设置.dart

import 'dart:ffi';
import 'package:Meucci/FireAuth/getUserData.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

class Setting extends StatefulWidget {
  const Setting({Key? key}) : super(key: key);

  @override
  State<Setting> createState() => _SettingState();
}

class _SettingState extends State<Setting> {
  final user = FirebaseAuth.instance.currentUser;

  List<String> documentID = [];

  Future getDocumentID() async {
    await FirebaseFirestore.instance.collection('UserData').get().then(
          (snapshot) => snapshot.docs.forEach((element) {
            print(element.reference);
            //documentID.add(element.reference.id);
          }),
        );
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
      child: Center(
        child: Column(
          children: [
            SizedBox(height: 50),

            Stack(
              alignment: Alignment.bottomRight,
              children: [
                Container(
                  height: 150,
                  width: 150,
                  decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      border: Border.all(color: Colors.purpleAccent, width: 3)),
                ),
                InkWell(
                  onTap: () {},
                  child: CircleAvatar(
                    child: Icon(Icons.edit, color: Colors.white),
                    backgroundColor: Colors.purpleAccent[100],
                  ),
                )
              ],
            ),
            SizedBox(height: 50),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Signed In as: ' + user!.email!),
                Material(
                  child: MaterialButton(
                      onPressed: () {
                        FirebaseAuth.instance.signOut();
                      },
                      color: Colors.purpleAccent[100],
                      child: Text('Sign Out'),
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(20.0))),
                )
              ],
            ),
          ],
        ),
      ),
    ));
  }
}

获取用户数据.dart

import 'package:flutter/material.dart';

class getUserData extends StatelessWidget {
  final String docId;
  getUserData({required this.docId});

  CollectionReference users = FirebaseFirestore.instance.collection('UserData');

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<DocumentSnapshot>(
      future: users.doc(docId).get(),
      builder: ((context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          Map<String, dynamic> data =
              snapshot.data!.data() as Map<String, dynamic>;
          return Text('${data['name']}');
        }
        return Text('Loading..');
      }),
    );
  }
}

有什么方法可以使用 FutureBuilder 将用户名显示为文本吗？

如何使用 Cloud Firestore 中的图像 URL 添加个人资料图像并在圆形容器下方显示用户名？

【问题讨论】：

尝试使用提供功能
你能看看我的回答吗？

标签： flutter firebase google-cloud-firestore

【解决方案1】：

要显示用户名，您可以在 sn-p 下尝试，按照 document 中的说明获取用户个人资料信息，并使用 Text 小部件在 flutter 应用程序上显示用户名。

例子：

Text("Hi ${currentUser.displayName}")

要显示个人资料图片，请获取您存储的照片的 download URL。然后您可以获取下载的 URL，将其存储在一个变量中并像您在代码中使用 Image.network(photoUrl) 那样输出它。

有关更多详细信息，您可以查看此 tutorial 和此 thread

【讨论】：