如何在应用程序中显示数据列表？

Question

我遇到了一个错误，数据在终端中打印出来但没有显示在应用程序中。

  Future<DocumentSnapshot> getTeacher() async {
    var firebaseUser = await FirebaseAuth.instance.currentUser;
    var docRef = FirebaseFirestore.instance.collection("User");
    var query = docRef.where("type", isEqualTo: "teacher").limit(10);
    query.get().then((QuerySnapshot querySnapshot) {
      querySnapshot.docs.forEach((doc) {
        print(doc["name"]);
        print(doc["email"]);
      });
    });
  }

    body: new FutureBuilder(
          future: getTeacher(),
          builder:
              (BuildContext context, AsyncSnapshot<DocumentSnapshot> snapshot) {
            if (snapshot.connectionState == ConnectionState.done) {
              return ListView.builder(
                  shrinkWrap: true,
                  itemCount: 1,
                  itemBuilder: (BuildContext context, int index) {
                    return Row(
                      children: <Widget>[
                        Expanded(child: Text(snapshot.data["name"])),
                        Expanded(child: Text(snapshot.data["email"])),
                        Expanded(
                            child: IconButton(
                                icon: Icon(Icons.chat), onPressed: () {}))
                      ],
                    );
                  });
            }
            return Container();
          }),

this is the output in the terminal

Answer 1

您的getTeacher()-Function 不会返回您的 Future。因为这 抛出 Nullpointer-Exception。您应该返回 query.get() 而不是听它。 您也不应该在 build-Function 中调用 getTeacher()，因为它将在每次构建时调用。

编辑：

你的方法：

Future<DocumentSnapshot> getTeacher() async {
   var firebaseUser = await FirebaseAuth.instance.currentUser;
   var docRef = FirebaseFirestore.instance.collection("User");
   var query = docRef.where("type", isEqualTo: "teacher").limit(1);
   return (await query.get()).docs[0];
}

小部件的变量：

final Future<DocumentSnapshot> teacher = getTeacher();

你的 FutureBuilder：

new FutureBuilder(
      future: teacher,
      builder: ...
)

Answer 2

你没有从未来的函数中返回任何东西。请检查以下代码

  Future<List<DocumentSnapshot>> getTeacher() async {
    var firebaseUser = await FirebaseAuth.instance.currentUser;
    var docRef = FirebaseFirestore.instance.collection("users");
    QuerySnapshot query =
        await docRef.where("user_device_language", isEqualTo: "en").limit(10).get();

    return query.docs;
  }

并像这样在列表视图中处理空值

   body: new FutureBuilder(
            future: getTeacher(),
            builder: (BuildContext context, AsyncSnapshot<List<DocumentSnapshot>> snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                if (snapshot.data != null) {
                  return ListView.builder(
                      shrinkWrap: true,
                      itemCount: snapshot.data.length,
                      itemBuilder: (BuildContext context, int index) {
                        return Row(
                          children: <Widget>[
                            Expanded(child: Text(snapshot.data[index]["name"])),
                            Expanded(child: Text(snapshot.data[index]["email"])),
                            Expanded(child: IconButton(icon: Icon(Icons.chat), onPressed: () {}))
                          ],
                        );
                      });
                } else {
                  return Text('No Data');
                }
              }
              return Container();
            },
          ),