In the last post we created the Bloc for the Chat Page. In today’s post we’re gonna wire it with our UI. I got stuck at few decisions I made related to the schema I created and I learned a few things:

Chhichhore is a overrated movie.

For every contact created a reverse mapping is also required, so if A adds B as a contact, we need to add both of them in the contactlist for each other.

We’ll be making these corrections and also add more Events and States to the ChatBloc based on the UI changes.

If you remember from this earlier post, we had built a UI where one could swipe left/right to switch between conversations. Today we’ll be writing the business logic for it as well. Let’s start!

Updating FireStore Rules

For now we’re gonna allow anyone who is signed in, to make modifications. We’ll later add authentication for all the collections. I’ll write a dedicated post for it at the end of the series.

match /users/{document=**} {



function isSignedIn() {

return request.auth.uid != null;

}

//Allow creating a new user to anyone who is authenticated

allow create: if isSignedIn();

//Allow read if signed in

allow read: if isSignedIn();

// Allow update only if the uid matches (same user)

allow update: if isSignedIn();// && request.auth.uid == resource.data.uid;

// Allow delete only if the uid matches (same user)

allow delete: if isSignedIn();// && request.auth.uid == resource.data.uid;

match /contacts/{contacts} {



allow create, read, update, delete: if isSignedIn();



}

}

Reverse Mapping of Contacts

The first correction we need is the logic for adding contacts. The new flow will be.

When A adds B as a contact, here’s what will happen:

Add B to /users/uid_A/contacts array. Add A to /users/uid_B/contacts array. Create a new Document at /chats/chat_id_ab . Add B : chat_id_ab to /user/uid_A/chats map. Add A : chat_id_ab to /users/uid_B/chats map.

Here’s the modifications in the ContactsBloc , and the ChatProvider and UserDataProvider it uses.

Adding States and Events

In the last post we had built all the basic States and Events for the ChatBloc . We’ll add more Events and States for PageChanged because we want to refresh the chat data on page change. I’ve also made some changes in the ChatProvider . We’ve also created a method to receive all the chats of the user as a stream. We’ll dispatch this event in main.dart at the very start.

We now have the Bloc ready. Let’s wire it with the UI.

The Chat Page

When the user clicks on any contact he’ll be redirected to the ConversationPageSlide , which is basically a PageView holding all the chats, so that he can swipe to navigate.

In the ConversationPageSlide , we’ll receive the Contact , compare it with the usernames in the ChatList we have, get the index and scroll the PageView to that particular index.

We dispatch FetchConversationDetailsEvent from ChatAppBar and FetchMessagesEvent from ChatListWidget to get the chat details and the messages respectively. The ChatListWidget now looks something like this.

The ChatAppBar is pretty basic, check Code Changes if you want to check it out. For sending messages we dispatch the SendTextMessageEvent in InputWidget .

Both sending and receiving of messages is done at this point. Here’s the end result.

So we are able to read and send messages now. But there are few issues:

On clicking the contact, it takes a little bit time before the data is returned, we’ll need to implement a Local Storage to cache this data locally as well.

to cache this data locally as well. On swiping between the pages, the state of the page does not persist, they’re getting rebuilt everytime. Also the messages get jumbled up between the pages. This also needs to be fixed.

The TextField overflows the AppBar.

We’re loading all the messages at once, We’ll also need to implement pagination for the messages.

I’ll fix these issues in the next post.

Hit me up in the comments below or Twitter or Linkedin or Instagram if you have any queries or suggestions or just for a casual tech talk maybe? See you guys in the next one!

Code Changes

#22 Wired ChatBloc with UI

How Can You Contribute?

Open issues with suggestion of better approaches or ideas for the app.

Connect with me on Twitter or Linkedin or Instagram.

Star the Github repository.

Share the series on Twitter.

Follow me on Github.

Posts In This Series

Show Your Support

Press the clap button below if you liked reading this post. The more you clap the more it motivates me to write better!