I'm using an icon widget and I want that when I press on the icon to jump to another place (Like a call icon), and an option to open another widget when I press on the icon (like the three dots icon), my problem was that in the flutter icon widget there is no onlongpress... any sample code that may help on doing that?
this is my code for now:
child: ListTile(
leading: CircleAvatar(
radius: 25.0,
backgroundColor: Colors.brown,
),
title: Text(helpRequest.category),
subtitle: Text(helpRequest.description),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
IconButton(
icon: Icon(
Icons.call,
size: 20.0,
color: Colors.brown[900],
),
onPressed: () {
},
),
IconButton(
icon: Icon(
Icons.more_vert,
size: 20.0,
color: Colors.brown[900],
),
onPressed: () {
},
),
],
),
),
Instead of using IconButton, wrap the Icon with GestureDetector which will give you both onLongPress as well as onTap (onPressed). Please see the code below -
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: const Text("Flutter Demo")),
body: MyStatefulWidget(),
),
);
}
}
class MyStatefulWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
Offset _tapPosition;
void _storePosition(TapDownDetails details) {
_tapPosition = details.globalPosition;
}
return ListTile(
leading: const CircleAvatar(
radius: 25.0,
backgroundColor: Colors.brown,
),
title: const Text("helpRequest.category"),
subtitle: const Text("helpRequest.description"),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
GestureDetector(
onTap: () => print("Tap: call"),
onLongPress: () => print("Long Press: Call"),
child: Icon(
Icons.call,
size: 20.0,
color: Colors.brown[900],
),
),
GestureDetector(
onTap: () => print("Tap: more_vert"),
onTapDown: _storePosition,
onLongPress: () async {
final RenderBox overlay =
Overlay.of(context).context.findRenderObject();
final int _selected = await showMenu(
items: [
PopupMenuItem(
value: 1,
child: Row(
children: <Widget>[
const Icon(Icons.delete),
const Text("Delete"),
],
),
),
PopupMenuItem(
value: 2,
child: Row(
children: <Widget>[
const Icon(Icons.edit),
const Text("Edit"),
],
),
)
],
context: context,
position: RelativeRect.fromRect(
_tapPosition &
const Size(40, 40), // smaller rect, the touch area
Offset.zero & overlay.size // Bigger rect, the entire screen
),
);
switch (_selected) {
case 1:
print("delete seleted");
break;
case 2:
print("edit seleted");
break;
}
},
child: Icon(
Icons.more_vert,
size: 20.0,
color: Colors.brown[900],
),
),
],
),
);
}
}
InkWell also has onLongpress param and with customBorder param as circleBorder, it will also work.
Is there a way that i can show a menu using showmenu widget in the onLongPress? I tried to implement it and it didn't work, the thing of implementing widget in widget it's not going well with me, can u just give me a tip of how I can do it in a easy way?
I've updated the code to display showmenu on LongPress of the Icons.more_vert icon. You can see Delete & Edit menu options. Further when you tap on any of these menu options a print statement can also be seen in console log. Please like and accept the answer if it helped you solve your problem.