Question

我有一些代码，可以在创建帐户时将用户的显示名称和uid保存到云中。用于管理此问题的代码在这里：

database.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;
}

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

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

我该怎么做？

Answer 1

您可以使用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,
        ),
...

如果CircularProgressIndicator看起来很奇怪，因为它位于窗口小部件的中间，请尝试用它包装整个列。

Flutter Cloud Firestore-当doc等于当前用户ID时如何显示当前用户的显示名称？

1 个答案: