Changing Theme at run-time: Flutter

Bibek Timsina
May 25 · 2 min read

Theming is a crucial part of app development, whether it be mobile or web. Some users like to stay on the light side while some not so much.

Firstly, the dependencies that we will be using:

  1. flutter_bloc
  2. bloc
  3. shared_preferences

Let’s start off by defining our themes. I will be defining three themes but the number of themes you want is up to your need.

Create a file that will decide to change the theme.

Now, a file that will change the theme state.

Now create a file that will do the heavy lifting i.e. change the theme when you need and store the user’s choice even if the app is closed.

Finally, all the needed files are created. The reason that there are so many files is that you can use write the code once and reuse it in any application that you will create.

Now to add the ability to change themes in your own custom widget, you will have to do the following steps.

Wrap your widget in BlocBuilder and subscribe the builder to changeThemeBloc in bloc: parameter.

Now for the moment, we have all been waiting for. Drumroll, please……..

Now you are one step closer to making the best app the world has ever seen.

If you would like to inspect the complete app, feel free to visit this GitHub repo.

I would like to thank Michael Adeyemo for the initial source code.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade