Fast Prototype The Ultimate User Experience Using Flex Color Scheme

Fred Grott
3 min readJul 29, 2022

What if you do not have to write themes? Well, at least not the odd-some 20 themes that the Flutter SDK sets to null. That would mean that you could superfast speed through color changes and polish how the app should look and feel to app users. Well, let me show you how to do that, just by using Flex Color Scheme in a power-move way.

What Are We Building

Some screenshots:

Light

Dark

Flex Color Scheme:

It works by dynamically using the ThemeData constructors to build the ThemeData object, but it also fills in the color gaps in Material Design support AND, fills in the themes that the ThemeData class normally sets and defaults to null. That means we no-longer have to implement those 20-plus themes. Instead, we just define the themes that FCS requires to do it’s magic and ta-da, a fully themed app with no heavy work involved!

The Flex Color Scheme Class has these constructors:

-light

-dark

And then we use the getter toTheme to get our Flex Color Scheme more power ThemeData object.

The ThemeData Null Themes it populates are:

-ThemeData.appBarTheme

-ThemeData.bottomAppBarTheme

Fred Grott