Flutter Cupertino Context Menu
Cupertino context menu is a widget in flutter used to display ios style context menu or popup menu. It is also called an overflow menu. A CupertinoContextMenu widget displays a child which on long press will display the context menu with actions for that child. It comes in handy while we have to display more options for a widget in a small space. We can dismiss the menu in two ways. One is by tapping the background of the overlay that appears when the menu is displayed. The second method is by using Navigator.pop function inside onPressed callback of CupertinoMenuAction widget.
Don’t know what Cupertino is? it is nothing but a set of flutter widgets that follow the ios design pattern. These widgets are designed to implement ios features in flutter apps built for the ios platform.
In this tutorial, we will learn how to use cupertino context menu in flutter with example. We will also learn how to customize the widget using different properties.
If you are building apps for the android platform consider using a material design popup menu in flutter instead.
How To Create Cupertino Context Menu In flutter?
To create a cupertino context menu in flutter we have to call the constructor of CupertinoContextMenu class and provide the required properties. The cupertino context menu has two required properties child and actions. The child accepts widget as value. For actions, we can use any widget but generally, will use CupertinoContextMenuAction widgets.
Flutter Cupertino Context Menu Constructor:
CupertinoContextMenu(
{Key? key,
required List<Widget> actions,
required Widget child,
ContextMenuPreviewBuilder? previewBuilder}
)
Flutter Cupertion Context Menu Properties
The properties of a cupertino context menu are:
- child
- actions
- previewBuilder
child
We will use this property to display a widget for which we will show our cupertino context menu. It takes any widget as value.
body:Container(
margin: EdgeInsets.all(40),
alignment: Alignment.topCenter,
child:CupertinoContextMenu(
child:Image.asset("assets/images/shape_of_you.png"),
actions:[
CupertinoContextMenuAction(
....
),
CupertinoContextMenuAction(
...
)
],
)
),
Output:
actions
We will use this property to display actions or items for our cupertino context menu. It will accept a list of widgets as value. But generally we will use CupertinoContextMenuAction widgets for this list.
body:Container(
margin: EdgeInsets.all(40),
alignment: Alignment.topCenter,
child:CupertinoContextMenu(
child:Image.asset("assets/images/shape_of_you.png", fit: BoxFit.cover,),
actions:[
CupertinoContextMenuAction(
child:Text("Save to device"),
onPressed: (){
Navigator.of(context).pop();
},
),
CupertinoContextMenuAction(
child: Text("Delete"),
onPressed: (){
Navigator.of(context).pop();
},
isDestructiveAction: true,
)
],
)
),
Output:
previewBuilder
The cupertino context menu appears with a preview of the child when we long press the child. We will use this property if we want to change the look of the child that appears in preview. Let’s change the child’s size in preview in the below example.
body:Container(
margin: EdgeInsets.all(40),
child:CupertinoContextMenu(
child:Image.asset("assets/images/shape_of_you.png", fit: BoxFit.cover,),
actions:[
CupertinoContextMenuAction(
child:Text("Save to device"),
onPressed: (){
Navigator.of(context).pop();
},
),
CupertinoContextMenuAction(
child: Text("Delete"),
onPressed: (){
Navigator.of(context).pop();
},
isDestructiveAction: true,
)
],
previewBuilder: (context, animation, child) {
return Image.asset(
'assets/images/shape_of_you.png',
height: 200,
width: 200,
);
},
),
)
Output:
Flutter Cupertino Context Menu Example
Let’s create an example where we will implement cupertino context menu in flutter. In this example we will display an image for which the context menu will appear. We will display the menu with three actions share, save to gallery, and delete. When we long press the image we will increase the image size to fit the screen using previewBuilder.
Let’s create a cupertino context menu with the image as a child and three actions using CupertinoContextMenuAction widgets.
CupertinoContextMenu(
child:Image.asset("assets/images/shape_of_you.png", fit: BoxFit.fill,),
actions:[
CupertinoContextMenuAction(
child:Text("Share"),
onPressed: (){
Navigator.of(context).pop();
},
trailingIcon: CupertinoIcons.share,
),
CupertinoContextMenuAction(
child:Text("Save To Gallery"),
onPressed: (){
Navigator.of(context).pop();
},
isDefaultAction: true,
trailingIcon: CupertinoIcons.down_arrow,
),
CupertinoContextMenuAction(
child: Text("Delete"),
onPressed: (){
Navigator.of(context).pop();
},
isDestructiveAction: true,
trailingIcon: CupertinoIcons.delete,
)
],
),
Now that we have finished creating actions let’s add trailing icons for them. We can add icons to the actions using the trailingIcon property of the CupertinoContextMenuAction widget.
CupertinoContextMenuAction(
child:Text("Share"),
onPressed: (){
Navigator.of(context).pop();
},
trailingIcon: CupertinoIcons.share,
),
I’ve highlighted the second option (save to gallery) by setting isDefaultAction property to true.
CupertinoContextMenuAction(
child:Text("Save To Gallery"),
onPressed: (){
Navigator.of(context).pop();
},
isDefaultAction: true,
trailingIcon: CupertinoIcons.down_arrow,
),
For delete action, I’ve set isDestructiveAction property to true. This will make the text and icon red indicating to the user that it is a destructive action.
CupertinoContextMenuAction(
child: Text("Delete"),
onPressed: (){
Navigator.of(context).pop();
},
isDestructiveAction: true,
trailingIcon: CupertinoIcons.delete,
)
Let’s write the code for increasing the image size when the image is in preview mode using previewBuilder.
previewBuilder: (context, animation, child) {
return Container(
height: double.infinity,
width: double.infinity,
child: Image.asset(
'assets/images/shape_of_you.png',
fit: BoxFit.cover,
),
);
},0
Complete Code:
Now let’s sum up the above code snippets to complete our cupertino context menu example. Create a new flutter project and replace the code in main.dart file with the code below.
import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main()
{
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Learning',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home:MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState()
{
return _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage> {
double value = 0;
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text("Flutter Cupertino Context Menu"),
),
body:Container(
margin: EdgeInsets.all(40),
width: double.infinity,
child:CupertinoContextMenu(
child:Image.asset("assets/images/shape_of_you.png", fit: BoxFit.fill,),
actions:[
CupertinoContextMenuAction(
child:Text("Share"),
onPressed: (){
Navigator.of(context).pop();
},
trailingIcon: CupertinoIcons.share,
),
CupertinoContextMenuAction(
child:Text("Save To Gallery"),
onPressed: (){
Navigator.of(context).pop();
},
trailingIcon: CupertinoIcons.down_arrow,
),
CupertinoContextMenuAction(
child: Text("Delete"),
onPressed: (){
Navigator.of(context).pop();
},
isDestructiveAction: true,
trailingIcon: CupertinoIcons.delete,
)
],
previewBuilder: (context, animation, child) {
return Container(
height: double.infinity,
width: double.infinity,
child: Image.asset(
'assets/images/shape_of_you.png',
fit: BoxFit.cover,
),
);
},
),
)
);
}
}
Output:
That’s all about the tutorial on how to create & use cupertino context menu in flutter. We have also seen an example where we have used the CupertinoContextMeu widget to display the context menu or overflow menu. Let’s catch up with some other widget in the next post. Have a great day !!
Do like & share my Facebook page. Subscribe to the newsletter if you find this post helpful. Thank you !!
Reference: Flutter Official Documentation.
Leave a Reply