How to let Flutter stream in streambuilder get limited document from firebase and accept new document created at the same time? - flutter

Question

I am building an instant messaging app with flutter and firebase. I have a view to display user messages with a StreamBuider. The stream of the StreamBuider is accepting data from firebase. I have limited the number of messages loaded at a time for lazy loading purposes. The current problem is that when the user creates a new messages
For example, the original view has 3 messages (m1,m2,m3). When the user writes a new message (m4), the view will display (m2,m3,m4). m1 has gone. What I want is to keep all 4 messages. Is there a way to limit the number of documents gotten while listening on new documents?
StreamBuilder<QuerySnapshot>(
stream: messageService.getMessagesByChatIdStream(chatId),
builder: (BuildContext context, snapshot) {
if (snapshot.hasData) {
return ListView.builder(
padding: EdgeInsets.all(10),
itemBuilder: (context, index) {
return buildMessageTile(index, snapshot.data?.docs[index]);
},
reverse: true,
itemCount: snapshot.data?.docs.length,
);
}
the getMessagesByChatIdStream() function is like this:
Stream<QuerySnapshot> getMessagesByChatIdStream(String chatId, {int limit = 5}) {
CollectionReference colRef =
firebaseFirestore.collection("messages").doc(chatId).collection(chatId);
return colRef
.limit(limit)
.orderBy('timestamp', descending: true)
.snapshots();
}