Flutter FutureBuilder shows blank screen - dart

Question

I am trying to display a list of cartitems in my app with a future builder. 'Awaiting result...' is displayed for maybe 0.5 sec and then only a white screen is shown. When I replace the Listview with a text, the text is shown like intended. So it has something to do with the snapshot I guess...
Widget buildList() {
return new FutureBuilder<List<CartItem>> (
future: getCartItems(),
builder: (context, snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
return new Text('Press button to start');
case ConnectionState.waiting:
return new Text('Awaiting result...');
default:
print(snapshot.data);
print(snapshot.hasData);
return
(!snapshot.hasData)
?
new Container(
alignment: FractionalOffset.center,
child: new CircularProgressIndicator())
:
new ListView(
children: snapshot.data,
);
}});
}}
This is my getCartItems:
Future<List<CartItem>> getCartItems() async {
final FirebaseUser user = await FirebaseAuth.instance.currentUser();
final uid = user.uid;
List<CartItem> cartItems = [];
QuerySnapshot data = await Firestore.instance
.collection("carts")
.where('owner', isEqualTo: uid)
.where('active', isEqualTo: true)
.getDocuments();
data.documents.forEach((DocumentSnapshot doc) async {
var keys = doc["products"].keys.toList();
var values = doc["products"].values.toList();
for (var i = 0; i < keys.length; i++){
await Firestore.instance.collection('products').document(keys[i]).get().then((DocumentSnapshot ds) {
cartItems.add( new CartItem.fromDocument(ds, values[i]));
print(cartItems);
});
}
});
return cartItems;
}
I know that the Futurebuilder is called twice:
https://github.com/flutter/flutter/issues/18490
But I don't know how to handle this situation...
Any ideas? Do I really need a FutureBuilder in this scenario?
EDIT:
I added some prints in the buildList Widget with following output:
Performing hot reload...
Reloaded 5 of 710 libraries in 808ms.
I/flutter (23685): [] <--- snapshit.data
I/flutter (23685): true <--- snapshot.hasData
EDIT 2:
Changes, but still not working:
Future<List<CartItem>> getCartItems() async {
final FirebaseUser user = await FirebaseAuth.instance.currentUser();
final uid = user.uid;
List<CartItem> cartItems = [];
QuerySnapshot data = await Firestore.instance
.collection("carts")
.where('owner', isEqualTo: uid)
.where('active', isEqualTo: true)
.getDocuments();
cartItems = await _fetchDocumentData(data);
return cartItems;
}
Future<List<CartItem>> _fetchDocumentData(data) async {
List<CartItem> cartItems = [];
data.documents.forEach((DocumentSnapshot doc) {
var keys = doc["products"].keys.toList();
var values = doc["products"].values.toList();
for (var i = 0; i < keys.length; i++){
Firestore.instance.collection('products').document(keys[i]).get().then((DocumentSnapshot ds) {
cartItems.add( new CartItem.fromDocument(ds, values[i]));
print(cartItems);
});
}
});
return cartItems;
}
EDIT 3:
The output in the console looks like the Futurebuilder is executed before the fetch is completed:
I/flutter ( 4535): [] <--- print(snapshot.data) in FutureBuilder
I/flutter ( 4535): true <--- print(snapshot.hasData) in FutureBuilder
I/flutter ( 4535): [CartItem] <--- print(cartItems) in _fetchDocumentData

Answer 1

The problem may be here :
new ListView(
children: snapshot.data,
);
The parameter children takes List<Widget> as parameter. You are providing data directly to it as parameter and so it is not showing any results on UI to you.
You can use ListView.builder to display your data like this:
ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, position) {
var cartItem = snapshot.data[position];
return Row(
children: <Widget>[
Expanded(child: Text(cartItem.id)), // just for example
Expanded(child: Text(cartItem.name)), // just for example
Expanded(child: Text(cartItem.color)), // just for example
],
);
},
)
Edit:
put code to fetch data in a method like _fetchDocumentData and declare that method async and have return type of Future<List<CartItem>> like this:
Future<List<CartItem>> _fetchDocumentData async {
List<CartItem> cartItems = [];
data.documents.forEach((DocumentSnapshot doc) {
var keys = doc["products"].keys.toList();
var values = doc["products"].values.toList();
for (var i = 0; i < keys.length; i++){
await Firestore.instance.collection('products').document(keys[i]).get().then((DocumentSnapshot ds) {
cartItems.add( new CartItem.fromDocument(ds, values[i]));
print(cartItems);
});
}
});
return cartItems;
}
and before returning cartItems fetch cartItems from _fetchDocumentData like this
cartItems = await _fetchDocumentData();
Explaination:
Your loop is async and so the values are returned prior to completion of loop's execution.
Edit: As you asked here is the code changes that you might want to make.
Change this:
Future<List<CartItem>> getCartItems() async {
final FirebaseUser user = await FirebaseAuth.instance.currentUser();
final uid = user.uid;
List<CartItem> cartItems = [];
QuerySnapshot data = await Firestore.instance
.collection("carts")
.where('owner', isEqualTo: uid)
.where('active', isEqualTo: true)
.getDocuments();
data.documents.forEach((DocumentSnapshot doc) async {
var keys = doc["products"].keys.toList();
var values = doc["products"].values.toList();
for (var i = 0; i < keys.length; i++){
await Firestore.instance.collection('products').document(keys[i]).get().then((DocumentSnapshot ds) {
cartItems.add( new CartItem.fromDocument(ds, values[i]));
print(cartItems);
});
}
});
return cartItems;
}
To this:
Future<List<CartItem>> getCartItems() async {
final FirebaseUser user = await FirebaseAuth.instance.currentUser();
final uid = user.uid;
List<CartItem> cartItems = [];
QuerySnapshot data = await Firestore.instance
.collection("carts")
.where('owner', isEqualTo: uid)
.where('active', isEqualTo: true)
.getDocuments();
cartItems = await _fetchDocumentData();
return cartItems;
}
Future<List<CartItem>> _fetchDocumentData async {
List<CartItem> cartItems = [];
data.documents.forEach((DocumentSnapshot doc) {
var keys = doc["products"].keys.toList();
var values = doc["products"].values.toList();
for (var i = 0; i < keys.length; i++){
await Firestore.instance.collection('products').document(keys[i]).get().then((DocumentSnapshot ds) {
cartItems.add( new CartItem.fromDocument(ds, values[i]));
print(cartItems);
});
}
});
return cartItems;
}