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 MaterialStateProperty objects which resolve to different values depending on the menu's state. For example the Color properties are defined with MaterialStateProperty<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:

  menuStyle: MenuStyle(
    backgroundColor: MaterialStateProperty.resolveWith<Color?>(
      (Set<MaterialState> states) {
        if (states.contains(MaterialState.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: MaterialStatePropertyAll<Color>(,
  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:

  theme: ThemeData(
    menuTheme: const MenuThemeData(
      style: MenuStyle(backgroundColor: MaterialStatePropertyAll<Color>(,
  home: const MyAppHome(),

See also:

Mixed in types


Create a MenuStyle.


alignment AlignmentGeometry?
Determines the desired alignment of the submenu when opened relative to the button that opens it.
backgroundColor MaterialStateProperty<Color?>?
The menu's background fill color.
elevation MaterialStateProperty<double?>?
The elevation of the menu's Material.
fixedSize MaterialStateProperty<Size?>?
The menu's size.
hashCode int
The hash code for this object.
maximumSize MaterialStateProperty<Size?>?
The maximum size of the menu itself.
minimumSize MaterialStateProperty<Size?>?
The minimum size of the menu itself.
mouseCursor MaterialStateProperty<MouseCursor?>?
The cursor for a mouse pointer when it enters or is hovering over this menu's InkWell.
padding MaterialStateProperty<EdgeInsetsGeometry?>?
The padding between the menu's boundary and its child.
runtimeType Type
A representation of the runtime type of the object.
shadowColor MaterialStateProperty<Color?>?
The shadow color of the menu's Material.
shape MaterialStateProperty<OutlinedBorder?>?
The shape of the menu's underlying Material.
side MaterialStateProperty<BorderSide?>?
The color and weight of the menu's outline.
surfaceTintColor MaterialStateProperty<Color?>?
The surface tint color of the menu's Material.
visualDensity VisualDensity?
Defines how compact the menu's layout will be.


copyWith({MaterialStateProperty<Color?>? backgroundColor, MaterialStateProperty<Color?>? shadowColor, MaterialStateProperty<Color?>? surfaceTintColor, MaterialStateProperty<double?>? elevation, MaterialStateProperty<EdgeInsetsGeometry?>? padding, MaterialStateProperty<Size?>? minimumSize, MaterialStateProperty<Size?>? fixedSize, MaterialStateProperty<Size?>? maximumSize, MaterialStateProperty<BorderSide?>? side, MaterialStateProperty<OutlinedBorder?>? shape, MaterialStateProperty<MouseCursor?>? mouseCursor, VisualDensity? visualDensity, AlignmentGeometry? alignment}) MenuStyle
Returns a copy of this MenuStyle with the given fields replaced with the new values.
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
merge(MenuStyle? style) MenuStyle
Returns a copy of this MenuStyle where the non-null fields in style have replaced the corresponding null fields in this MenuStyle.
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
toString({DiagnosticLevel minLevel =}) String
A string representation of this object.
toStringShort() String
A brief description of this object, usually just the runtimeType and the hashCode.


operator ==(Object other) bool
The equality operator.

Static Methods

lerp(MenuStyle? a, MenuStyle? b, double t) MenuStyle?
Linearly interpolate between two MenuStyles.