How to replace ListView with GroupedListView while using StreamBuilder with FireBase data in Flutter? - flutter

Question

This is my ListView. It works perfectly:
StreamBuilder(
stream: FirebaseFirestore.instance.collection('products').snapshots(),
builder: (context, AsyncSnapshot<QuerySnapshot> streamSnapshot) {
if (streamSnapshot.hasData) {
return ListView.builder(
itemCount: streamSnapshot.data!.docs.length,
itemBuilder: (context, index) {
final DocumentSnapshot documentSnapshot = streamSnapshot.data!
.docs[index];
return Card(
margin: const EdgeInsets.all(5),
child: ListTile(
title: Text(documentSnapshot['name'] + " (" +
documentSnapshot['quantity'].toStringAsFixed(0) + ")"),
),
);
},
);
}
return const Center(
child: CircularProgressIndicator(),
);
}
),
I use a StreamBuilder to obtain data from FireBase. I turn that stream into snapshots, which are used inside the builder part of the ListView.
How do I replace my ListView with a GroupedListView?

Answer 1

This is the equivalent GroupedListView:
StreamBuilder(
stream: FirebaseFirestore.instance.collection('products').snapshots(),
builder: (context, AsyncSnapshot<QuerySnapshot> streamSnapshot) {
if (!streamSnapshot.hasData) return const Text("Loading...");
return GroupedListView<dynamic, String>(
elements: streamSnapshot.data!.docs,
groupBy: (element) => element['category'],
groupSeparatorBuilder: (String value) => Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
value,
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
),
useStickyGroupSeparators: true,
floatingHeader: true,
order: GroupedListOrder.ASC,
itemComparator: (item1, item2) => item1['name'].compareTo(item2['name']),
itemBuilder: (context, dynamic element) {
return Card(
margin: const EdgeInsets.all(5),
child: ListTile(
title: Text(element['name']),
),
);
},
);
}
),