Themes— Part 1 — Flutter

In this story and the upcoming stories, we are going to learn about themes in the flutter. If you are an android developer, you might know about the styles and usage of themes in Android. But, you need to forget some of the good things we had in native android development. Yes, some of the things in the theme are disappointing in the flutter. Before talking about that, will first focus on the good side and learn themes in the flutter. So, in this story, our primary focus is on the light and dark themes.

If you are a regular follower of my blog, you might know I always share my codepen in the blog to explore the code and to see the result. But for this below codepen link, to see the result difference you need to change the theme of your browser, system or phone. Yes, the good thing about flutter, is you don’t worry much to change the light and dark theme.

ThemeData

ThemeData configures the theme for the app or a widget. Here, we are going to focus on the theme configuration for the entire app. To configure the ThemeData to the entire app, we need to add ThemeData to the theme and darkTheme in the MaterialApp widget.

ThemeData.light()

A default light blue theme. To set a default light theme, you need to add ThemeData.light() to the theme.

theme: ThemeData.light()

ThemeData.dark()

A default dark theme. To set a default dark theme, you need to add ThemeData.dark() to the theme.

darkTheme: ThemeData.dark()

If we add both theme and darkTheme in the MaterialApp widget when the system sets to dark mode, the darkTheme will be applied and vice versa.

Is this enough? No right. We need more customization. Instead of just using the above two arguments, we can pass a custom constructor of ThemeData. There are so many arguments there in ThemeData, but here we are just going to use two arguments namely colorScheme and scaffoldBackgroundColor. We will focus on the other arguments in later stories.

colorScheme

colorScheme is used to configure the colour properties. In ColorScheme also we have so many arguments, light and dark methods. In our example, we are just using fromSwatch().

ColorSwatch

A colour that has a small table of related colours is called a swatch. Based on the colour we are providing to primarySwatch, all the primary widgets will take the related colours.

scaffoldBackgroundColor

scaffoldBackgroundColor is used to configure the background colour for a material app or a page within the app.

We need to learn a lot about themes, this is just a small first step. We will learn some more about themes in the upcoming stories. You can find the full code in the above-mentioned code pen link. Happy coding!

Update 1: In the next story, we can learn how to change the light and dark theme dynamically.

Update 2: In the next story, we can learn how to change different light themes dynamically.