Flutter display collection with subcollection from firestore

0
votes

I am working on a Flutter application that displays a list of categories with items inside. the data is fetched from firebase.

Database structure:

Categories

Category items

I want to show data like this and it has to be real time:

  • Category 1
    • Item 1
    • Item 2
    • Item 3
  • Category 2
    • Item from category 2 ..

I tried to use Streambuilder, but this only fetches the categories. Could someone help me or point me in the right direction to also get the list of items as a snapshot for each category? Thanks in advance

A snapshot only contains the field and not the collection. So do I need another Streambuilder with the documentID of each category? This seems like a lot of work and heavy database reads, just to get the collection of an item already fetched. 

StreamBuilder(
    stream: _db.collection('categories').document(widget.id).collection('categories').orderBy('tag', descending: true).snapshots(),
    builder: (context, snapshot) {
      if(!snapshot.hasData) {
        return Loader();
      } else {
        List<dynamic> docs = snapshot.data.documents;
        docs.forEach((element) {
          print(element['title']);
          print(element.collection('items')); // Does not exist
        });
        return Text('test');
      }
    },
1
firebasefluttergoogle-cloud-firestore

1 Answers

1
votes

Firestore can only load data from one collection (or collection group) at a time. Since you're trying to load data from the categories and items collections, you will need at least two separate read operations.

  StreamBuilder(
    stream: _db.collection('categories').document(widget.id).collection('categories').orderBy('tag', descending: true).snapshots(),
    builder: (context, snapshot) {
      if(!snapshot.hasData) {
        return Loader();
      } else {
        List<dynamic> docs = snapshot.data.documents;
        docs.forEach((element) {
          print(element['title']);
          element.reference.collection('items').get()...
        });
        return Text('test');
      }
    },

You'll need to wrap the get() call in a FutureBuilder, since it's another asynchronous load operation.