Flutter如何在IconButton组件旁创建迷你模态弹窗？

直接使用Flutter官方内置的Material菜单组件即可，无需引入任何第三方依赖，默认就支持在触发控件相邻位置弹出模态菜单，自动适配屏幕边界、点击外部自动关闭，和你需要的效果完全匹配。

优先选PopupMenuButton（最省事，覆盖绝大多数场景） #

这个组件是官方专门为这类三点操作菜单设计的封装，默认自带三点图标，也支持自定义图标，点击后自动计算位置弹出菜单，代码示例：

PopupMenuButton<String>(
  icon: const Icon(Icons.more_horiz),
  onSelected: (value) {
    // 处理菜单项点击事件
    if (value == 'edit') {
      // 执行编辑逻辑
    } else if (value == 'delete') {
      // 执行删除逻辑
    }
  },
  itemBuilder: (context) => const [
    PopupMenuItem(value: 'edit', child: Text('编辑')),
    PopupMenuItem(value: 'delete', child: Text('删除')),
  ],
)

你可以通过shape、color、elevation等参数自定义弹窗的圆角、背景色、阴影，完全还原设计稿样式。

如果你要保留现有IconButton的自定义逻辑，手动调用showMenu #

如果你需要在点击图标时先执行其他逻辑、再弹出菜单，可以给你的IconButton绑定一个GlobalKey获取自身位置，再调用showMenu手动控制弹窗弹出：

// 在对应State类中声明key
final GlobalKey _moreBtnKey = GlobalKey();

// 替换你原来的IconButton代码
IconButton(
  key: _moreBtnKey,
  icon: const Icon(Icons.more_horiz),
  onPressed: () {
    // 先执行你需要的前置逻辑
    // 获取按钮的位置和尺寸
    final renderBox = _moreBtnKey.currentContext!.findRenderObject() as RenderBox;
    final btnOffset = renderBox.localToGlobal(Offset.zero);
    final btnSize = renderBox.size;

    showMenu(
      context: context,
      // 锚定按钮位置，框架会自动处理上下方向的边界溢出
      position: RelativeRect.fromLTRB(
        btnOffset.dx,
        btnOffset.dy + btnSize.height,
        btnOffset.dx + btnSize.width,
        0,
      ),
      items: const [
        PopupMenuItem(value: 'edit', child: Text('编辑')),
        PopupMenuItem(value: 'delete', child: Text('删除')),
      ],
    ).then((selected) {
      if (selected != null) {
        // 处理选中事件
      }
    });
  },
)

不推荐自己从零写Overlay、监听外部点击来实现弹窗，官方组件已经处理了所有边界适配、无障碍、焦点、模态遮罩的细节，稳定性和性能都更好。如果需要完全自定义弹窗内容而非标准菜单项，只需要把showMenu的items替换成自定义Widget，或者用showDialog配合Align设置位置即可。

内容的提问来源于stack exchange，提问作者Milos N.