Migrating your Flutter app to Material Design 3

A framework for building beautiful, natively compiled applications from a single codebase. Support is in progress for Material Design 3.

In this article, we will discuss everything that you, as a Flutter developer, should know about migrating your Flutter app to Material 3.

How to enable Material 3 in Flutter

Currently, Material 3 changes are only available when opting in, so you’ll need to use the useMaterial3 flag on ThemeData to enable Material 3 support. (This might change in the future, so be sure to check out the Flutter website for updated documentation.

To use Material 3 in Flutter instead of Material 2, specify the following:

theme: ThemeData(
  useMaterial3: true,
),

What’s new in Material Design 3 for Flutter?

Material Design 3 for Flutter introduces a number of new features and improvements to the Material Design system, including updated typography, new iconography, and improved layout structures.

Some of the key changes include updated color palettes, enhanced depth and shadow effects, and new animation and motion techniques.

Additionally, Material Design 3 for Flutter provides developers with more control over the look and feel of their apps, allowing them to create unique, customized designs that are optimized for a variety of devices and screen sizes.

Explore the updated components, typography, color system, and elevation support with the interactive Material 3 demo

The key changes in Material 3 are:

Dynamic color
Typography
Shapes
Elevation

Let’s go through each of them in detail.

Dynamic color

Let’s start with Dynamic color, which enables you to apply consistent colors across your app.

It contains some key colors and neutral colors related to separate tonal palettes.

Colors from these tonal palettes are applied across the UI.

Use Material Theme Builder to visualize the dynamic color for your app and create a custom color scheme.

///...
  useMaterial3: true,
  colorSchemeSeed: Colors.green,
),

Here, I’ve created an example that shows all the colors from the M3 ColorScheme

Typography

Material 3 simplified the typography naming by splitting the typescales into five key groups:

Display
Headline
Title
Body
Label

The scaling of the typography has become consistent across the groups. Here is a comparison between the M3 and M2 typescales:

Elevation

Material 3 introduces a new surfaceTintColor color property. When applied to elevated components, the surface of the elevated components gets this color, and its intensity depends on the elevation value.

Elevation eg: Creating Elevated Cards with Material Design 3 in Flutter

The Material widget is used to define a visual surface that can be elevated and tinted with a specified color.

The Material widget has several properties that control its appearance, including:

borderRadius: The roundedness of the corners of the Material widget.

shadowColor: The color of the cast shadow provided by the Material widget's elevation.

surfaceTintColor: The color used to tint the surface of the Material widget.

color: The background color of the Material widget.

type: The type of Material to use for the widget. In this case, the type is set to MaterialType.card.

elevation: The elevation of the Material widget, which determines the cast shadow and perceived depth of the surface.

Shapes

Material 3 offers a wider range of shapes, including squared, rounded, and rounded rectangular shapes. The FAB, which was previously circled, now has a rounded rectangular shape, and material buttons went from rounded rectangular to pill shaped.

Widgets like Card, Dialog, and BottomSheet are also more rounded in M3.

Dark Mode:

If you want to enable dark mode, you need to set the brightness property to Brightness.dark in your ThemeData object

      theme: ThemeData(
       useMaterial3: true,
       colorSchemeSeed: Colors.green,
       brightness: Brightness.dark
      ),

      // brightness: Brightness.dark
      // The color is dark and will require a light text color to achieve readable contrast.
      // For example, the color might be dark grey, requiring white text.

      // brightness: Brightness.light
      // The color is light and will require a dark text color to achieve readable contrast.
      // For example, the color might be bright white, requiring black text.