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是零，我不想在底部表格中只显示排名1的球员，我希望它显示，但如果排名1的球员和所有球员从排名1到40的一些值，然后我必须显示所有的数据底页
2条答案
按热度按时间qlvxas9a1#
从你的问题中，我看不出在Flutter中使用
FutureBuilder有任何问题。这里的问题似乎更多地依赖于如何管理要显示的Firestore数据。如果你想从
Rank中筛选出要显示的Players，你可以在这里为Players创建一个Collections，在那里你可以按Rank对它们排序。假设您只想在列表中显示排名为1的玩家。
对于范围为2-10的
Rank，可以使用复合查询，对于Flutter中的查询，可以检查API reference是否等价。这是我之前发布的一个sample，它过滤并显示了所选carMake中的所有carModel。不过它使用了
StreamBuilder。我很好奇你选择使用FutureBuilder而不是StreamBuilder。8fq7wneg2#
使用
null safety更新2023尝试以下示例：
另请参阅：How to use
StreamBuilderandFutureBuilderfor single and multiple documents