The easiest beginner guide to theming in Flutter

Rawaha Muhammad

4 min readNov 6, 2023

In this short tutorial, we will learn how to implement multiple themes in Flutter with just a few lines of code!

If you prefer to follow along with the tutorial in a video format, please check out this video

Flutter Theming in 180 seconds

First, clone the code along template for this tutorial, from my GitHub repository.

After you have cloned the project, run flutter pub get and start the application in any mobile environment.

You should be able to see the profile screen once the application has successfully loaded.

Profile screen showing the user’s profile name, notes, and some buttons

This screen shows a user profile. We can see the name of the user, their notes, and some buttons.

As you can see, there is already a theme in place, which is generated by the ColorScheme.fromSeed() constructor, by passing it a deepPurple color. You can pass it any color and it will automatically generate a new theme based on that color.

This code can be found in the main.dart file.

Code for generating automatic theming for a specific color using the ColorScheme.fromSeed() constructor

Try and pass it a red color, and let’s also make it dark mode, by passing in brightness as Brightness.dark in the fromSeed() constructor.

Code for generating automatic theming for red color using the ColorScheme.fromSeed() constructor

After a hot reload, you should be able to see the wonders of this constructor! It rebuilt the widgets and the text according to the color passed.

Notice how everything is visible. This is because if you don’t specify any colors of your own to a widget, the Flutter widgets will try to apply the theme that you have provided in the MaterialApp.

We can force the widgets to look up the theme that we have provided, using the Theme.of() method.

In the code provided, I have used this method in several places.

Now that we have a basic understanding, let’s try to create some themes, and look at their effects one by one.

We will create two dark and two light themes, each with different colors.

In the presentation folder, go to core and then to the theme folder. Create a file called themes.dart inside the folder.
Inside the file, create a Themes class which will be responsible for holding multiple themes.

Let’s add a dark theme to it.

Here, we added the scaffoldBackgroundColor, gave the colorScheme property a new color, and changed the brightness to Brightness.dark, which is preferable for dark themes. We also introduced a new fontFamily to give the profile screen an aesthetic look. The useMaterial3 property remains true as it helps in scaling the theme, we want to be able to use the newest design concepts this way.

Now, add the Themes.darkTheme reference to the main.dart file

main.dart file after the addition of the darkTheme reference from the Themes class

Hit the hot restart button and you should be able to see the dark theme

After adding the dark theme to the Themes class

Similarly, we can experiment with the brightness and the colors to create different eye-pleasing combinations!

Let’s create three more Themes

Addition of three more themes to the Themes class

We simply added three more themes to the Themes class, which are similar to the first theme we created. The only difference here is that we removed the scaffoldBackgroundColor property, changed the brightness depending on whether we would like the theme to be dark or light, and passed another color to the ColorScheme.fromSeed() constructor.

You can now access these themes in main.dart by referencing the Themes class.