Material Design 3 Not In Flutter 3.3

While yes, there is a useMaterial3 flag and Google has announced Material Design 3 support in Flutter 3.3; not everything is exactly Material Design 3 yet. This is a detail look at what is not Material Design 3 yet and what workarounds can be used.

In simple terms, the Flutter SDK is resource constrained since Google is supporting 3 front-end frameworks. Thus, the design better with more code power way of coping is to put the Flex Color Scheme package on top of the flutter SDK to cut down on theme configuration and re-deploy that coding time to filling in the other Material Design gaps that Flex Color Scheme does not cover.

The GitHub issue this stems from is this one, 91605:

☂️ Bring Material 3 to Flutter · Issue #91605 · flutter/flutter

First up is the segmented button control, i.e. switch:

Update segmented buttons to support Material 3 · Issue #103529 · flutter/flutter

Material Design 2 segmented button has as its base the now depreciated Raw Material Button. Whereas, the material design 3 spec indicates a look almost a full clone of the tonal and filled tonal buttons. That means this is reachable now, as we can do a stateful switch set of buttons that uses the tonal and tonal filled buttons.

BottomAppBar for Material Design 3 has some visual changes:

One can either make a custom bottom-appbar or wait until the final merge to stable, which probably is…