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