我保存在我的文档的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结构:
按照此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();
}
因此,这里的解决方案。基本上,我通过文件快照循环,并在列表中保存的结果。然后,我将列表设置图像。
Widget build(BuildContext context) {
var idx = 1;
return Container(
child: FutureBuilder(
future: getCarouselWidget(),
builder: (context, AsyncSnapshot snapshot) {
List<NetworkImage> list = new List<NetworkImage>();
if (snapshot.connectionState == ConnectionState.waiting) {
return new CircularProgressIndicator();
} else {
if (snapshot.hasError) {
return new Text("fetch error");
} else {
//Create for loop and store the urls in the list
for(int i = 0; i < snapshot.data[0].data.length; i++ ) {
debugPrint("Index is " + idx.toString());
list.add(NetworkImage(snapshot.data[0].data["img_"+idx.toString()]));
idx++;
}
return new Container(
height: 250.0,
child: new Carousel(
boxFit: BoxFit.cover,
images: list, <== Set the list here
autoplay: true,
dotSize: 4.0,
indicatorBgPadding: 4.0,
animationCurve: Curves.fastOutSlowIn,
animationDuration: Duration(milliseconds: 1000),
));
}
}
}),
);