How to use GroupedListView using Streambuilder and firebase QuerySnapshot

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'

Thank you for posting this. I'm trying to get the same kind of thing to work. Could you post how you assign _firestoreDb ? — SqueezeOJ, Oct 05 '22 at 23:39

score 0 · Answer 1 · answered Aug 01 '22 at 10:14

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

How to use GroupedListView using Streambuilder and firebase QuerySnapshot

1 Answers1

Linked