如何将 Stream 传递给 GroupedListView 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.