CupertinoMenuItem class

A menu item for use in a CupertinoMenuAnchor.

Layout

The menu item is unconstrained by default and will grow to fit the size of its container. To constrain the size of a CupertinoMenuItem, the constraints parameter can be set. When set, the constraints apply to the total area occupied by the content and its padding. This means that padding will only affect the size of this menu item if this item's minimum constraints are less than the sum of its padding and the size of its contents.

The leading and trailing widgets display before and after the child widget, respectively. The leadingWidth and trailingWidth parameters control the horizontal space that these widgets occupy. The leadingMidpointAlignment and trailingMidpointAlignment parameters control the alignment of the leading and trailing widgets within their respective spaces.

Input

In order to respond to user input, an onPressed callback must be provided. If absent, user input callbacks (onFocusChange, onHover, and onPressed) will be ignored. The behavior parameter can be used to control whether hit tests can travel behind the menu item, and the mouseCursor parameter can be used to change the cursor that appears when the user hovers over the menu.

The requestCloseOnActivate parameter can be set to false to prevent the menu from closing when the item is activated. By default, the menu will close when an item is pressed.

The requestFocusOnHover parameter, when true, focuses the menu item when the item is hovered.

Visuals

The decoration parameter can be used to change the background color of the menu item when hovered, focused, pressed, or swiped. If these parameters are not set, the menu item will use CupertinoMenuItem.kDefaultDecoration.

The isDestructiveAction parameter should be set to true if the menu item will perform a destructive action, and will color the text of the menu item CupertinoColors.systemRed.

This example demonstrates a simple CupertinoMenuAnchor that wraps a button.
link

To create a local project with this code sample, run:
flutter create --sample=cupertino.CupertinoMenuItem.1 mysample

import 'package:flutter/cupertino.dart';

/// Flutter code sample for a basic [CupertinoMenuAnchor].
void main() => runApp(const CupertinoMenuAnchorApp());

class CupertinoMenuAnchorApp extends StatelessWidget {
  const CupertinoMenuAnchorApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      home: CupertinoPageScaffold(child: CupertinoMenuAnchorExample()),
    );
  }
}

class CupertinoMenuAnchorExample extends StatefulWidget {
  const CupertinoMenuAnchorExample({super.key});

  @override
  State<CupertinoMenuAnchorExample> createState() =>
      _CupertinoMenuAnchorExampleState();
}

class _CupertinoMenuAnchorExampleState
    extends State<CupertinoMenuAnchorExample> {
  // Optional: Create a focus node to allow focus traversal between the menu
  // button and the menu overlay.
  final FocusNode _buttonFocusNode = FocusNode(debugLabel: 'Menu Button');
  AnimationStatus _animationStatus = AnimationStatus.dismissed;

  @override
  void dispose() {
    _buttonFocusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Center(
          child: CupertinoMenuAnchor(
            onAnimationStatusChanged: (AnimationStatus status) {
              // Since we are only checking the animation status when the button
              // is pressed, we don't need to call setState here.
              _animationStatus = status;
            },
            childFocusNode: _buttonFocusNode,
            menuChildren: <Widget>[
              CupertinoMenuItem(
                onPressed: () {},
                subtitle: const Text('Subtitle'),
                trailing: const Icon(CupertinoIcons.star),
                child: const Text('Menu Item'),
              ),
            ],
            builder:
                (
                  BuildContext context,
                  MenuController controller,
                  Widget? child,
                ) {
                  return CupertinoButton(
                    sizeStyle: CupertinoButtonSize.small,
                    focusNode: _buttonFocusNode,
                    onPressed: () {
                      if (_animationStatus.isForwardOrCompleted) {
                        controller.close();
                      } else {
                        controller.open();
                      }
                    },
                    child: const Icon(CupertinoIcons.ellipsis_vertical_circle),
                  );
                },
          ),
        ),
      ],
    );
  }
}

This example demonstrates a CupertinoMenuAnchor that wraps a button and shows a menu with three CupertinoMenuItems and one CupertinoMenuDivider.
link

To create a local project with this code sample, run:
flutter create --sample=cupertino.CupertinoMenuItem.2 mysample

See also:

  • CupertinoMenuAnchor, a Cupertino-style widget that shows a menu of actions in a popup
  • RawMenuAnchor, a lower-level widget that creates a region with a submenu that is the basis for CupertinoMenuAnchor.
  • PlatformMenuBar, which creates a menu bar that is rendered by the host platform instead of by Flutter (on macOS, for example).
Inheritance
Implemented types

Constructors

CupertinoMenuItem({Key? key, required Widget child, Widget? subtitle, Widget? leading, double? leadingWidth, AlignmentGeometry? leadingMidpointAlignment, Widget? trailing, double? trailingWidth, AlignmentGeometry? trailingMidpointAlignment, EdgeInsetsGeometry? padding, BoxConstraints? constraints, bool autofocus = false, FocusNode? focusNode, ValueChanged<bool>? onFocusChange, ValueChanged<bool>? onHover, VoidCallback? onPressed, WidgetStateProperty<BoxDecoration>? decoration, WidgetStateProperty<MouseCursor>? mouseCursor, HitTestBehavior behavior = HitTestBehavior.opaque, bool requestCloseOnActivate = true, bool requestFocusOnHover = true, bool isDestructiveAction = false})
Creates a CupertinoMenuItem
const

Properties

autofocus bool
True if this widget will be selected as the initial focus when no other node in its scope is currently focused.
final
behavior HitTestBehavior
How the menu item should respond to hit tests.
final
child Widget
The widget displayed in the center of this button.
final
constraints BoxConstraints?
The BoxConstraints to apply to the menu item.
final
decoration WidgetStateProperty<BoxDecoration>?
The decoration to paint behind the menu item.
final
focusNode FocusNode?
An optional focus node to use as the focus node for this widget.
final
hashCode int
The hash code for this object.
no setterinherited
isDestructiveAction bool
Whether pressing this item will perform a destructive action
final
isDivider bool
Whether this menu item is a divider.
no setteroverride
key Key?
Controls how one widget replaces another widget in the tree.
finalinherited
leading Widget?
The widget shown before the label. Typically an Icon.
final
leadingMidpointAlignment AlignmentGeometry?
The alignment of the center point of the leading widget within the leadingWidth of the menu item.
final
leadingWidth double?
The horizontal space in which the leading widget can be placed.
final
mouseCursor WidgetStateProperty<MouseCursor>?
The mouse cursor to display on hover.
final
onFocusChange ValueChanged<bool>?
Handler called when the focus changes.
final
onHover ValueChanged<bool>?
Triggered when a pointer moves into a position within this widget without buttons pressed.
final
onPressed VoidCallback?
Called when this menu is tapped or otherwise activated.
final
padding EdgeInsetsGeometry?
The padding applied to this menu item.
final
requestCloseOnActivate bool
Determines if the menu will be closed when a CupertinoMenuItem is pressed.
final
requestFocusOnHover bool
Whether hovering should request focus for this widget.
final
runtimeType Type
A representation of the runtime type of the object.
no setterinherited
subtitle Widget?
A widget displayed underneath the child. Typically a Text widget.
final
trailing Widget?
The widget shown after the label. Typically an Icon.
final
trailingMidpointAlignment AlignmentGeometry?
The alignment of the center point of the trailing widget within the trailingWidth of the menu item.
final
trailingWidth double?
The horizontal space in which the trailing widget can be placed.
final

Methods

build(BuildContext context) Widget
Describes the part of the user interface represented by this widget.
override
createElement() StatelessElement
Creates a StatelessElement to manage this widget's location in the tree.
inherited
debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
override
hasLeading(BuildContext context) bool
Whether this menu item has a leading widget.
override
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a one-line detailed description of the object.
inherited
toStringShort() String
A short, textual description of this widget.
inherited

Operators

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

Constants

kDefaultDecoration → const WidgetStateProperty<BoxDecoration>
The decoration of a CupertinoMenuItem when pressed.