Flutter Firebase animated list stream

Viewed 424

How can I automatically animate new widgets into my animated list when my stream updates? I have looked into using the animated_stream_list package, but the stream requires a Stream<'List<'Dynamic'>'> and not a Stream<'QuerySnapshot'>. Is there any way of turning my Stream<'QuerySnapshot'> into a Stream<'List<'QuerySnapshot'>'> ?

final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();

// ...

StreamBuilder(
    stream: db
        .getCommunityFromDocId(widget.chatId)
        .collection('messages')
        .orderBy('sendTime', descending: true)
        .limit(20)
        .snapshots(),
   builder: (context, snapshot) {
     if (snapshot.hasData) {
        return AnimatedList(
          key: _listKey,
          padding: EdgeInsets.fromLTRB(8, 0, 8, 70),
          reverse: true,
          initialItemCount: snapshot.data.documents.length,
          itemBuilder: (context, index, animation) {
             return ChatMessage(
               animation: animation,
              );
          },
        );
      } else {
        return Center(
            child: SpinKitCircle(
          color: Colors.deepPurple[100],
          size: 100,
        ));
      }
   }),


// ... this will now add a document to the collection that is being streamed and update the AnimatedList

await db.sendMessage(
   chatId: widget.chatId,
   username: username,
   message: message);

_listKey.currentState.insertItem(0, duration: Duration(milliseconds: 500)); // <-- this occurs after the
// document has all really been added and the stream has already updated. So the ListItem
// appears and then animates in again

0 Answers
Related