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.

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

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!