Коллекция дисплеев Flutter с подколлекцией из firestore

Question

Я работаю над приложением Flutter, которое отображает список категорий с элементами внутри. данные извлекаются из firebase.

Структура базы данных:

Я хочу отображать такие данные в реальном времени:

• Категория 1
  • Элемент 1
  • Элемент 2
  • Пункт 3
• Категория 2
  • Элемент из категории 2 ..

Я пробовал использовать Streambuilder, но это только выбирает категории. Может ли кто-нибудь помочь мне или указать в правильном направлении, чтобы также получить список элементов в виде снимка для каждой категории? Заранее благодарим

Снимок содержит только поле, но не коллекцию. Так нужен ли мне еще один Streambuilder с идентификатором документа каждой категории? Это похоже на большой объем работы и тяжелое чтение базы данных, просто чтобы получить коллекцию уже полученного элемента.

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');
      }
    },

Answer 1

Firestore может загружать данные только из одной коллекции (или группы коллекций) за раз. Поскольку вы пытаетесь загрузить данные из коллекций categories и items, вам понадобятся как минимум две отдельные операции чтения.

  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');
      }
    },

Вам нужно будет обернуть вызов get() в a FutureBuilder, поскольку это еще одна операция асинхронной загрузки.