60 Days of Flutter :Building a Messenger : Day 45–47 : Adding Dark Mode to a Flutter App

In the last post I created the home page for our app. With that our app is now completely functional. Few validations and minor bugs are still present but other than that our MVP is more or less ready.

I have about 15–20 days left and I have to

• Add additional features.
• Fix everything and write all the pending tests.

For today’s post we’ll refactor our code and add a Dark Theme (Couldn’t resist the temptation of doing that. Dark Mode Everything Please!). Registration Page has a different look than the rest of the app and thus would be excluded from this theming. Let’s get started.

Creating the Settings Page

Our Settings page will have few different options to play with for the user. For now I’m implementing just the dark mode. We’ll add more options in the future.

Everytime the user toggles any of these switches, some sort of State change will occur. In order to propagate these state changes throughout the app we’ll be using ConfigBloc. Generate it at blocs/config .

ConfigEvent

For now the Setting Page has one Event, which is when any of the toggles is turned on or off. We’re passing the Event key and the value(boolean) with the Event.

ConfigState

There can be two possible config states.

• UnConfigState : When the app is first launched. In this state the app has to read the config values from SharedPreferences.
• ConfigChangeState : This state is yielded whenever a config change happens (any of the toggles is turned on or off).

ConfigBloc

Every time this ConfigValueChanged event is encountered, we need to update the SharedPreferences with the latest value and also update the UI.

Updating the Theme

Declaring the Themes

Create Themes.dart and declare both the themes.

Update the Theme

Create Provider for ConfigBloc in your main.dart . Wrap your main Widget with a BlocBuilder and listen for ConfigState changes there.

Handing the First Launch

Whenever the app is launched for the first time, SharedPreferences won’t have any values for the configs we’ve created. Thus we need to create some initial set of values and save them when the app is launched for the first time.

Using the Material Theme.

Now we’ve setup everything. All we need to do is replace the existing colors and styles with the ones coming from Material. We’ll use

Theme.of(context)

to access the current theme.

Quick Tip: Use thof as a shorthand in Android Studio to get autocomplete for the theme object.

Press Enter and you have access to all the styles and colors of the current theme.

Replace all the existing usages from Styles.dart and Palette.dart in the app (Except the Register Page). For those of you who don’t know about it yet, you can use Find Usages to find out all the usages of any variable. Use it to refactor your code.

Here’s how the code for HomePage looks now after replacing colors and styles.

Likewise I’ve replaced all the existing Styles usages with the material ones (Check Code Changes for all the changes).

Welcome the the dark side.

Welcome the the dark side

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

#30 Added Dark Theme

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!