One Color Theme To Rule Your Flutter App

Material has one way to do colors, and Cupertino has another way to do colors. Would it not be nice if you could gather those two different ways in one theme that adopts both Material and Cupertino platform targets?

Let me show you how!

The Cross-Platform Strategy I Use

Google recommends a manual way of platform theme-ing where you manually write the platform widget factories and re-use some material theme structures to theme Cupertino widgets; instead, I use the Flutter Platform Widgets plugin, which I contribute to.

The way Google really doesn’t talk about is using the MaterialBasedCupertinoThemeData to automatically derive material-based theme data sets for the Cupertino component widgets.

But, there is a trick to setting up colors correctly to deal with two different ways to theme a platform target.

My Color Trick

My Color Trick can be boiled down to:

1 Create a Common Set of Color variables to represent a core color palette

2 Create CupertinoColors for Primary, PrimaryVariant, Secondary, and SecondaryVariant.

3 Create A common ColorScheme using the combination of step 1 and step 2.