How to pass Stream to GroupedListView Flutter - flutter

Question

I am currently working on the messaging section of my app. I am using a streambuilder and streams in conjunction with a GroupedListView so that the messages can be grouped according to date.
However, I am having some problems because the GroupedListView takes a list as its 'elements' parameter. And we know streams aren't necessarily lists. I have looked into converting streams to lists but I can't seem to find a solution.
Here's what the code looks like:
Expanded( //so that we can move the text field to the bottom
child: StreamBuilder(
stream: db.chatStream(widget.receiverUser.uid),
builder: (context, snapshot) {
return GroupedListView<Chat, DateTime>(
reverse: true, //so that the texts start from bottom to top
order: GroupedListOrder.DESC, //get the proper order of sent messages
padding: const EdgeInsets.all(8),
elements: db.chatStream(widget.receiverUser.uid), //THIS IS WHERE THE PROBLEM IS!!!
groupBy: (chat) => DateTime(
chat.dateTime.year,
chat.dateTime.month,
chat.dateTime.day
),
groupHeaderBuilder: (Chat chat) => SizedBox(
height: 40,
child: Center(
child: Card(
color: Colors.black45,
child: Padding(
padding: const EdgeInsets.all(8),
child: Text(
DateFormat.yMMMd().format(chat.dateTime),
style: const TextStyle(color: Colors.white, fontSize: 12),
),
),
),
),
),
itemBuilder: (context, Chat chat) {
bool isMe = chat.senderId == uid;
return Align(
alignment: isMe ? Alignment.centerRight
: Alignment.centerLeft,
child: Column(
children: [
Align(
alignment: isMe ? Alignment.centerRight
: Alignment.centerLeft,
child: Card(
color: isMe
? Colors.purpleAccent
: Colors.white,
elevation: 2,
child: Padding(
padding: const EdgeInsets.all(12),
child: Text(
chat.message,
style: TextStyle(
color: isMe
? Colors.white
: Colors.black
),
),
),
),
),
Align(
alignment: isMe
? Alignment.topRight
: Alignment.topLeft,
child: Padding(
padding: isMe ? const EdgeInsets.only(
right: 12)
: const EdgeInsets.only(left: 12),
child: MidText(text: DateFormat('kk:mm').format(
chat.dateTime)),
)
)
],
),
);
}
);
}
),
),
Is there a way to convert streams to lists so I can pass it to the "elements" parameter? Or do I need to take a different approach?
I also came across this SO post but it's without an answer. But this is essentially my same problem as well:
Example
I would thoroughly appreciate any help!

Answer 1

I'm not sure if what you asked for is something that exists. But what I would do is create a Stream<List<_YourType_>> and with the snapshot given, I would use the data as my list.
PS: If you initialize your StreamBuilder like StreamBuilder<List<_YourType_>>(... then your snapshot will be an AsyncSnapshot<List<_YourType_>> and its data value will already be a List<_YourType_> with no need to cast or anything!
PS2: If I were you, I would look for the time package as it has a .date getter for DateTime or even create your own like:
extension DateTimeExtension on DateTime {
DateTime get date => isUtc ? DateTime.utc(year, month, day) : DateTime(year, month, day);
}
Just so it's easier to get your dates without the time included.

Answer 2

You should probably declare your StreamBuilder as StreamBuilder<List>. You will run into an error saying object cannot access resource otherwise.