Firebase Flatter Cloud Firestore-当doc等于当前用户id时，如何显示当前用户显示名称？

我有一些代码，可以在创建帐户时将用户的显示名和uid保存到云中。管理此操作的代码如下所示：

数据库.dart

Future<void> userSetup(String displayName) async {
  final CollectionReference users =
      FirebaseFirestore.instance.collection('UserNames');
  FirebaseAuth auth = FirebaseAuth.instance;
  String uid = auth.currentUser.uid.toString();
  users.doc(uid).set({'displayName': displayName, 'uid': uid});
  return;
}

未来用户设置（字符串显示名称）异步{
最终收集参考用户=
FirebaseFirestore.instance.collection（'UserNames'）；
FirebaseAuth auth=FirebaseAuth.instance；
字符串uid=auth.currentUser.uid.toString（）；
users.doc（uid）.set（{'displayName'：displayName，'uid'：uid}）；
返回；
}

但是，我对如何检索这些数据以及如何在我的个人资料页面上将显示名称显示为文本感到困惑。以下是配置文件页面的一部分：

class _HomeScreenState extends State<HomeScreen> {
  

  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text('KIWI'),
      ),
      drawer: MainDrawer(),
      
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          SizedBox(
            height: 20.0,
          ),
          Align(
            alignment: Alignment.center,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                SizedBox(
                  height: 20,
                ),
                CircleAvatar(
                  backgroundColor: Colors.grey[50],
                  radius: 60.0,
                  child: Icon(
                    Icons.photo_camera,
                    color: Palette.lightGreen,
                    size: 50,
                  ),
                ),
                SizedBox(
                  height: 20,

//I want to display the username here

                ),
                SizedBox(
                  height: 60,
                ),
                SizedBox(
                  height: 400,
                  child: PageView.builder(
                    itemCount: 2,
                    controller: PageController(viewportFraction: 0.7),
                    onPageChanged: (int index) =>
                        setState(() => _index = index),
                    itemBuilder: (_, i) {
                      return Transform.scale(
                        scale: i == _index ? 1 : 0.9,
                        child: Card(
                          elevation: 2,
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(20)),
                          child: Center(
                            child: i == 0 ? HomeInfo() : Achieve(),
                            // this line
                          ),
                        ),
                      );
                    },
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class\u homescrenstate扩展状态{
小部件构建（构建上下文）{
返回脚手架(
背景颜色：Colors.white，
appBar:appBar(
标题：常量文本（“猕猴桃”），
),
抽屉：main抽屉（），
正文：专栏(
mainAxisAlignment:mainAxisAlignment.start，
儿童：[
大小盒子(
身高：20.0，
),
对齐(
对齐：对齐.center，
子：列(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
大小盒子(
身高：20，
),
圆形(
背景颜色：颜色。灰色[50]，
半径：60.0，
子：图标(
图标。照相/摄像机，
颜色：调色板。浅绿色，
尺码：50，
),
),
大小盒子(
身高：20，
//我想在这里显示用户名
),
大小盒子(
身高：60，
),
大小盒子(
身高：400，
子项：PageView.builder(
物品计数：2，
控制器：页面控制器（视口分数：0.7），
onPageChanged：（int索引）=>
设置状态（（）=>_index=index），
itemBuilder:（u，i）{
返回变换比例(
标度：i==\u指数？1:0.9，
孩子：卡片(
标高：2，
形状：圆形矩形边框(
边界半径：边界半径。圆形（20）），
儿童：中心(
子：i==0？HomeInfo（）：实现（），
//这条线
),
),
);
},
),
),
],
),
),
],
),
);
}
}

---

如何实现这一点？

您可以使用

FutureBuilder（）

实现这一点，但建议使用状态管理解决方案来管理UI上更复杂的数据

final firestore = FirebaseFirestore.instance;   //
FirebaseAuth auth = FirebaseAuth.instance;     //recommend declaring a reference outside the methods 

Future<String> getUserName() async {
  
  final CollectionReference users = firestore.collection('UserNames');
  
  final String uid = auth.currentUser.uid;

  final result = await users.doc(uid).get();

  return result.doc.data()['displayName'];

}

UI:
  ...
       SizedBox(
         height: 20,
       ),
         FutureBuilder(
             future: getUserName(),
             builder: (_ , AsyncSnapshot snapshot){
             
              if(snapshot.connectionState == ConnectionState.waiting){
                  return Center( child: CircularProgressIndicator());
             }
                 return Text(snapshot.data);
             },
         ),
        SizedBox(
          height: 60,
        ),
...

final firestore=FirebaseFirestore.instance//
FirebaseAuth auth=FirebaseAuth.instance//建议在方法之外声明引用
Future getUserName（）异步{
final CollectionReference users=firestore.collection（“用户名”）；
最终字符串uid=auth.currentUser.uid；
最终结果=wait users.doc（uid.get（）；
返回result.doc.data（）['displayName']；
}
用户界面：
...
大小盒子(
身高：20，
),
未来建设者(
future:getUserName（），
生成器：（\ux，异步快照）{
if（snapshot.connectionState==connectionState.waiting）{
返回中心（子项：CircularProgressIndicator（））；
}
返回文本（snapshot.data）；
},
),
大小盒子(
身高：60，
),
...

---

如果CalpRealPrsisSt指标看起来很奇怪，因为它在窗口小部件的中间，尝试用它来包装整个列。

< P>可以使用<代码> FutueBug（）/代码>来实现这一点，但建议在UI上管理更复杂的数据的状态管理解决方案。< /P>

final firestore = FirebaseFirestore.instance;   //
FirebaseAuth auth = FirebaseAuth.instance;     //recommend declaring a reference outside the methods 

Future<String> getUserName() async {
  
  final CollectionReference users = firestore.collection('UserNames');
  
  final String uid = auth.currentUser.uid;

  final result = await users.doc(uid).get();

  return result.doc.data()['displayName'];

}

UI:
  ...
       SizedBox(
         height: 20,
       ),
         FutureBuilder(
             future: getUserName(),
             builder: (_ , AsyncSnapshot snapshot){
             
              if(snapshot.connectionState == ConnectionState.waiting){
                  return Center( child: CircularProgressIndicator());
             }
                 return Text(snapshot.data);
             },
         ),
        SizedBox(
          height: 60,
        ),
...

final firestore=FirebaseFirestore.instance//
FirebaseAuth auth=FirebaseAuth.instance//建议在方法之外声明引用
Future getUserName（）异步{
final CollectionReference users=firestore.collection（“用户名”）；
最终字符串uid=auth.currentUser.uid；
最终结果=wait users.doc（uid.get（）；
返回result.doc.data（）['displayName']；
}
用户界面：
...
大小盒子(
身高：20，
),
未来建设者(
future:getUserName（），
生成器：（\ux，异步快照）{
if（snapshot.connectionState==connectionState.waiting）{
返回中心（子项：CircularProgressIndicator（））；
}
返回文本（snapshot.data）；
},
),
大小盒子(
身高：60，
),
...

如果CalpRealPrrsSt指标看起来很奇怪，因为它在窗口小部件的中间，尝试用它来包装整个列。