Contents

Material 3 updates

Contents

Material 3, also known as Material You, is the next generation of Material Design. With new features and widget updates, UI design is more uniform across platforms. So your app will look similar whether running on mobile or on a desktop. This guide gives a high-level overview of Material 3, highlights key updates, and shows you how to enable Material 3 for your Flutter application.

What is Material 3?

Material 3 is the latest version of Material Design, a UI/UX design system created by Google. Material design enables developers and designers to build optimal user experiences on Flutter and other platforms. Material 3 provides updated features like dynamic color, elevation, and typography.

Key updates

Material 3 introduced several major changes from Material 2. The Flutter team continues migrating Flutter’s UI components to the Material 3 specifications, and most (but not all) will be implemented by the next stable release. You can demo the Material 3 features with the Material 3 Flutter showcase.

The following sections cover some of the new updates available in the next stable release.

New widgets

  • ElevatedButton: Provides button choice based on the importance of the action.
  • NavigationBar: Enables switching between primary routes in your app. This widget replaces BottomNavigationBar.
  • NavigationDrawer: Provides another way to switch between primary routes in your app.
  • SegmentedButton: Provides multiple selection options and views for buttons.

Styled buttons

  • FilledButton: Emphasizes important buttons that complete a workflow, such as FINISH, DONE, or SUBMIT.
  • FilledButton.tonal: Provides a more emphatic version of an outlined button.

Updated widgets

The following list outlines some key widgets that are updated to support Material 3.

Some of these widgets have more features.

  • AppBar: Introduces new colors, elevation, and layout.
  • Card: Introduces new types of cards: elevated, filled, and outlined.
  • ColorScheme: Introduces dynamic color, design tokens, and color contrast accessibility standards.
  • IconButton: Introduces two new types of IconButton: standard and contained.

You can follow the migration of Flutter to Material 3 in the Bring Material 3 to Flutter GitHub issue.

How to use Material 3 in your Flutter app

By default, all Material widgets use Material 2. To enable Material 3, define a theme of ThemeData in your MaterialApp class, and set its useMaterial3 property to true. In using this property, you opt-in to use Material 3.

void main() {
  runApp(
    MaterialApp(
      title: 'Material 3 property',
      theme: ThemeData(
        useMaterial3: true
      ),
    ),
  );
}

Learn more

To learn more about Material 3 updates and the migration of Flutter to Material 3, check out: