Reputation: 491
I'm new to flutter and this is probably a simple question but i'm looking for a bit of an explanation to help me understand futures and future builder more. I am trying to query firebase (depending on what a user clicks on a previous screen) and i'd like to wait for all the data to be loaded before anything is shown. To do this I thought a future builder would be most appropriate as i'm going to be showing some products that won't change a great deal. I created my getData function:
Future getCardData() async {
return await Firestore.instance.collection('cards')
.where('Event', isEqualTo: widget.documentid).snapshots();
}
}
And implemented it here:
body: FutureBuilder(
future: getCardData(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(child: const Text('Loading...'));
}
return GridView.builder(
shrinkWrap: true,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemCount: snapshot.data.length,
itemBuilder:
(BuildContext context, int index) {
print(snapshot.data.documents[index].data['img_url']);
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: MediaQuery.of(context).size.height / 6,
child: Center(
child: Card(
elevation: 8.0,
child: Image(
image: FirebaseImage(snapshot.data.documents[index].data['img_url']),
),
)
),
),
);
},
);
},
),
But i'm getting (from what I assume to be the itemCount part of my GridView.buider) an error saying:
type 'Future<int>' is not a subtype of type 'int'
I'm wondering how I can access this future value and then adjust the remainder of my code to wait for the data to load before showing any images.
Upvotes: 0
Views: 1157
Reputation: 80914
snapshots()
returns a Stream
, therefore change it to getDocuments()
:
Future<QuerySnapshot> getCardData() async {
return await Firestore.instance.collection('cards')
.where('Event', isEqualTo: widget.documentid).getDocuments();
}
Then in the itemCount
you can do the following:
itemCount: snapshot.data.documents.length,
Upvotes: 1