Updated default text styles for menus
Summary
#The default text styles used for menus are updated to match the Material 3 specification.
Context
#The default text style for MenuItemButton
(a widget used
in a MenuBar
, and in a menu created with MenuAnchor
),
and DropdownMenuEntry
(in the DropdownMenu
) is
updated to match the Material 3 specification.
Likewise, the default text style for the DropdownMenu
s TextField
is updated
to match the Material 3 specification.
Description of change
#The default text style for MenuItemButton
(a widget used
in a MenuBar
, and in a menu created with MenuAnchor
),
and DropdownMenuEntry
(in the DropdownMenu
) is updated from
TextTheme.bodyLarge
to TextTheme.labelLarge
for Material 3.
The default text style for the DropdownMenu
s TextField
is updated from
TextTheme.labelLarge
to TextTheme.bodyLarge
for Material 3.
Migration guide
#A MenuItemButton
for Material 3 uses
TextTheme.labelLarge
as the default text style.
To use the previous default text style, set the TextTheme.bodyLarge
text style
in the MenuItemButton.style
or MenuButtonThemeData.style
properties.
Code before migration:
MenuItemButton(
child: Text(MenuEntry.about.label),
onPressed: () => _activate(MenuEntry.about),
),
menuButtonTheme: MenuButtonThemeData(
style: MenuItemButton.styleFrom(
/// ...
),
),
Code after migration:
MenuItemButton(
style: MenuItemButton.styleFrom(
textStyle: Theme.of(context).textTheme.bodyLarge,
),
child: Text(MenuEntry.about.label),
onPressed: () => _activate(MenuEntry.about),
),
menuButtonTheme: MenuButtonThemeData(
style: MenuItemButton.styleFrom(
textStyle: Theme.of(context).textTheme.bodyLarge,
),
),
A DropdownMenu
's TextField
for Material 3
uses TextTheme.bodyLarge
as the default text style.
To use the previous default text style,
set the TextTheme.labelLarge
text style in
the DropdownMenu.textStyle
or DropdownMenuThemeData.textStyle
properties.
Code before migration:
DropdownMenu<ColorLabel>(
initialSelection: ColorLabel.green,
controller: colorController,
label: const Text('Color'),
dropdownMenuEntries: colorEntries,
onSelected: (ColorLabel? color) {
setState(() {
selectedColor = color;
});
},
),
dropdownMenuTheme: DropdownMenuThemeData(
/// ...
),
Code after migration:
DropdownMenu<ColorLabel>(
textStyle: Theme.of(context).textTheme.labelLarge,
initialSelection: ColorLabel.green,
controller: colorController,
label: const Text('Color'),
dropdownMenuEntries: colorEntries,
onSelected: (ColorLabel? color) {
setState(() {
selectedColor = color;
});
},
),
dropdownMenuTheme: DropdownMenuThemeData(
textStyle: TextStyle(
fontStyle: FontStyle.italic,
fontWeight: FontWeight.bold,
),
),
A DropdownMenu
's DropdownMenuEntry
for Material 3
uses TextTheme.labelLarge
as the default text style.
To use the previous default text style, set the
TextTheme.bodyLarge
text style in
the DropdownMenuEntry.style
or MenuButtonThemeData.style
properties.
Code before migration:
DropdownMenuEntry<ColorLabel>(
value: color,
label: color.label,
),
menuButtonTheme: MenuButtonThemeData(
style: MenuItemButton.styleFrom(
/// ...
),
),
Code after migration:
DropdownMenuEntry<ColorLabel>(
style: MenuItemButton.styleFrom(
textStyle: Theme.of(context).textTheme.bodyLarge,
),
value: color,
label: color.label,
),
menuButtonTheme: MenuButtonThemeData(
style: MenuItemButton.styleFrom(
textStyle: Theme.of(context).textTheme.bodyLarge,
),
),
Timeline
#Landed in version: 3.14.0-11.0.pre
In stable release: 3.16
References
#API documentation:
MenuBar
MenuAnchor
MenuItemButton
MenuButtonTheme
DropdownMenu
DropdownMenuEntry
DropdownMenuTheme
TextTheme
Relevant PRs:
除非另有说明,本文档之所提及适用于 Flutter 的最新稳定版本,本页面最后更新时间: 2024-10-09。 查看文档源码 或者 为本页面内容提出建议。