CupertinoContextMenu Widget – Flutter Widget Guide By Flutter Agency

In this article, we will get into CupertinoContextMenu Widget.

What is CupertinoContextMenu Widget?

CupertinoContextMenu Widget is a full-screen modal route that opens when the child is long-pressed.

When open, the CupertinoContextMenu shows the child, or the widget returned by previewBuilder if given, in a large full-screen Overlay with a list of buttons specified by actions. The child/preview is placed in an Expanded Widget so that it will grow to fill the Overlay if its size is unconstrained.

When closed, the CupertinoContextMenu simply displays the child as if the CupertinoContextMenu were not there. Sizing and positioning are unaffected. The menu can be closed like other PopupRoutes, such as by tapping the background or by calling Navigator.pop(context). Unlike PopupRoute, it can also be closed by swiping downwards.

The Default Constructor of it will look like below:

CupertinoContextMenuWidget({
  Key key,
  @required List<Widget> actions,
  @required Widget child,
  ContextMenuPreviewBuilder previewBuilder,
});

In Above Constructor all attributes marked with @required must not be empty.

Properties :

• List<Widget> actions: It will specify the list of actions that we are going to display on the menu. We can this action typically CupertinoContextMenu Actions. This parameter must not be empty.
• Widget Child: The widget that can be “opened” with the CupertinoContextMenu.When the CupertinoContextMenu is long-pressed, the menu will open and this widget (or the widget returned by previewBuilder, if provided) will be moved to the new route and placed inside of an Expanded widget. This allows the child to resize to fit in its place in the new route if it doesn’t size itself. When the CupertinoContextMenu is “closed”, this widget acts like a Container, i.e. it does not constrain its child’s size or affect its position.
• previewBuilder: The previewBuilder parameter is most commonly used to display a slight variation of the child. See previewBuilder for an example of rounding the child’s corners and allowing its aspect ratio to expand, similar to the Photos app on iOS.

How to use CupertinoContextMenu Widget in Flutter?

The following code snippet tells us how to implement CupertinoContextMenu Widget in Flutter.

Let’s understand the same with the help of an example. Consider a code snippet like below:

Container(
        child: CupertinoContextMenu(
      child: Container(
        width: 100,
        height: 60,
        color: Colors.red,
      ),
      actions: <Widget>[
        CupertinoContextMenuAction(
          child: const Text('Action one'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
        CupertinoContextMenuAction(
          child: const Text('Action two'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ],
    ));

The above code will give us output like below:

CupertinoContextMenu Widget

When the user long presses on red Container it will get a menu item like below.

CupertinoContextMenu Widget

Conclusion:

In this article, we have been through What is CupertinoContextMenu Widget in Flutter along with how to implement it in a Flutter.

Thanks for reading !!!

Keep Fluttering !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.