使用FutureBuilder创建轮播
使用FutureBuilder创建轮播
提问于 2019-02-08 20:23:55
我正在将我的图像存储在Firestore文档中，并希望使用FutureBuilder加载它们。以下是我到目前为止所做的工作：
Future getCarouselWidget() async {
var firestore = Firestore.instance;
QuerySnapshot qn = await firestore.collection("carousel").getDocuments();
return qn.documents;
}
Widget build(BuildContext context) {
return Container(
child: FutureBuilder(
future: getCarouselWidget(),
builder: (context, AsyncSnapshot snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return new CircularProgressIndicator();
} else {
if (snapshot.hasError) {
return new Text("fetch error");
} else {
return new Container(
height: 250.0,
child: new Carousel(
boxFit: BoxFit.cover,
images: [NetworkImage(snapshot.data[0].data["img_2"])],
autoplay: false,
dotSize: 4.0,
indicatorBgPadding: 4.0,
animationCurve: Curves.fastOutSlowIn,
animationDuration: Duration(milliseconds: 1000),
));
}
}
}),
);
}'使用上面的代码，我可以显示一个没有任何错误的图像。但是，我不知道如何遍历快照数据来显示图像列表。
下面是我的firestore结构：
Stack Overflow用户
发布于 2019-02-08 23:20:35
遵循youtube上的指南https://www.youtube.com/watch?v=R2I0osLdjgQ https://docs.flutter.io/flutter/widgets/FutureBuilder-class.html
//I assume this function futures a list of images
Future getCarouselWidget() async {
var firestore = Firestore.instance;
QuerySnapshot qn = await firestore.collection("carousel").getDocuments();
return qn.documents;
}
Widget build(BuildContext context) {
return Container(
child: FutureBuilder(
future: getCarouselWidget(),
builder: (context, AsyncSnapshot snapshot) {
switch( snapshot.connectionState ){
case ConnectionState.none:
return new Text("Data is not fetched");
case ConnectionState.waiting:
return new CircularProgressIndicator();
case ConnectionState.done:
if(snapshot.hasError){
return new Text("fetch error")
} else {
return new Container(
height: 250.0,
child: new Carousel(
boxFit: BoxFit.cover,
images: snapshot.data,
autoplay: false,
dotSize: 4.0,
indicatorBgPadding: 4.0,
animationCurve: Curves.fastOutSlowIn,
animationDuration: Duration(milliseconds: 1000),
));
}
default:
return Text("connection is just active");
}
}编辑:我没有任何关于firestore文档的数据类型的文档。我不知道下面的代码是否正确。
Future getCarouselWidget() async {
var firestore = Firestore.instance;
QuerySnapshot qn = await firestore.collection("carousel").getDocuments();
// convert DocumentSnapshots to Images.
// I am assuming Document Snapshots are <String, Images>
var ret = new List();
qn.documents.forEach(
(v) =>
for( var e in v.data.values ) {
ret.add(new NetworkImage(e));
}
);
return ret.map((nI) => new Image(image: nI)).toList();
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54592419
复制相关文章
相似问题
腾讯云开发者
