I have a little question about mobile application development that I hope you can help me answer. That is when you press and hold on a conversation on messenger, the screen behind it dims and it displays a prominent window with a toolbar below having options such as delete or archive or similar. It’s similar to dropping a reaction into the message. I wonder what that event is called and how to do it with the flutter language. I hope someone will answer this question for me. Thanks guys !
I try many time to search that but not work
A example of how you can implement it
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Long Press Example'),
),
body: Center(
child: GestureDetector(
onLongPress: () {
_showPopupMenu(context);
},
child: Container(
width: 200,
height: 200,
color: Colors.blue,
child: Center(
child: Text(
'Long Press Me',
style: TextStyle(color: Colors.white),
),
),
),
),
),
);
}
void _showPopupMenu(BuildContext context) {
final RenderBox overlay = Overlay.of(context).context.findRenderObject();
final RenderBox box = context.findRenderObject();
final RelativeRect position = RelativeRect.fromRect(
Rect.fromPoints(
box.localToGlobal(Offset.zero, ancestor: overlay),
box.localToGlobal(box.size.bottomRight(Offset.zero), ancestor: overlay),
),
Offset.zero & overlay.size,
);
showMenu(
context: context,
position: position,
items: <PopupMenuEntry>[
PopupMenuItem(
child: Text('Option 1'),
value: 'option1',
),
PopupMenuItem(
child: Text('Option 2'),
value: 'option2',
),
],
);
}
}
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Long Press Example'),
),
body: Center(
child: LongPressWidget(),
),
),
);
}
}
class LongPressWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GestureDetector(
onLongPress: () {
// Show your contextual menu or perform any action here
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Options'),
content: Text('Delete or Archive'),
actions: <Widget>[
TextButton(
onPressed: () {
// Perform delete action
Navigator.of(context).pop();
},
child: Text('Delete'),
),
TextButton(
onPressed: () {
// Perform archive action
Navigator.of(context).pop();
},
child: Text('Archive'),
),
],
);
},
);
},
child: Container(
width: 200,
height: 200,
color: Colors.blue,
child: Center(
child: Text(
'Long Press Me',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
);
}
}