Flutter makes mobile development fast and easy in almost all of it’s aspects. Dynamic theming is no exeption to that. You can easily specify both your dark and light theme color pallette inside your MaterialApp widget. You can also wrap some parts of your app with a Theme widget, to further customize the theme.

However, you might feel the need of implementing your own theming at some point. The built-in theming in Flutter lacks some customization, that is required in apps on larger scale. The main problem with the built-in theming is, that you can’t override or customize the names of the colors.

Let’s say you have textboxes all over the app, and you want to specify a certain color to all of them. In Flutters built-in theming, there is no field such as textboxColor. You would have to use some other predefined name for your color, and that can become quite confusing. You can easily forget which name was for which color.

Let’s create our own custom theming!

We will start by creating our theme file. I usually like to name mine Themes.dart to keep things consistent. Let’s start off by creating two classes, one for dark theme and one for light theme. In these classes we will specify our color pallette.

Note! When specifying the colors, don’t forget to use the keywords static and const. Make also sure to use same color names in both the dark and the light theme. This way you will keep everything consistent.

class LightTheme {   static const backgroundColor = const Color(0xffb0bec5);
   static const textboxColor = const Color(0xff4db6ac);
   static const textColor = const Color(0xff535353);}class DarkTheme {   static const backgroundColor = const Color(0xff37474f);
   static const textboxColor = const Color(0xff00695c);
   static const textColor = const Color(0xffbdbdbd);}

#flutter #mobile-apps #web-development #programming