Cupertino Context Menu In Flutter

Abhishek Rathore

28 April 2023

In this blog, we will learn about Cupertino Context Menu In Flutter and how they help us create an interactive user Interface for the Flutter application.

It is basically a full-screen modal route that opens when the child is long-pressed.

Read more about Flutter app development services from mobikul.

Code Snippet

We will use the following code snippets for making the demo for elaborating the working of the Cupertino Context Menu.

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      theme: CupertinoThemeData(brightness: Brightness.light),
      home: MainClass(),
    );
  }
}

class MyApp extends StatelessWidget {

const MyApp({super.key});

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return const CupertinoApp(

theme: CupertinoThemeData(brightness: Brightness.light),

home: MainClass(),

);

}

2. Creating Main UI

We can create the UI as per our needs. We have just created a simple demo for explaining and understanding the Cupertino Context Menu.

@override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text('Cupertino ContextMenu2342'),
      ),
      child: Center(
        child: SizedBox(
          width: 100,
          height: 100,
          child: CupertinoContextMenu(
            actions: <Widget>[
              CupertinoContextMenuAction(
                onPressed: () {
                  Navigator.pop(context);
                },
                trailingIcon: CupertinoIcons.heart,
                child: const Text('Favorite'),
              ),
              CupertinoContextMenuAction(
                onPressed: () {
                  Navigator.pop(context);
                },
                isDestructiveAction: true,
                trailingIcon: CupertinoIcons.delete,
                child: const Text('Delete'),
              ),
            ],
            child: Container(
              child: OutlinedButton(
                onPressed: () {

                },
                child: const Text('Click Me'),
              ),
            ),
          ),
        ),
      ),
    );
  }

@override

Widget build(BuildContext context) {

return CupertinoPageScaffold(

navigationBar: const CupertinoNavigationBar(

middle: Text('Cupertino ContextMenu2342'),

child: Center(

child: SizedBox(

width: 100,

height: 100,

child: CupertinoContextMenu(

actions: <Widget>[

CupertinoContextMenuAction(

onPressed: () {

Navigator.pop(context);

trailingIcon: CupertinoIcons.heart,

child: const Text('Favorite'),

CupertinoContextMenuAction(

onPressed: () {

Navigator.pop(context);

isDestructiveAction: true,

trailingIcon: CupertinoIcons.delete,

child: const Text('Delete'),

child: Container(

child: OutlinedButton(

onPressed: () {

child: const Text('Click Me'),

);

}

In the above code, we just create 2 options menus to demonstrate, how we can use the Cupertino ContextMenu in our flutter application.

NOTE:

1. CupertinoContextMenu -> Simply displays the child as if the CupertinoContextMenu were not there

2. It has the following arguments in its constructor
1. actions -> The actions that are shown in the menu.
2. child -> The widget that can be “opened” with the CupertinoContextMenu
3. previewbuilder -> A function that returns an alternative widget to show when the CupertinoContextMenu is open.

Output

Conclusion

In this blog, we have learned about the implementation of the Cupertino Context Menu In Flutter.

For more information regarding the same, you can check this Reference Link

Thanks for reading!!