Material 3, is the revamped version of Material UI, which is now available on flutter too.

Material 3, brought fresh typography to the system, changed the elevation, and introduced a new ink effect. It also improved the ColorScheme. Maybe the most important thing here is that you can now generate a full Color Schema from a single color.

A handful of Material widgets, such as AppBar, FloatingActionButton (FAB), ElevatedButton, OutlinedButton, IconButton, and Card, have been updated to support Material 3 design. There are also new Material 3 widgets, such as NavigationDrawer, NavigationBar, and NavigationRail. Some new M3-style buttons, such as FilledButton and FilledButton.tonal, and a whole lot more.

If you simply enable Material 3 in your flutter application, you notice some changes: FAB has a rectangulare shape now, tThe AppBar has no elevation or background color.

You can find a demo application developed by Flutter team on their website.

How to Get Started

To get started with material 3 in flutter, simply add userMaterial3 to your theme.

ThemeData(
        useMaterial3: useMaterial3,
        )

This will make flutter render the UI with material UI.

Colors

If you have used material design in the past, one of the things that you might have noticed is the complexity of its color scheme. There are hunderds of variants and it is really difficult to create a new scheme for the color you need.

Not that is changed! Material 3 enables you to make a color scheme by simply specifying the main color you want the theme to be based on

ThemeData(
        colorSchemeSeed: Colors.teal,
        useMaterial3: useMaterial3,
        );
teal theme teal theme

Typography

Text types split into groups now:

  • Display
  • Headline
  • Title
  • Body
  • Label

The names of the groups are easier to understand, and the use of them across devices has become easier to understand and use. Refer here for more information.

Elevation

The other fun with Material 3 is that the color of the widget changes with the elevation it has. And this is the primary way of communicating elevation as opposed to shadow. Component still have shadows, but it seems it is not directly related to elevation now. Besides, all the components have elevation now.

As you can see, the shadow of the button is not changing when the elevation changes. Instead it gets slightly darker shade of its color.