Флаттер: как создать список с заголовком из объекта Firebase

Question

У меня есть коллекция с вложенными коллекциями и документами в firebase, и я хотел бы представить эти данные в ListView с заголовком для каждой вложенной коллекции. См. Рисунок в качестве примера

В этом примере у меня есть 3 подколлекции (группа A, B и C) с некоторыми документами внутри, пусть скажем документ, который содержит URL для изображения и описание.

Как мне создать список mi во Flutter?

Пока мне удалось загрузить все 5 документов в список объектов Firebase, и я могу построить список следующим образом

List<DocumentSnapshot> itemDB = [];

class _ItemListNewState extends State<ItemListNew> {
  @override
  Widget build(BuildContext context) {
    return ListView(
      primary: false,
      shrinkWrap: true,
      physics: ClampingScrollPhysics(),
      children: itemDB.map((DocumentSnapshot document) {
        return //a row with an Image and a Text

Это нормально, но у меня нет заголовков. Каков наилучший способ включить также заголовки?

Заранее спасибо разработчикам !!

Answer 1

Вы можете скопировать пасту и запустить полный код ниже
Вы можете использовать пакет https://pub.dev/packages/grouped_list
фрагмент кода

GroupedListView<dynamic, String>(
          groupBy: (element) => element['group'],
          elements: _elements,
          sort: true,
          groupSeparatorBuilder: (String value) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: Center(
                child: Text(
              value,
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            )),
          ),
          itemBuilder: (c, element) {
            return Card(
              elevation: 8.0,
              margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
              child: Container(
                child: ListTile(
                  contentPadding:
                      EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
                  leading: Icon(Icons.account_circle),
                  title: Text(element['name']),
                  trailing: Icon(Icons.arrow_forward),
                ),
              ),
            );
          },
        )

рабочая демонстрация

полный код

import 'package:flutter/material.dart';
import 'package:grouped_list/grouped_list.dart';

void main() => runApp(MyApp());

List _elements = [
  {'name': 'John', 'group': 'Team A'},
  {'name': 'Will', 'group': 'Team B'},
  {'name': 'Beth', 'group': 'Team A'},
  {'name': 'Miranda', 'group': 'Team B'},
  {'name': 'Mike', 'group': 'Team C'},
  {'name': 'Danny', 'group': 'Team C'},
];

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Grouped List View Example'),
        ),
        body: GroupedListView<dynamic, String>(
          groupBy: (element) => element['group'],
          elements: _elements,
          sort: true,
          groupSeparatorBuilder: (String value) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: Center(
                child: Text(
              value,
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            )),
          ),
          itemBuilder: (c, element) {
            return Card(
              elevation: 8.0,
              margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
              child: Container(
                child: ListTile(
                  contentPadding:
                      EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
                  leading: Icon(Icons.account_circle),
                  title: Text(element['name']),
                  trailing: Icon(Icons.arrow_forward),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}