In the last post we added Dark Mode to our app. We created the toggles for few other settings but didn’t implement them. Today we’ll go ahead and implement them. Let’s get started.

Things to Build

Ability to Change Profile Picture Image Compression Messages Peek Toggle (The bottom Sheet on the Chat Page). Message Paging Toggle (Swipe Gestures to switch between chats). D̶a̶r̶k̶ ̶M̶o̶d̶e̶ (Already Done).

The Settings Page

This is how the Settings Page looks now.

Uploading Profile Picture

Let’s start with uploading profile picture. What we’d want to do here is,

Let the user pick a image file on clicking ‘Change Profile Picture’ Update it to the user’s profile on Firebase. Show a progressbar while it’s being done. Once the photo is uploaded. Show the result.

We’re picking the profile picture using the pickImage function.

Create a new Event UpdateProfilePicture for updating profile picture.

Here’s how the ConfigBloc handles it.

And these are the ConfigStates required.

Update UserDataProvider and UserRepository , add the following method for updating profile picture URL to the user’s profile on Firebase.

For the rest of the three toggles we’re dispatching ConfigValueChanged Event from SettingPage . Similar to what we did for Dark Mode toggle.

These values are written in SharedPreferences .

We then read these values in different parts of our app to disable or enable certain features. Let’s take a look at how and which all places we’re doing it.

Image Compression

We’re doing it inside our ChatAppBar , because that’s where new images are uploaded from. If compression is enabled we’re sending the image in 70% of it’s original quality.

Messages Peek

Here’s how Messages Peek looks like.

We’re disabling the Swipe Up Gesture on our InputWidget when Message Peek is disabled.

Message Paging

Message Paging allows the user to switch between conversations using left/right gestures. We had implemented it in the ConversationPageSlide widget.

Our user can open a chat from two different places.

Home Page. Contact Page.

Update the ChatRowWidget and ContactRowWidget to open SingleConversationPage when MessagePaging is enabled and ConversationPageSlide when its disabled.

There were also minor changes required in ChatAppBar and other dependent classes. Check Code Changes section for more details.

Other Improvements & Experiments

Tried Sembast for caching messages. I knew that Firebase has built in caching but somehow it felt a touch bit slower to me. Sembast more or less had similar results so removed it afterwards. I also tried Hive, it claims to be faster but at the moment it doesn’t support abstract classes for Tables. For now I’m skipping this part and will do it when I have some better alternative.

Modifed Contact model to include extra fields like user’s profile picture etc.

model to include extra fields like user’s profile picture etc. Added Fullscreen Image Preview on image click on Chat Page.

Fixed the issue with back button on the Chat Page.

Validation for empty text messages on InputWidget .

Here’s a little look at how the app looks at this stage.

Our MVP is ready!! 💯

and at this point I’ll pause building new features and start focusing on something really important.

Testing

Yes. As cool as writing new features is, it’s equally important to write tests. I have covered testing in this series under 3 different posts.

60 Days of Flutter : Day 4–5 : Widget Testing With Flutter

60 Days of Flutter : Day 18–19 : Unit Testing in Flutter using ‘ mockito’

60 Days of Flutter : Day 20–21 : Unit Testing a Bloc in Flutter

I’ll be writing tests for all the remaining code base now and that’s when the next post will be (Probably 5–6 days). Post which we’ll write few Firebase Cloud Functions to improve the performance and also write rules for our Firestore.

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

#33 Register Page and Other Fixes

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!