Flutter app with a touch of Material You colors, please

Getting colors using a platform channel

The idea is simple — call a “native” platform code to get a list of colors. The colors we’re interested in are listed in Dmitry Chertenko’s article and in the official documentation. There are several new system color attributes available:

system_accent1_0
system_accent1_10
system_accent1_50
...

Guessing Material You colors usage

As there are no guidelines on how to use the colors. I’ve used a modern nanotech tool (a simple color picker) to find matches between my current Material You palette and real apps. This may help in understanding how colors should be used.

Calculator

Calculator uses colors from all three accent color groups. I couldn’t find a color matching digit button’s background — perhaps it’s a color with opacity and it blends in with window background which makes it’s hard to get the actual color.

Gmail

Search and navigation bars use changed version of palette’s colors. My guess is they use a transparent color and a solid color background container (white for light theme and black for dark theme) to make the final color opaque. Let’s see what Material You guidelines say about it once they’re published.

Gboard

Pretty much every color is from the palette:

Using Material You colors in Flutter

Using colors in Flutter is simple: get a color and set it as a primary swatch:

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

--

--

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