Member-only story

How To Rise Above The Material Design Mess In Flutter

Fred Grott
5 min readJul 20, 2022

--

The switch to Material Design 3 (Google is calling it Material You) is somewhat messy right now. But, there are some useful strategies to implement material design 3 (material you) in your flutter app that take the headaches out of that huge task. What I am going to show is sort of the secret flutter-designer-and-app-developer handshake in how we interact with the Flutter SDK team to keep track of major changes in the Flutter SDK and mixed in some advance theme techniques.

Handing Dynamic Color

The dynamic color plugin not only handles Android’s dynamic color, but brings that feature to all platforms except web. Since we can set the dynamic color package builder at the base of the app widget, it’s a matter of setting up two color scheme variables that are global such as lightDynamic and darkDynamic and have our color infrastructure set those two variables and then in the theme parameter of both MaterialApp and CupertinoApp set the color scheme with a ThemeData.copy.

And that strategy will work no matter what 3rd-party package you use to do dynamic material and cupertino widget deliver to the target platforms.

Next up, is how we track Material Design implementation in the Flutter SDK and the theme strategies to migrate the problems.

--

--

Fred Grott
Fred Grott

No responses yet