目录
description bug_report

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 DropdownMenus 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 DropdownMenus 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:

Relevant PRs: