如何使用 Streambuilder 和 firebase QuerySnapshot 使用 GroupedListView

Question

I am trying to use the GroupedListview() showing some data from Firebase cloud. When i am using the normal Listview.builder() everything is working fine. But i dont get the GroupedListview working. My Snapshot.docs has a Timestamp called ['date'] and i want to use it to seperate sort and seperate the List.

here you see my normal ListView:

StreamBuilder<QuerySnapshot>(
            stream: _firestoreDb,
            builder: (context, snapshot) {
              if (!snapshot.hasData) return CircularProgressIndicator();
              return ListView.builder(
                  physics: BouncingScrollPhysics(),
                  reverse: true,
                  itemCount: snapshot.data.docs.length,
                  itemBuilder: (context, int index) {
                    return JumpTile(
                      snapshot: snapshot.data,
                      index: index,
                    );
                  });
            }),

This is my try to use the GroupedListview:

StreamBuilder<QuerySnapshot>(
            stream: _firestoreDb,
            builder: (context, snapshot) {
              if (!snapshot.hasData) return CircularProgressIndicator();
              return GroupedListView(
                  elements: snapshot.data.docs,
                  groupBy: (element) => element['date'],
                  groupHeaderBuilder: (element) =>
                      Text(element['date'].toString()),
                  indexedItemBuilder: (context, snapshot, int index) {
                    return JumpTile(
                      snapshot: snapshot.data,
                      index: index,
                    );
                  });
            }),

This is the Error i get shown: type '() => Map<String, dynamic>' is not a subtype of type 'QuerySnapshot'

Answer 1

you can use FutureBuilder and ins

FutureBuilder(
  future: _firestoreDb,
  builder: (context, snapshot) {
      if (!snapshot.hasData) {
          return CircularProgressIndicator();
          } else {
          return Container(
                child: GroupedListView<dynamic, String>(
                            elements: snapshot.data.docs,
                            groupBy: (element) => element.date, //and edit these lines
                            groupSeparatorBuilder: (String value) =>
                            Text(value),itemBuilder: (c, element) {
                                   return ListTile(
                                             title: Text(element.data),
                                                        );
                                                      }),
                                                );
                                              }
                                            }),