What's New In Material 3? | Sailesh Verma

What's New In Material 3?

In Flutter, the Material library provides developers with all the building blocks your UI needs. Since the launch of Material 3 at Google I/O 2021, the Flutter team has been updating Flutter’s Material library to support these new changes.

media

Getting started

To add Material 3 to your app, set the useMaterial3 flag to true in your theme’s constructor:

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData.light(useMaterial3: true), body: MyHomePage(), ); }}

New widgets

To get most of the widget changes, set the useMaterial3 flag. However, some widgets have changed so much in Material 3 that they’ve been replaced with new widgets. Here are some of the new widgets introduced in material3 designs:

NavigationBar & NavigationDrawer

The BottomNavigationBar widget has been replaced with the NavigationBar. It’s a little taller and doesn’t have a drop-shadow (that indicates elevation).

Segmented buttons

Segmented buttons give your user a toggleable choice from several options in a single widget. By default, you can only select one item, unless you specify the multiSelectionEnabled parameter.

Filled buttons

We’ve increased our selection of Buttons to include the new FilledButton. This button creates a colored, non-elevated button. The FilledButton.tonalmethod sets current background as a secondary color.

Badges

The new Badge widget can be used to give extra information, generally indicating a count or change of status, to a parent widget. They’re available in large and small sizes:

media

Generating a color scheme

A brand new feature of Material 3 allows you to set the color theme of your entire app from a single seed color. Set the color scheme seed parameter in your theme constructor and, from that one entry, Flutter generates a harmonious color scheme for every widget in your app. This scheme works in both light and dark modes!

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData.light( useMaterial3: true, colorSchemeSeed: Color.fromRGBO(188, 0, 74, 1.0); ), body: MyHomePage(), ); }
media