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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
@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!!
Be the first to comment.