showMenu position 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

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

Somthing like that