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

Question

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

我已经得到了文档ID。

终端：

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

我还在 UI 上工作，在此处输入图片描述

设置.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))),
                )
              ],
            ),
          ],
        ),
      ),
    ));
  }
}

getUserData.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 将用户名显示为文本吗？

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

Answer 1

要显示用户名，您可以尝试下面的代码片段，按照本文档中的说明获取用户个人资料信息，并使用Text小部件在 flutter 应用程序上显示用户名。

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

有关更多详细信息，您可以查看本教程和此线程