☂️ Bring Material 3 to Flutter

[rami-a]

Material 3, also known as "Material You", is the next generation of Material Design. The major changes include:

• updates to many components (colors, text styles and shapes, etc.)
• color system improvements
• typography improvements
• elevation refinements

This issue has tracked the progress and status of adding Material 3 support to the Flutter material library. That work is now complete.

As of Flutter 3.16, Material3 is the default

Support for Material 2 will continue to be available for at least a year after Material 3 becomes the default. To opt-in to Material 2 use the useMaterial3 ThemeData flag in your app:

  return MaterialApp(
    theme: ThemeData(useMaterial3: false),
    // ...
  );

Note
See the API docs for [useMaterial3] for the comprehensive list of changes.

Updates available in Flutter 3.16:

Check out the updates to components, color, typography, and elevation in the Material 3 sample app.

Components

The following components have been updated to Material 3 colors, text styles and shapes generated from the Material 3 token database:

• Update common buttons to support Material 3 #99022
• Migrate FloatingActionButton to Material 3 #94486
• Update IconButton to support Material 3 #103528
• Update Cards to support Material 3 #99023
• Update chips to support Material 3 #99024
• Update dialogs to support Material 3 #99025
• Introduce NavigationBar widget with Material 3 support #88888
• Update NavigationRail to support Material 3 tokens #99171
• Update AppBar to support Material 3 #92093
• Update AppBar to support new M3 'Medium' and 'Large' variants. #102684
• Add support for M3 Badges #114032
• Update BottomAppBar to support Material 3 #103530
• Added support for M3 filled and filled tonal buttons. #107382
• Update segmented buttons to support Material 3 #103529
• Migrated Checkbox to Material 3 Colors #110537
• Update Divider to support Material 3  #112169
• Update popup menus to support Material 3 #101017
• Create DropdownMenu Widget to Support Material 3 #115005
• Update ProgressIndicator to support Material 3 #111449
• Update Radio to support Material 3 #111450
• Update Slider to support Material 3 #111451
• Update Snackbar to support Material 3 #114091
• Update Switch to support Material 3 #103536
• Update text fields to support Material 3 #103537
• Update MaterialBanner to support Material 3 #105594
• Update CircleAvatar to support Material 3 #114811
• Add support for full screen dialogs  #104961
• Fixing elevation issues with Material 3 #110624
• Update BottomSheet to support Material 3 #111448
• Update DatePicker to support Material 3  #101481
• Update ListTile to support Material 3 #114006
• Update ExpansionTile to support Material 3 #119627
• Update TabBar to support Material 3 #111962
• Update Drawer to support Material 3 #103551
• Introduce Search bar and view #117483
• Update TimePicker to support Material 3  #101480

Color

• Update ColorScheme to support Material 3 changes (additional color scheme slots) #89852
• Add support for generating a full ColorScheme from a single color #93463
• Update elevation overlay to apply in both light and dark theme #91607
• Add two new ColorScheme colors: outlineVariant, scrim #108948
• Dynamic color / Material You support available in the dynamic_color package
• Add support for creating ColorSchemes from content #119333

Typography / Iconography

• ☂️ Update TextTheme to use new Material 3 text styles #89853
• Update default ThemeData.textTheme styles to Material 3 typography #97829
• Migrate ListTile TextTheme TextStyle references to Material 3 #101900
• Roboto Flex / Roboto Serif / Noto: While not part of the Flutter library, these font families are supported through the google_fonts package

Android features

• Android 12 overscroll stretch effect #87839
• Put stretch indicator behind useMaterial3 flag #100234
• Introduce new Android 12 style ink ripple #82850
• Change InkSparkle SPIR-V byte code from static const to a file to prepare for Impeller #99783
• New buttons should use InkSparkle for splashFactory when useMaterial3 is true #99884

Documentation / Dev experience

• Introduce useMaterial3 flag for ThemeData to allow for opt-in #93434
• Fully support Flutter export material-foundation/material-theme-builder#50
• Add Material 3 interactive dartpad samples #101048
• Migrate flutter counter template to Material 3 #111118

Remaining work

Components

• ☂️ Menu bars and cascading menus #23600 (a11y testing left to do)
• Introduce side sheets #119328
• Update tooltips to support Material 3 #126069

Typography / Iconography

• Support Material Symbols  #102560

iOS features

• ☂️ Material 3 iOS Adaptations #94821

Documentation / Dev experience

• ☂️ Make useMaterial3: true by default #127064
• ☂️ Material Theme System Updates #91772
• ☂️ Umbrella issue for Material2 API doc updates #127216
• Create a migration guide for Material 3 #119319
• Update Dartpad.dev samples to Material 3 #130788
• Update Material Design links to Material 3 website#8586

Accessibility

• Navigation suite contrast updates #116595
• Material 3 focus rings & keyboard behavior on web/desktop #120425

Motion

• Support Material 3 motion - Easing and duration #116525
• Support Material 3 motion - Transitions #116526

[TahaTesser]

@rami-a

Just noticed this, appears like title shifts from larger text to regular text (similar to Cupertino Navigation Bar)
I couldn't find an issue for this, wdyt?

2021-10-19.01-00-04.mp4

[rami-a]

Hey @TahaTesser, yeah that is one of the variations of app bar now. We should create an issue for it, I can do that

Done: #92093

[Hixie]

Is the goal to support a seamless upgrade path (flip a switch and you're in Material 3 mode, and your app should work fine), or is this the expectation that upgrading to this library will require effort?

If the latter, maybe it makes more sense to provide this as a separate library?

[Hixie]

These changes will be provided as an opt-in solution for now and the current Material 2 functionality will remain a part of the framework for a while (at least 1 year+). This will give developers to a lot of time to opt-in and move over their projects.

I don't think that's a lot of time. People maintain projects for a decade or more with minimal investment. We can make minor breaking changes that can be migrated with dart fix or flipping a switch, but something of the scale of a whole new library with a new design language and so on is too high an investment for an application in maintenance mode. For example, concretely, I would not expect to ever migrate my Rainbow Monkey app to material3; I just don't have the time to do that work if it's more than a flag flip.

[rami-a]

@Hixie the goal is to have a seamless upgrade path (i.e. toggle a flag on ThemeData and all Material widgets adjust appropriately). We're still working through all the details to make this possible.

One problem with offering this as a separate library is that as Material continues to evolve, Flutter's packaged material library will become stale and outdated.

[Hixie]

It doesn't look like it can be a seamless flag flip, e.g. looking at #89853 it seems the typography sizes don't match, which is a pretty serious breaking change all on its own.

I'm also a bit worried about what this will do to the API complexity and performance. Can we add these new features without making the widgets have more complicated APIs? They're already really complicated and confusing as it is, because of having to support material 1 and 2 features (which we'll have to support forever); if we add material 3 features as well it's going to be really hard to pick up the framework. Performance is also an issue since all these widgets are going to be full of branches to handle all the various options, and that's slower than having a dedicated simple library just for one design language.

Flutter's packaged material library will become stale and outdated.

Is that a problem? We can have people import the material3 library instead of the material library in the templates. The idea is just not to break old apps.

[rami-a]

The M3 spec is now live at https://m3.material.io/

[bernaferrari]

I'm also a bit worried about what this will do to the API complexity and performance

The 'issue' I see is that Flutter is extremely coupled with Material (even the iOS slider depends on Material slider). There are some open issues for decoupling Material, but they never moved on. I am 100% in favor of a Flutter material components library that can be instantly updated and break everything (I was the person that caused TextTheme to be updated to Material 2 😛). I don't want to wait 3 years for Material You changes; It could also help in versioning, as someone could still use RaisedButton (without the deprecation warning) if so wanted. Right now there is not much option, people need to update Flutter (like on Apple Silicon) and sometimes it makes it harder for them.

My question is just... how could such a library exist? The imaginary library will probably have ElevatedButton (with some tweaks), but Flutter already has it. Will I as a user suddenly need to figure out which import I want? Or shall Flutter deprecate every material widget and say "please import the material 2 library" (so that then switching to material 3 is easy)? Like, this would be nice, but possibly too radical? Or Flutter will somehow import Material 3 and then we will have to deal with conflicts "you use an unsupported material3 version" (which could also create trouble when Material 4 reaches).

I want this, I hope we get this, but how? Is it possible?

[byblady]

It is better to update the complete library of material, rather than keep it, since in the long run the components of material 2 will be without maintenance and obsolete, the current version could still be kept and perhaps to use version 3 it is only indicated through of a parameter in the import, that indicates that I want to use version 3 and not 2, or by default in new projects that it is version 3 and be able to use the current version if one wants, but not both at the same time. you see.

[Hixie]

even the iOS slider depends on Material slider

Actually the cupertino library doesn't depend on material; the dependency is in the other direction.

someone could still use RaisedButton

There's nothing stopping someone today from just copying the material library and putting it into a package if they want to continue using the older widgets, FWIW.

[bernaferrari]

You are right. So the question that remains is: how could we have a material3 library with Flutter's existing material in the same project without conflicts?

• Convert Flutter's material to material2 library and add a dart fix that adds that import everywhere.
• Somehow add a material flag to pubspec where when >= 3, hides the visibility for Flutter's default material (at least for IDE suggestions; it would still work, just don't suggest/auto-import them). Or maybe just having material in pubspec would trigger the IDE plugin to not auto-import the older material.

If you are talking about uncoupling things, we could also remove Material Icons from Flutter and put them into a package. This is a frequent request as it is always breaking something/not updating/the script that updates are private and its changes get in the middle of Flutter releases, so people need to wait for the next stable to have the icons.