Closed
Description
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
Card
s 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
ColorScheme
s 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
forsplashFactory
whenuseMaterial3
is true #99884
Documentation / Dev experience
- Introduce
useMaterial3
flag forThemeData
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
iOS features
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
Metadata
Metadata
Labels
Important issues not at the top of the work listA detailed proposal for a change to FlutterAffects or could affect many people, though not necessarily a specific customer.flutter/packages/flutter/material repository.flutter/packages/flutter repository. See also f: labels.Owned by Design Languages teamTriaged by Design Languages team