更新選單的預設文字樣式

選單所使用的預設文字樣式已更新，以符合 Material 3 規範。

MenuItemButton（用於 MenuBar 以及由 MenuAnchor 建立的選單中的元件 (Widget)）與 DropdownMenuEntry（在 DropdownMenu 中）所使用的預設文字樣式，已更新為符合 Material 3 規範。

同樣地，DropdownMenu 的 TextField 預設文字樣式也已更新，以符合 Material 3 規範。

MenuItemButton（用於 MenuBar 以及由 MenuAnchor 建立的選單中的元件 (Widget)）與 DropdownMenuEntry（在 DropdownMenu 中）所使用的預設文字樣式，從 TextTheme.bodyLarge 更新為 Material 3 的 TextTheme.labelLarge。

DropdownMenu 的 TextField 預設文字樣式，從 TextTheme.labelLarge 更新為 Material 3 的 TextTheme.bodyLarge。

Material 3 的 MenuItemButton 會使用 TextTheme.labelLarge 作為預設文字樣式。 若要使用先前的預設文字樣式，請於 MenuItemButton.style 或 MenuButtonThemeData.style 屬性中設定 TextTheme.bodyLarge 文字樣式。

遷移前的程式碼：

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

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

遷移後的程式碼：

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

Material 3 的 DropdownMenu 的 TextField 預設會使用 TextTheme.bodyLarge 作為文字樣式。 若要使用先前的預設文字樣式，請在 DropdownMenu.textStyle 或 DropdownMenuThemeData.textStyle 屬性中設定 TextTheme.labelLarge 文字樣式。

遷移前的程式碼：

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

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

遷移後的程式碼：

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

Material 3 的 DropdownMenu 的 DropdownMenuEntry 預設會使用 TextTheme.labelLarge 作為文字樣式。 若要使用先前的預設文字樣式，請在 DropdownMenuEntry.style 或 MenuButtonThemeData.style 屬性中設定 TextTheme.bodyLarge 文字樣式。

遷移前的程式碼：

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

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

遷移後的程式碼：

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

引入版本：3.14.0-11.0.pre
正式版本：3.16

API 文件：

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

相關 PR：

• Update default menu text styles for Material 3