Custom themes in Flutter

2 min readJan 6, 2022

This page talks about few points I noted about Custom theming in a Flutter application.

#1 `ColorScheme`

ColorScheme is a class that contains a set of twelve colors based on the Material spec that can be used to configure the color properties of most components.

#2 Out of the Box Color Schemes

Each of these built-in color schemes apply different colors to these 13 properties.

ColorScheme.light
ColorScheme.dark
ColorScheme.highContrastLight
ColorScheme.highContrastDark

How to use these Color Schemes

By supplying a Color scheme to the ThemeData.from() factory constructor, entire app's theme can be configured.

A Color Scheme can also be created using the Primary Swatch color.

The remaining properties of the ColorScheme are set in the ColorScheme.fromSwatch constructor.

#3 Changing only the required colors — Using `copyWith`

Example taken from Flutter source theme_data.dart

The Color scheme is based on Colors.blue
The Color scheme’s secondary color is overridden with Colors.green
The Body Text 2 Color is changed to Colors.purple

#4 How to create Custom themes

The theming example here is taken from Flokk. I just changed the state implementation from Provider to Riverpod.

custom_theme.dart

The enum defines two themes - Light & Dark.
The AppTheme class defines properties to hold a variety of colors. It also has a factory constructor AppTheme.fromType() .
To use Custom theme, we need a ThemeData object which will be passed to MaterialApp(). So, the AppTheme class also has a getter themeData that creates a ThemeData object by configuring textTheme and colorScheme. Few other properties of ThemeData are also changed by using copyWith().
The ColorScheme class requires 13 properties to be passed. This is where the colors from AppTheme are used.

main.dart

StateNotifier is designed to be subclassed. We first need to pass an initial value to the super constructor, to define the initial state of our object.