showMenu position Flutter - flutter

Question

i have a GridView Widget that contain some GridTiles that are wrapped with GestureDetector trying to showUp a menu to delete the GridTile when i have longPress on it ,,, everything is fine except that i want that menu to be shown from the point that i have clicked into not at the top of the app
showMenu(
context: context,
position: ..........,// Here i want the solution
items: [
PopupMenuItem(
child: FlatButton.icon(
onPressed: () {
_notesProv.deleteNote(id);
Navigator.of(context).pop();
},
icon: Icon(
Icons.delete,
color: Colors.black,
),
label: Text(
'delete note',
style: TextStyle(color: Colors.black),
),
),
),
],
color: Colors.green[100],
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
));

Answer 1

See comments in the code for guidance on what's going on.
Wherever there's a comment, that code was added to the example Gridview stolen from Flutter official cookbook in order to pop up the menu where you tapped.
class GridPositionPage extends StatefulWidget {
#override
_GridPositionPageState createState() => _GridPositionPageState();
}
class _GridPositionPageState extends State<GridPositionPage> {
// ↓ hold tap position, set during onTapDown, using getPosition() method
Offset tapXY;
// ↓ hold screen size, using first line in build() method
RenderBox overlay;
#override
Widget build(BuildContext context) {
// ↓ save screen size
overlay = Overlay.of(context).context.findRenderObject();
return BaseExamplePage(
title: 'Grid Position',
child: GridView.count(
crossAxisCount: 2,
children: List.generate(100, (index) {
return Center(
child: InkWell(
child: Text(
'Item $index',
style: Theme.of(context).textTheme.headline5,
),
// ↓ save screen tap position now
onTapDown: getPosition,
onLongPress: () => showMenu(
context: context,
position: relRectSize,
items: [
PopupMenuItem(
child: FlatButton.icon(
label: Text('Delete'),
icon: Icon(Icons.delete),
),
)
]
),
),
);
}),
),
);
}
// ↓ create the RelativeRect from size of screen and where you tapped
RelativeRect get relRectSize => RelativeRect.fromSize(tapXY & const Size(40,40), overlay.size);
// ↓ get the tap position Offset
void getPosition(TapDownDetails detail) {
tapXY = detail.globalPosition;
}
}

Answer 2

This function handles everything, you just need to use the findRenderObject method to get the RenderObject on each grid item:
void showGridMenu() async {
Rect? rect;
RenderBox? overlay = Overlay.of(context).context.findRenderObject() as RenderBox;
final renderObject = context.findRenderObject();
final translation = renderObject?.getTransformTo(null).getTranslation();
if (translation != null && renderObject?.paintBounds != null) {
final offset = Offset(translation.x, translation.y);
rect = renderObject!.paintBounds.shift(offset);
}
if (rect != null) {
var value = await showMenu<String>(
context: context,
position: RelativeRect.fromRect(
rect,
Offset.zero & overlay.size,
),
items: [
const PopupMenuItem(value: 'yes', child: Text('Yes')),
const PopupMenuItem(value: 'no', child: Text('No')),
],
);
if (value != null) {
debugPrint(value);
}
}
}

Answer 3

position: RelativeRect.fromSize(
Rect.fromCenter(
center: Offset.zero, width: 100, height: 100),
Size(100, 100),
),
Somthing like that