Material Design Holes in Flutter SDK And The Fix

Google is building four front-ends and so Material Design is always implemented last in the Flutter SDK. There are a set of strategies you can use when the useMaterialVersion flag shows up to use the new Material Design features despite the Material Design holes in the Flutter SDK. These techniques are from my own tool box.

The idea here is to avoid the black-hole of manually implementing things to fill the holes. Instead, we want to use some community driven solutions that give us a design edge while at the same reducing the extra work required to adapt the new Material Design version before it is fully polished.

 

How This Is Organized

 Whenever a new version of the Material Design spec is introduced the Flutter SDK introduces a Bring Material Version issue organizing note, this is the one for Material Design 3:

   Bring Material 3 To Flutter, issue 91605

   https://github.com/flutter/flutter/issues/91605

I am going to start with ThemeData migration than show the other areas.

ThemeData Migration

 ThemeData migration started in Flutter 2 during Material Design 2 implementation to reduce the 21 bag of colors. One aspect of this is that ThemeData does the bare minimum in creating null themes.

 Now, do you want to create all 20-plus component themes? Probably not. A Flutter Community member and now outside contributor to the Flutter SDK, RydMike, created the Flex Color Scheme to juice-up Color Schemes and the color space and use that to auto generate all the null themes with the correct colors.

And usually RydMike has fixes in the Flex Color Scheme package before they are implemented in the Flutter SDK concerning any component theme not yet transitioned to the current Material Design Version. Flex Color Scheme can be found on Pub dot dev website, here:

        https://pub.dev/packages/flex_color_scheme

Now, in the Material Theme System Update issue 91772:

       https://github.com/flutter/flutter/issues/91772

You will notice that Card Theme, Card Theme Data, Dialog Theme, Input Decoration Theme, and TabBar Theme are not yet normalized for Material Design 3. RydMike already has some fixes in the Flex Color Scheme package so not to worry.

Next up is the new Material Design 3 transitions.

Material Design 3 Transitions

  Information about this is in the issue 116526 titled, Support Material 3 motion:

   https://github.com/flutter/flutter/issues/116526

 This will not be found in the Flutter SDK itself, but instead the animations package:

   https://pub.dev/packages/animations

Here again we have a hole from the Flutter SDK team as they also implement the animations package which is missing the skeleton loaders pattern of Material Design 3 motion.

 Flutter Community saves the day in the form of the cool Skeletonizer package:

   https://pub.dev/packages/skeletonizer

Next up, variable font support.

Variable Font Support

Okay, we can now fully apply variable fonts with one word of caution. Well, actually two words of caution as Material Symbols is still not updated to variable fonts.

 The Google Fonts package has updated Roboto GFlex, Roboto Serif, and Noto for variable fonts. Due to the large size of that task, not all variable fonts in the Google Fonts website have been enabled for variable fonts in the Google Fonts package. You will have to read the Google Fonts changelog and see if your custom variable font you want to use is supported:

       Google Fonts changelog

       https://pub.dev/packages/google_fonts/changelog

With the new Material Design 3 symbols, a Flutter Community member has created a package that tracks and keeps up with the alpha material symbols at:

    https://pub.dev/packages/material_symbols_icons

Other Low-Hanging Fruit

The overall concept here is to look at things that are not yet implemented and see if a Flutter Community member implemented it. As anything that has been implemented, then can be design approach twist to give the app design an edge.

 At this point, there is not a good implementation answer from the Flutter community for material design 3 tool tips and side sheets. So it is something to leave off and not handle at this point.

Thoughts

This is generally how I face each cycle of new version of Material Design in the flutter SDK. It is a lot easier as far as effort, as each cycle of material design version implementation in the Flutter SDK lasts about 3 years.