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



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:

Read more:



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.


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.


Video ref:

Material design 3 : https://youtu.be/dVXa6_wv-VA

Dark Mode : https://youtu.be/AmbA3mRZLnI

Typography : https://youtu.be/JwRVEp6sF7Y

Elevation : https://youtu.be/qhOZ145p9DI

Dynamic Color : https://youtu.be/Lv7GmmqDkqQ

Color Builder : https://youtu.be/s9abPli4Lls

Try visual dynamic color : https://m3.material.io/theme-builder#/dynamic

GET source code on Github: