Estilos de texto predeterminados actualizados para los menús

Los estilos de texto predeterminados utilizados para los menús se han actualizado para coincidir con la especificación de Material 3.

El estilo de texto predeterminado para MenuItemButton (un Widget utilizado en un MenuBar, y en un menú creado con MenuAnchor), y DropdownMenuEntry (en el DropdownMenu) se ha actualizado para coincidir con la especificación de Material 3.

De la misma manera, el estilo de texto predeterminado para el TextField de DropdownMenu se ha actualizado para coincidir con la especificación de Material 3.

El estilo de texto predeterminado para MenuItemButton (un Widget utilizado en un MenuBar, y en un menú creado con MenuAnchor), y DropdownMenuEntry (en el DropdownMenu) se ha actualizado de TextTheme.bodyLarge a TextTheme.labelLarge para Material 3.

El estilo de texto predeterminado para el TextField de DropdownMenu se ha actualizado de TextTheme.labelLarge a TextTheme.bodyLarge para Material 3.

Un MenuItemButton para Material 3 utiliza TextTheme.labelLarge como estilo de texto predeterminado. Para utilizar el estilo de texto predeterminado anterior, establece el estilo de texto TextTheme.bodyLarge en las propiedades MenuItemButton.style o MenuButtonThemeData.style.

Código antes de la migración:

MenuItemButton(
  child: Text(MenuEntry.about.label),
  onPressed: () => _activate(MenuEntry.about),
),

menuButtonTheme: MenuButtonThemeData(
  style: MenuItemButton.styleFrom(
    /// ...
  ),
),

Código después de la migración:

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

El TextField de un DropdownMenu para Material 3 utiliza TextTheme.bodyLarge como estilo de texto predeterminado. Para utilizar el estilo de texto predeterminado anterior, establece el estilo de texto TextTheme.labelLarge en las propiedades DropdownMenu.textStyle o DropdownMenuThemeData.textStyle.

Código antes de la migración:

DropdownMenu<ColorLabel>(
  initialSelection: ColorLabel.green,
  controller: colorController,
  label: const Text('Color'),
  dropdownMenuEntries: colorEntries,
  onSelected: (ColorLabel? color) {
    setState(() {
      selectedColor = color;
    });
  },
),

dropdownMenuTheme: DropdownMenuThemeData(
  /// ...
),

Código después de la migración:

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

El DropdownMenuEntry de un DropdownMenu para Material 3 utiliza TextTheme.labelLarge como estilo de texto predeterminado. Para utilizar el estilo de texto predeterminado anterior, establece el estilo de texto TextTheme.bodyLarge en las propiedades DropdownMenuEntry.style o MenuButtonThemeData.style.

Código antes de la migración:

DropdownMenuEntry<ColorLabel>(
  value: color,
  label: color.label,
),

menuButtonTheme: MenuButtonThemeData(
  style: MenuItemButton.styleFrom(
    /// ...
  ),
),

Código después de la migración:

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

Introducido en la versión: 3.14.0-11.0.pre
En la versión estable: 3.16

Documentación de la API:

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

PRs relevantes:

• Actualizar los estilos de texto de menús predeterminados para Material 3