Updated default text styles for menus

The default text styles used for menus are updated to match the Material 3 specification.

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 DropdownMenus TextField is updated to match the Material 3 specification.

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 DropdownMenus TextField is updated from TextTheme.labelLarge to TextTheme.bodyLarge for Material 3.

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,
  ),
),

Landed in version: 3.14.0-11.0.pre
In stable release: 3.16

API documentation:

• MenuBar
• MenuAnchor
• MenuItemButton
• MenuButtonTheme
• DropdownMenu
• DropdownMenuEntry
• DropdownMenuTheme
• TextTheme

Relevant PRs:

• Update default menu text styles for Material 3

除非另有说明，本文档之所提及适用于 Flutter 的最新稳定版本，本页面最后更新时间: 2024-04-04。 查看文档源码 或者 为本页面内容提出建议。