Cupertino Context Menu In Flutter
CupertinoContextMenu is a full-screen modular course that opens when the child is for quite some time squeezed. At the point when open, the CupertinoContextMenu shows the child, or the widget returned by previewBuilder whenever given, in an enormous full-screen Overlay with a list of buttons determined by activities. The child/preview is put in an Expanded Widget so it will develop to fill the Overlay assuming its size is unconstrained.
This blog will explore the Cupertino Context Menu In Flutter. We perceive how to execute a demo program. We are going to learn about how we can utilize CupertinoContextMenu and how to customize the style of Cupertino tabBar using various properties in your flutter applications.
CupertinoContextMenu class – cupertino library – Dart API
A full-screen modal route that opens when the child is long-pressed. When open, the CupertinoContextMenu shows the…api. flutter.dev
Table Of Contents::
Introduction:
Cupertino context menu is a flutter used to show an ios style context menu or popup menu. It is additionally called an overflow menu. A CupertinoContextMenu widget shows a display that on lengthy press will show the context menu with activities for that child. It proves to be useful when we need to show more choices for a child in a little space.
We can excuse the menu in two ways. One is by tapping the background of the overlay that seems when the menu is shown. The subsequent technique is by utilizing the Navigator. pop capability inside onPressed callback of CupertinoMenuAction widget.
Demo Module ::
This demo video shows how to create a Cupertino context menu in a flutter and shows how a Cupertino context menu will work in your flutter applications. We will show an image on the screen. When the user tap on this image then, the menu will pop up. It will be shown on your device.
Constructor:
To utilize CupertinoContextMenu, you need to call the constructor underneath:
CupertinoContextMenu({
Key? key,
required this.actions,
required this.child,
this.previewBuilder,
})
To make a Cupertino setting menu in flutter we need to call the constructor of CupertinoContextMenu class and give the required properties. The Cupertino context menu has two required properties child and actions. The child acknowledges the widget as value. For actions, we can utilize any actions yet, for the most part, will utilize CupertinoContextMenuAction actions.
Properties:
There are some properties of CupertinoContextMenu are:
- > child — This property is utilized to show a widget for which we will show our Cupertino setting menu. It accepts any widget as a value.
- > actions — This property is used to show actions or items for our Cupertino setting menu. It will acknowledge a list of widgets as value. Be that as it may, by and large, we will involve CupertinoContextMenuAction widgets for this list.
- > previewBuilder — This property is used in the Cupertino context menu that 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 the preview.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
We should make a model where we will execute the Cupertino context menu in a flutter. In this model, we will show a picture for which the context menu will show up. We will show the menu with three actions share, save to gallery, and delete. At the point when we long-press the picture, we will expand the picture size to fit the screen utilizing previewBuilder.
Center(
child: Container(
margin: const EdgeInsets.all(40),
width: double.infinity,
child:CupertinoContextMenu(
actions:[
CupertinoContextMenuAction(
onPressed: (){
Navigator.of(context).pop();
},
trailingIcon: CupertinoIcons.share,
child:const Text("Share"),
),
CupertinoContextMenuAction(
onPressed: (){
Navigator.of(context).pop();
},
trailingIcon: CupertinoIcons.down_arrow,
child:const Text("Save To Gallery"),
),
CupertinoContextMenuAction(
onPressed: (){
Navigator.of(context).pop();
},
isDestructiveAction: true,
trailingIcon: CupertinoIcons.delete,
child: const Text("Delete"),
)
],
child:Image.asset("assets/logo.png",),
),
),
)
Now, we will write a code for previewBuilder. It is increasing the image size when the image is in preview mode.
previewBuilder: (context, animation, child) {
return SizedBox(
height: double.infinity,
width: double.infinity,
child: Image.asset(
'assets/logo.png',
height: 200,width: 300,
),
);
},
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_cupertino_context_menu_demo/splash_screen.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.pink,
),
debugShowCheckedModeBanner: false,
home: const Splash(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() {
return _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Flutter Cupertino Context Menu Demo"),
centerTitle: true,
automaticallyImplyLeading: false,
),
body: Center(
child: Container(
margin: const EdgeInsets.all(40),
width: double.infinity,
child: CupertinoContextMenu(
actions: [
CupertinoContextMenuAction(
onPressed: () {
Navigator.of(context).pop();
},
trailingIcon: CupertinoIcons.share,
child: const Text("Share"),
),
CupertinoContextMenuAction(
onPressed: () {
Navigator.of(context).pop();
},
trailingIcon: CupertinoIcons.down_arrow,
child: const Text("Save To Gallery"),
),
CupertinoContextMenuAction(
onPressed: () {
Navigator.of(context).pop();
},
isDestructiveAction: true,
trailingIcon: CupertinoIcons.delete,
child: const Text("Delete"),
)
],
previewBuilder: (context, animation, child) {
return SizedBox(
height: double.infinity,
width: double.infinity,
child: Image.asset(
'assets/logo.png',
height: 200,
width: 300,
),
);
},
child: Image.asset(
"assets/logo.png",
),
),
),
));
}
}
Conclusion:
In the article, I have explained the Cupertino Context Menu basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Cupertino Context Menu On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying the Cupertino Context Menu in your flutter projects. We will show you what the Introduction is and what are the construction and properties of the Cupertino Context Menu, and make a demo program for working with Cupertino Context Menu in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
