60 Days of Flutter :Building a Messenger : Day 48–50 : Creating the Settings Page using Bloc

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

1. Ability to Change Profile Picture
2. Image Compression
3. Messages Peek Toggle (The bottom Sheet on the Chat Page).
4. Message Paging Toggle (Swipe Gestures to switch between chats).
5. 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,

1. Let the user pick a image file on clicking ‘Change Profile Picture’
2. Update it to the user’s profile on Firebase. Show a progressbar while it’s being done.
3. 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.

1. Home Page.
2. 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.
• 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

• 60 Days Of Flutter : Building a Messenger from Scratch
• 60 Days of Flutter : Day 1 : Creating the App
• 60 Days of Flutter : Day 2 : Setting Up A CI With Flutter
• 60 Days of Flutter : Day 3–4 : Building a Chat Screen in Flutter
• 60 Days of Flutter : Day 4–5 : Widget Testing With Flutter
• 60 Days of Flutter : Day 6–7 : Implementing a Slideable Widget Using Bottomsheet in Flutter
• 60 Days of Flutter : Day 8 : Changing The Launcher Icon and Implementing GestureDetector
• 60 Days of Flutter : Day 9–10–11 : Creating Awesome Register Screen in Flutter
• 60 Days of Flutter : Day 12–14 : Understanding BLoC Pattern in Flutter
• 60 Days of Flutter : Day 15–17 : Implementing Registration Screen using ‘flutter_bloc’
• 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
• 60 Days of Flutter : Day 22–23 : Building a Modern Contacts Page in Flutter
• 60 Days of Flutter : Day 24–26 : Building a Animated Progress Fab and the Contacts Bloc in Flutter
• 60 Days of Flutter : Day 27–29 : Sending and Retrieving Messages from Firebase using BLOC
• 60 Days of Flutter : Day 30–32 : Firebase Chat UI using Stream and Bloc
• 60 Days of Flutter : Day 33–35 : Paginating data from Firestore using Firebase Queries
• 60 Days of Flutter : Day 36–38 : Seamlessly Upload Files to Firebase Storage
• 60 Days of Flutter : Day 39–41 : One UI Inspired Attachments Showcase Page
• 60 Days of Flutter : Day 42–45 : Creating the Home Page & Quick Peek BottomSheet for Messages
• 60 Days of Flutter : Day 45–47 : Adding Dark Mode to a Flutter App
• 60 Days of Flutter : Day 48–50 : Creating the Settings Page using Bloc
• 60 Days of Flutter : Day 51–54 : Unit Testing Firebase Providers with Mockito
• 60 Days of Flutter : Day 55–56 : Deploying Firestore Security Rules using Firebase CLI
• 60 Days of Flutter : Day 60 : Wrapping It Up

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!