Flutter app with a touch of Material You colors, please

This is a cross-post from my blog: aednlaxer.github.io (no ads, trackers and 🍪 cookie requests)

Android 12 brings the third iteration of Material Design called Material You — along with other changes apps and home screen widgets may now change their look according to wallpaper colors or selected system palette.

There are no design guidelines for using these new colors although Google is updating their apps — Gmail, Keep, Phone, Calendar and others have already got their Material You makeover. It feels a bit like a secret — there are no guidelines but apps are getting updated. Unfortunately, Flutter has no support for the new coloring system yet.

As a developer I want to support and utilize the latest available specifications and APIs. Let’s get the new colors in Flutter.

Getting colors using a platform channel

system_accent1_0
system_accent1_10
system_accent1_50
...

There are three groups of accent colors and two groups of neutral colors:

Each color group has 13 shades and looks like a gradient — it starts with a lighter color and ends with a darker one. Switching between light and dark system modes does not change the palette’s colors.

Note: make sure to set targetSdk to 31 in app’s build.gradle file. Otherwise the new R.color.* attributes are not accessible.

Making a call via platform channel is trivial so here’s the code.

The map of colors in Flutter’s MaterialColor is slightly different from what Android offers - Flutter expects to have a primary color and its 10 shades, Android provides 13 shades. I simply ignored some of the shades on the Flutter side although it doesn’t feel right - some of the ignored colors could be useful (see palette usage below).

Guessing Material You colors usage

Calculator

Gmail

Gboard

There’s no clear logic which color to use in each case. Looks like the way to achieve colorful Material You looking apps is to use shades 100–300 of accent colors for main controls and lighter\darker colors for the rest of the items.

Using Material You colors in Flutter

FutureBuilder(
future: getMaterialYouColor(),
builder: (context, AsyncSnapshot<MaterialYouPalette?> snapshot) {
final primarySwatch = snapshot.data?.accent1 ?? Colors.blue;
return MaterialApp(
theme: ThemeData(
primarySwatch: primarySwatch,
...

The biggest challenge comes with widgets customization. Setting a primary swatch is simple but overriding themes for all needed widgets could be hard — it’s a lot to do, to test and to maintain. And then there’s dark theme. And fallback theme for other platforms where Material You colors are not supported. Let’s hope Flutter will have a better and simpler solution for that.

In this article I’m looking for a way to bring Material You colors to Flutter. Can it be done? Yes. Is using these colors to style widgets a pleasant experience? Doesn’t feel so.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store