Material Design is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. The latest version is Material 3. FlutterFlow supports Material 3, and I thought my next app should try to build some best practices and consistency with it from the start.
FlutterFlow theme widgets save time laying out your app by enforcing consistency. If you decide to change the properties of a theme widget, such as color or font, you can update the theme widget in one place instead of going through every widget on every screen individually.This also has the benefit that you won't inadvertently use the wrong property on one widget in your app making a better overall look.
I guess more of these widgets could be baked in to FlutterFlow but building them for each widget you need in your app is quite quick and effective.
TL:DR — FlutterFlow has strong support for typography, colours, icons, and theming. FlutterFlow supports Material 3, but some work is required to build each element as a theme widget. There is a case for this being out of the box functionality, but it is relatively easy to set up a theme and material 3 theme widgets. Using theme widgets enforces consistency and saves time while building your app.
M3 Buttons as theme widgets in FlutterFlow
Creating Theme widgets is straighforward. Heres the end result in the builder. You can see each of the button styles is available to the app builder as a theme widget.
To create them go to Theme Settings, Theme Widgets in FlutterFlow. From here you can create any theme elment you might want to reuse in tiye app. The theme widget here is names FilledButton after its name in Material 3. It has border radius set to 20 and height set to 48 not 40 because Android accessibility guidelines made that recommendation as part of its app report. Elevation is set to 0 for all these buttons except for ElevatedButton. They all have the same padding. And you can duplicate once you create the first one and easily create the whole button family.
M2 vs M3 buttons
The new button styles in Material 3 have rounded corners, changes to elevation, and are in sentence-case. The buttons are taller and when you look at them side by side the M2 buttons look very outdated.
Now all you have to do is repeat this process for all the commonly used elements of your Flutter based app before building pages.
