如何将检索到的数据从 firebase 放入 Flutter 中的小部件？答案

【问题标题】：How can I put retrieved data from firebase to a widget in Flutter?如何将检索到的数据从 firebase 放入 Flutter 中的小部件？
【发布时间】：2020-12-06 11:23:33
【问题描述】：

  final String uid;
  final firestoreInstance = Firestore.instance;

  void printData() async{
    var firebaseUser = await FirebaseAuth.instance.currentUser();
    firestoreInstance.collection("users").document(firebaseUser.uid).get().then((value){
      print(value.data);
    });
  }

因此，当我按下按钮时，此函数会打印以控制台从 firebase firestore 检索到的数据。但我想将它们放入一个小部件并在我的应用程序中显示它们。例如： Text(printData()) - 但这是不允许的。我该怎么做？

【问题讨论】：

标签： firebase flutter dart firebase-realtime-database google-cloud-firestore

【解决方案1】：

您需要使用FutureBuilder 来显示异步获取的数据，因此创建一个返回Future 的方法：

    Future<DocumentSnapshot> getDocument() async{
    var firebaseUser = await FirebaseAuth.instance.currentUser();
    return Firestore.instance.collection("users").document(firebaseUser.uid).get();
  }

然后在FutureBuilder中将方法赋值给属性future：

body: Container(
  padding: EdgeInsets.all(10.0),
  child: FutureBuilder(
    future: getDocument(),
    builder: (context, AsyncSnapshot<DocumentSnapshot> snapshot) {
      if (snapshot.connectionState == ConnectionState.done) {
            return Text(snapshot.data["name"].toString());
      } else if (snapshot.connectionState == ConnectionState.none) {
        return Text("No data");
      }
      return CircularProgressIndicator();
    },
  ),

假设你有以下数据库：

Collection ("users") ----> Document (userId) ---> fields name : your_name

https://dart.dev/codelabs/async-await

https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html

【讨论】：