Flutter - How can I build chat app that implement read or not read message feature?

Viewed 3499

I try to make a chat application that has read or not read messages feature. But I truly have no idea how to implement it.

enter image description here

I currently use firestore as the database to store the message.

I use streambuilder to stream the message and rebuild UI every time message is added to the chat room.

Can I have a suggestion on what widget I should be looking for or any ideas on how I can implement it?

1 Answers

What you can do here is create a Firestore collection for the conversation of users. To send a message, store the messages as a document of the conversation collection along with the timestamp and an isRead boolean flag. Also add a sender value since this is where we'll know if the message came from the user or not.

Collection 
-- conversation_userA_userB
   -- Document
      -- message: "Hello"
         sender: userA
         timestamp: {UNIX_TIME}
         isRead: true
      -- message: "Hi"
         sender: userB
         timestamp: {UNIX_TIME}
         isRead: false

Once the user has seen the message, update the isRead flag of the message if it came from the other user. The app can listen to the collection using a Stream so the UI can be updated in real-time.

Related