Question

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

}

我已经使用此函数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 数据。

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

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

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

对于具有范围的 Rank，例如等级 2-10，可以使用 compound queries。对于 Flutter 中的查询，您可以检查 API reference 的等价性。

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

这是我之前发布的 sample，用于过滤和显示所选汽车制造商的所有汽车型号基础。不过它使用 StreamBuilder。我很好奇您选择使用 FutureBuilder 而不是 StreamBuilder。

如何在Flutter中使用FutureBuilder从Firebase显示数据

1 个答案: