MenuStyle class

The visual properties that menus have in common.

Menus created by MenuBar and MenuAnchor and their themes have a MenuStyle property which defines the visual properties whose default values are to be overridden. The default values are defined by the individual menu widgets and are typically based on overall theme's ThemeData.colorScheme and ThemeData.textTheme.

All of the MenuStyle properties are null by default.

Many of the MenuStyle properties are WidgetStateProperty objects which resolve to different values depending on the menu's state. For example the Color properties are defined with WidgetStateProperty<Color> and can resolve to different colors depending on if the menu is pressed, hovered, focused, disabled, etc.

These properties can override the default value for just one state or all of them. For example to create a SubmenuButton whose background color is the color scheme’s primary color with 50% opacity, but only when the menu is pressed, one could write:

SubmenuButton(
  menuStyle: MenuStyle(
    backgroundColor: WidgetStateProperty.resolveWith<Color?>(
      (Set<WidgetState> states) {
        if (states.contains(WidgetState.focused)) {
          return Theme.of(context).colorScheme.primary.withOpacity(0.5);
        }
        return null; // Use the component's default.
      },
    ),
  ),
  menuChildren: const <Widget>[ /* ... */ ],
  child: const Text('Fly me to the moon'),
),

In this case the background color for all other menu states would fall back to the SubmenuButton's default values. To unconditionally set the menu's backgroundColor for all states one could write:

const SubmenuButton(
  menuStyle: MenuStyle(
    backgroundColor: WidgetStatePropertyAll<Color>(Colors.green),
  ),
  menuChildren: <Widget>[ /* ... */ ],
  child: Text('Let me play among the stars'),
),

To configure all of the application's menus in the same way, specify the overall theme's menuTheme:

MaterialApp(
  theme: ThemeData(
    menuTheme: const MenuThemeData(
      style: MenuStyle(backgroundColor: WidgetStatePropertyAll<Color>(Colors.red)),
    ),
  ),
  home: const MyAppHome(),
),

See also:

• MenuAnchor, a widget which hosts cascading menus.
• MenuBar, a widget which defines a menu bar of buttons hosting cascading menus.
• MenuButtonTheme, the theme for SubmenuButtons and MenuItemButtons.
• ButtonStyle, a similar configuration object for button styles.