如何在Flutter中使用FutureBuilder显示firebase的数据

Question

    Future<List<DocumentSnapshot>> getData() async {
var firestore = Firestore.instance;
QuerySnapshot qn = await firestore
    .collection("LiveGames")
    .where("Title", isEqualTo: "Solo")
    .getDocuments();
return qn.documents;

}

我已使用此 function getData() 提取数据以在 FutureBuilder 中使用它。

  FutureBuilder(
    future: getData(),
    builder: (_, AsyncSnapshot<List<DocumentSnapshot>> snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        return Padding(
          padding: const EdgeInsets.only(
            top: 50,
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Center(
                child: SpinKitCircle(
                  color: Color.fromRGBO(91, 74, 127, 10),
                  size: 50.0,
                ),
              ),
            ],
          ),
        );
      } else {
        return ListView.builder(
            itemCount: snapshot.data.length,

            itemBuilder: (_, index) {
              return SingleChildScrollView(
                child: Column(
                  children: <Widget>[
                    Container(
                      margin: EdgeInsets.all(10),
                      height: 185,
                      width: double.infinity,
                      child: Stack(
                        children: <Widget>[
                          Container(
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.only(
                                  topLeft: Radius.circular(10),
                                  topRight: Radius.circular(10)),
                              color: Colors.blueGrey.shade800,
                            ),
                            height: 150,
                            width: double.infinity,
                            child: Column(
                              mainAxisAlignment:
                                  MainAxisAlignment.spaceEvenly,
                              children: <Widget>[
                                SizedBox(
                                  height: 6,
                                ),
                                Expanded(
                                  child: Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceAround,
                                    children: <Widget>[
                                      Column(
                                        children: <Widget>[
                                          SizedBox(
                                            height: 5,
                                          ),
                                          Text("Date",
                                              style: TextStyle(
                                                color: Colors.white,
                                              )),
                                          Text(
                                              snapshot.data[index]
                                                  .data["GameDate"],
                                              style: TextStyle(
                                                color: Colors.white,
                                              )),
                                        ],
                                      ),
                                      Column(
                                        children: <Widget>[
                                          SizedBox(
                                            height: 5,
                                          ),
                                          Text("Time",
                                              style: TextStyle(
                                                color: Colors.white,
                                              )),
                                          Text(
                                              snapshot.data[index]
                                                  .data["GameTime"],
                                              style: TextStyle(
                                                color: Colors.white,
                                              )),
                                        ],
                                      ),
                                      Column(
                                        children: <Widget>[
                                          SizedBox(
                                            height: 5,
                                          ),
                                          Text("Map",
                                              style: TextStyle(
                                                color: Colors.white,
                                              )),
                                          Text(
                                              snapshot.data[index]
                                                  .data["MapName"],
                                              style: TextStyle(
                                                color: Colors.white,
                                              )),
                                        ],
                                      ),
                                      Column(
                                        children: <Widget>[
                                          SizedBox(
                                            height: 5,
                                          ),
                                          Text("Mode",
                                              style: TextStyle(
                                                color: Colors.white,
                                              )),
                                          Text(
                                              snapshot.data[index]
                                                  .data["GameMode"],
                                              style: TextStyle(
                                                color: Colors.white,
                                              )),
                                        ],
                                      )
                                    ],
                                  ),
                                ),
                                Divider(
                                  color: Colors.white,
                                ),
                                Expanded(
                                  child: Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceAround,
                                    children: <Widget>[
                                      Column(
                                        children: <Widget>[
                                          SizedBox(
                                            height: 5,
                                          ),
                                          Text("Players Joined",
                                              style: TextStyle(
                                                color: Colors.white,
                                              )),
                                          Text(
                                              "${snapshot.data[index].data["RemainingPlayers"]}",
                                              style: TextStyle(
                                                color: Colors.white,
                                              )),
                                        ],
                                      ),
                                      Column(
                                        children: <Widget>[
                                          SizedBox(
                                            height: 5,
                                          ),
                                          Text("Winning",
                                              style: TextStyle(
                                                color: Colors.white,
                                              )),
                                          Expanded(
                                              child: FlatButton(
                                                  child: Icon(
                                                    Icons.arrow_drop_down,
                                                    size: 18,
                                                    color: Colors.white,
                                                  ),
                                                  onPressed: () {
                                                    showModalBottomSheet(
                                                      backgroundColor:
                                                          Colors.orange
                                                              .shade500,
                                                      shape:
                                                          RoundedRectangleBorder(
                                                              borderRadius:
                                                                  BorderRadius
                                                                      .only(
                                                        topLeft:
                                                            Radius.circular(
                                                                15),
                                                        topRight:
                                                            Radius.circular(
                                                                15),
                                                      )),
                                                      context: context,
                                                      builder: (context) {
                                                        return Container(
                                                          child: Column(
                                                            children: <Widget>[

                                                            ],
                                                          ),
                                                        );
                                                      },
                                                    );
                                                  }))
                                        ],
                                      ),
                                      Column(
                                        children: <Widget>[
                                          SizedBox(
                                            height: 5,
                                          ),
                                          Text("Remaining Players",
                                              style: TextStyle(
                                                color: Colors.white,
                                              )),
                                          Text(
                                              "${snapshot.data[index].data["TotalSeats"]}",
                                              style: TextStyle(
                                                color: Colors.white,
                                              )),
                                        ],
                                      )
                                    ],
                                  ),
                                ),
                                Divider(
                                  color: Colors.white,
                                ),
                                Expanded(
                                  child: Container(
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceAround,
                                      children: <Widget>[
                                        Column(
                                          children: <Widget>[
                                            Text("Per Kill",
                                                style: TextStyle(
                                                  color: Colors.white,
                                                )),
                                            Text(
                                                "₹ ${snapshot.data[index].data["PerKill"]}",
                                                style: TextStyle(
                                                  color: Colors.white,
                                                )),
                                          ],
                                        ),
                                        Column(
                                          children: <Widget>[
                                            Text("Entry Fees",
                                                style: TextStyle(
                                                  color: Colors.white,
                                                )),
                                            Text(
                                                "₹ ${snapshot.data[index].data["Entryfees"]}",
                                                style: TextStyle(
                                                  color: Colors.white,
                                                )),
                                          ],
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 150),
                            height: 35,
                            width: double.infinity,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.only(
                                  bottomLeft: Radius.circular(10),
                                  bottomRight: Radius.circular(10)),
                              color: Colors.orange,
                            ),
                            child: Padding(
                              padding: const EdgeInsets.only(left: 125),
                              child: InkWell(
                                onTap: () {
                                  print("Solo Joined");
                                },
                                child: Text(
                                  "Join Contest",
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 25,
                                    fontFamily: "OpenSans",
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              );
            });
      }
    },
  ),

然后我根据数据显示了一些小部件。

但是在数据库中我有一些排名值，如果从 2 到 10 和 11 到 20 以及 21 到 40 的排名是零，我想在底表中显示数据我不想在底表中只显示我想要的 rank1 播放器它可以显示，但是如果 Rank1 玩家和所有从 1 到 40 的玩家都有一些值，那么我必须在 bottomSheet 中显示所有数据

Answer 1

根据您的问题，我没有看到在 Flutter 中使用FutureBuilder有任何问题。 这里的问题似乎更倾向于如何管理要显示的 Firestore 数据。

如果您想从他们的Rank中过滤掉要显示的Players base 。 您可以在此处为Players创建一个Collections ，您可以在其中按Rank对其进行排序。

假设您只想在列表中显示排名为 1 的玩家。

FirebaseFirestore.instance
    .collection('players')
    .where('rank', isEqualTo: 1)
    .snapshots()

对于具有范围的Rank ，例如排名 2-10，可以使用复合查询。 对于 Flutter 中的查询，您可以查看API 参考以了解其等效性。

FirebaseFirestore.instance
    .collection('players')
    .where('rank', isGreaterThanOrEqualTo: 2)
    .where('rank', isLessThanOrEqualTo: 10)
    .snapshots()

这是我之前发布的一个示例，它过滤并显示来自所选 carMake 的所有 carModels 基础。 它虽然使用StreamBuilder 。 我很好奇您选择使用FutureBuilder而不是StreamBuilder 。

Answer 2

使用null safety更新 2023

尝试以下示例：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: FutureBuilder<QuerySnapshot>(
        future: FirebaseFirestore
                .instance
                .collection('users') // 👈 Your collection name here
                .get(), 
        builder: (_, snapshot) {
          if (snapshot.hasError) return Text('Error = ${snapshot.error}');
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Text("Loading");
          }
          return ListView(
              children: snapshot.data!.docs.map((DocumentSnapshot document) {
            Map<String, dynamic> data = document.data()! as Map<String, dynamic>;
            return ListTile(
              title: Text(data['avatar']), // 👈 Your valid data here
            );
          }).toList());
        },
      )),
    );
  }

另请参阅： How to use StreamBuilder and FutureBuilder for single and multiple documents