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

Unless stated otherwise, the documentation on this site reflects the latest stable version of Flutter. Page last updated on 2024-04-04. View source or report an issue.