CupertinoMenuAnchor class

A widget used to mark the "anchor" for a menu, defining the rectangle used to position the menu, which can be done with an explicit location, or with an alignment.

The CupertinoMenuAnchor is typically used to wrap a button that opens a menu when pressed. The menu is displayed as a popup overlay that is positioned relative to the anchor rectangle, and will automatically reposition itself to remain fully visible within the screen bounds.

A MenuController must be used to open and close the menu, and can be obtained from the builder callback, or provided to controller parameter. Calling MenuController.open will open the menu, and calling MenuController.close will close the menu. The onOpen callback is invoked when the menu popup is mounted and the menu status changes from AnimationStatus.dismissed. The onClose callback is invoked when the menu popup is unmounted and the menu status changes to AnimationStatus.dismissed. The onAnimationStatusChanged callback is invoked every time the AnimationStatus of the menu animation changes.

Usage

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.CupertinoMenuAnchor.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.CupertinoMenuAnchor.2 mysample

See also:

Inheritance

Constructors

CupertinoMenuAnchor({Key? key, MenuController? controller, VoidCallback? onOpen, VoidCallback? onClose, CupertinoMenuAnimationStatusChangedCallback? onAnimationStatusChanged, BoxConstraints? constraints, bool constrainCrossAxis = false, bool consumeOutsideTaps = false, bool enableSwipe = true, bool enableLongPressToOpen = false, bool useRootOverlay = false, EdgeInsetsGeometry overlayPadding = const EdgeInsets.all(8), required List<Widget> menuChildren, RawMenuAnchorChildBuilder? builder, Widget? child, FocusNode? childFocusNode})
Creates a CupertinoMenuAnchor.
const

Properties

builder RawMenuAnchorChildBuilder?
The widget that this CupertinoMenuAnchor surrounds.
final
child Widget?
An optional child to be passed to the builder.
final
childFocusNode FocusNode?
The childFocusNode attribute is the optional FocusNode also associated the child or builder widget that opens the menu.
final
constrainCrossAxis bool
Whether the menu's cross axis should be constrained by the overlay.
final
constraints BoxConstraints?
The constraints to apply to the menu scrollable.
final
consumeOutsideTaps bool
Whether or not a tap event that closes the menu will be permitted to continue on to the gesture arena.
final
controller MenuController?
An optional controller that allows opening and closing of the menu from other widgets.
final
enableLongPressToOpen bool
Whether or not the menu should open in response to a long-press on the anchor.
final
enableSwipe bool
Whether or not swiping is enabled on the menu.
final
hashCode int
The hash code for this object.
no setterinherited
key Key?
Controls how one widget replaces another widget in the tree.
finalinherited
A list of menu items to display in the menu.
final
onAnimationStatusChanged CupertinoMenuAnimationStatusChangedCallback?
An optional callback that is invoked when the AnimationStatus of the menu changes.
final
onClose VoidCallback?
A callback that is invoked when the menu finishes closing.
final
onOpen VoidCallback?
A callback that is invoked when the menu begins opening.
final
overlayPadding EdgeInsetsGeometry
The padding inside the overlay between its boundary and the menu content.
final
runtimeType Type
A representation of the runtime type of the object.
no setterinherited
useRootOverlay bool
Whether the menu panel should be rendered in the root Overlay.
final

Methods

createElement() StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() State<CupertinoMenuAnchor>
Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
override
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
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

Static Methods

maybeHasLeadingOf(BuildContext context) bool?
Returns whether any ancestor CupertinoMenuAnchor has menu items with leading widgets.