Flutter future builder displaying nothing after finishing - firestore

Question

I'm trying to display a future builder based on firestore database, but now all I'm getting is a blank screen after finishing the circular progress indicator.

Any help would be greatly appreciated.

Firestore function :

Future<List<Item>> getFavourites() async{
List<Item> _itemList= [];
  var firebaseUser=await FirebaseAuth.instance.currentUser();
  Firestore.instance.collection("users").document(firebaseUser.uid).get().then((querySnapshot){
    List value = querySnapshot.data["favourites"];
    if(value.length>0){
      value.forEach((element) {
        Firestore.instance.collection("items").document(element).get().then((value){
          Item item= Item.fromMap(value.data);
          _itemList.add(item);
        });
      });

    }

  });

  return _itemList;
  }

FutureBuilder :

FutureBuilder(
        future: getFavourites(),
        builder:(BuildContext context,AsyncSnapshot<List<Item>> snapshot){
          if(snapshot.connectionState!=ConnectionState.waiting){

            //print(snapshot.data[0].name);

            return
              ListView(
                children: <Widget>[
                  SizedBox(height: 10.0),
                  Text(
                    "Favorites",
                    style: TextStyle(
                      fontSize: 23,
                    ),
                  ),
                  SizedBox(height: 10.0),

                  GridView.builder(
                    shrinkWrap: true,
                    primary: false,
                    physics: NeverScrollableScrollPhysics(),
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                      childAspectRatio: MediaQuery.of(context).size.width /
                          (MediaQuery.of(context).size.height / 1.25),
                    ),
                    itemCount: snapshot.data == null ? 0 :snapshot.data.length,
                    itemBuilder: (BuildContext context, int index) {
                      return GridItem(
                        img: snapshot.data[index].img,
                        name: snapshot.data[index].name,
                        category: snapshot.data[index].category,
                        id: snapshot.data[index].id,
                      );
                    },
                  ),

                  SizedBox(height: 30),
                ],
              );
          }
          else{
            return Center(
              child: CircularProgressIndicator(),
            );
             }
          }
    ),

'Item' is a class containing all the variables as in the firestore collection.

return _itemList at the end of last then or use await instead of 'then()' — Sanjay Sharma
Firestore.instance.collection("users").document(firebaseUser.uid).get() this returns a future. So your return statement, return _itemList; , is called before all the computation that happens in your then(). Essentially your snapshot data is empty List. Please use await like @SanjaySharma has stated. — Prasanna Kumar
How can I modify it to await? Sorry, I'm new to firestore. @PrasannaKumar — Sooraj
var querySnapshot = await Firestore.instance.collection("users").document(firebaseUser.uid).get(); Similarly for the items query too — Prasanna Kumar

Peter Haddad Peter Haddad · Accepted Answer · 2020-06-13T19:09:37

Use the following method:

Future<List<Item>> getFavourites() async{
List<Item> _itemList= [];
  var firebaseUser= await FirebaseAuth.instance.currentUser();
  DocumentSnapshot snapshot = await Firestore.instance.collection("users").document(firebaseUser.uid).get();
    List value = snapshot.data["favourites"];
    if(value.length>0){
      value.forEach((element) async{
        DocumentSnapshot docSnapshot  = await Firestore.instance.collection("items").document(element).get();
          Item item= Item.fromMap(docSnapshot.data);
          _itemList.add(item);
      });
    }
  return _itemList;
  }

In the FutureBuilder use :

if(snapshot.connectionState==ConnectionState.done){

Flutter future builder displaying nothing after finishing - firestore

2 Answers