-
Notifications
You must be signed in to change notification settings - Fork 28.9k
Closed
Labels
P2Important issues not at the top of the work listImportant issues not at the top of the work listc: proposalA detailed proposal for a change to FlutterA detailed proposal for a change to Fluttercustomer: crowdAffects or could affect many people, though not necessarily a specific customer.Affects or could affect many people, though not necessarily a specific customer.f: material designflutter/packages/flutter/material repository.flutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.team-designOwned by Design Languages teamOwned by Design Languages teamtriaged-designTriaged by Design Languages teamTriaged by Design Languages team
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
Zazo032, JonasWanke, edeuss, ferraridamiano, shitb and 435 morexeinebiu, lin72h, andredealmei, dimstr, bazrafkan and 21 morereallukedev, xeinebiu, mbabuglia, anoop-tm, lin72h and 63 morexeinebiu, JannieT, MegaGrindStone, HeckCodes, BerkSpar and 82 moreimranbarbhuiya, roman-petrov, xeinebiu, lin72h, andredealmei and 46 morebhoominn, swerfel, martipello, Policy56, Harishwarrior and 82 more
Metadata
Metadata
Labels
P2Important issues not at the top of the work listImportant issues not at the top of the work listc: proposalA detailed proposal for a change to FlutterA detailed proposal for a change to Fluttercustomer: crowdAffects or could affect many people, though not necessarily a specific customer.Affects or could affect many people, though not necessarily a specific customer.f: material designflutter/packages/flutter/material repository.flutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.team-designOwned by Design Languages teamOwned by Design Languages teamtriaged-designTriaged by Design Languages teamTriaged by Design Languages team