Flutter - Implementing unread messages in a chat app?

Question

I am building a simple chat app using Flutter and Firestore. I have the app working but I am having difficulty implementing the unread message counter to feed the Navbar. I am using Badges to place a number alongside the Messages icon, but I am not sure of the best way to determine the unread message count from the Chats collection in Firestore.

I know how to determine the unread count from my chat collection, but I am not sure of the most effective way to get the data. I tried to create a Stream but run into challenges implementing that approach. Here is the code that I used to create the Stream. I am getting the data, but I am having a challenge parsing it so I can determine the unread count. Here is my Stream code:

FirebaseFirestore.instance.collection('chats')
    .where('users', arrayContains: currentUserReference)
    .snapshots()
    .listen((QuerySnapshot querySnapshot){
      querySnapshot.docs.forEach((document) {
        print(document.data());
      });
  }
);

flutter: {user_a: DocumentReference<Map<String, dynamic>>(users/1a305sQhd2MmQsIVsposE0AHto52), last_message_time: Timestamp(seconds=1644323419, nanoseconds=16000000), user_b: DocumentReference<Map<String, dynamic>>(users/277amBvOk4cfydxdEkZvs4Od31C2), last_message_sent_by: DocumentReference<Map<String, dynamic>>(users/1a305sQhd2MmQsIVsposE0AHto52), last_message_seen_by: [DocumentReference<Map<String, dynamic>>(users/277amBvOk4cfydxdEkZvs4Od31C2)], users: [DocumentReference<Map<String, dynamic>>(users/1a305sQhd2MmQsIVsposE0AHto52), DocumentReference<Map<String, dynamic>>(users/277amBvOk4cfydxdEkZvs4Od31C2)], last_message: are you there?}

I am not sure if my Stream approach is correct, and I don't know how to parse the above result so I can determine the unread count. I will determine the unread count by checking the number of instances of where the currentUser id is contained in the 'last_message_seen_by' field.

I would appreciate any guidance on how to approach this task.

This might be helpful: https://stackoverflow.com/questions/61051412/how-to-know-if-a-message-is-seen-or-not/61051851#61051851, and this https://stackoverflow.com/questions/52126744/how-to-structure-nosql-messages-to-get-unreads-by-1-query/52129025#52129025 and probably more from this: https://stackoverflow.com/search?q=%5Bfirebase%5D+unread+messages — Frank van Puffelen, Feb 09 '22 at 15:21

KaZami-Ryu · Accepted Answer · 2022-02-09T16:23:51.167

That depends, First of all the question is, the badge number represents the number of unread conversations or unread total number of messages in the conversations (all of them combined)?

If it represents the number of unread conversations, one approach can be, for the metadata of each conversation you can set a variable(bool) to check if the conversation is unread or not...and as much i presume you're using a listview to display those conversations which has a build method which returns each element of list after creating it...you can check for the variable's value there and increment or decrement the counter respectively.

And if the badge represents the number of unread messages of all the conversations combined...I've a similar approach in mind like previous one, in the metadata of the each conversations have an integer to store the number of unread messages and while building the conversations in the listview add them all up.

I'm novice so my approach, I'm not sure will be the optimal one or not but i think it should work (obviously nothing comes for free, even mine might have future complications).

Flutter - Implementing unread messages in a chat app?

1 Answers1