Flutter中showDialog如何将弹窗定位到点击位置下方？

当然可以实现，默认的showDialog确实是居中显示，但我们可以通过两种常见方式实现弹窗定位到点击组件的下方：

方法一：使用OverlayEntry（完全自定义弹窗） #

这种方式可以完全控制弹窗的位置和样式，适合需要自定义内容的场景：

1. 给点击组件绑定GlobalKey，用来获取它的屏幕位置信息：

final GlobalKey _targetKey = GlobalKey();

2. 点击组件的代码：

GestureDetector(
  key: _targetKey,
  onTap: () => _showPositionedDialog(context),
  child: Container(
    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
    color: Colors.blue[100],
    child: const Text('点击我弹出下方弹窗'),
  ),
)

3. 实现弹窗显示逻辑：

void _showPositionedDialog(BuildContext context) {
  // 获取目标组件的渲染信息
  final RenderBox targetBox = _targetKey.currentContext!.findRenderObject() as RenderBox;
  final Offset targetOffset = targetBox.localToGlobal(Offset.zero);
  final Size targetSize = targetBox.size;
  final screenSize = MediaQuery.of(context).size;

  // 计算弹窗位置：与目标组件左对齐，下方留出8px间距
  double left = targetOffset.dx;
  double top = targetOffset.dy + targetSize.height + 8;

  // 处理弹窗超出屏幕边界的情况（比如右侧超出时调整left）
  const dialogWidth = 220.0;
  if (left + dialogWidth > screenSize.width) {
    left = screenSize.width - dialogWidth;
  }

  // 创建OverlayEntry
  final overlayEntry = OverlayEntry(
    builder: (context) => Positioned(
      left: left,
      top: top,
      child: Material(
        elevation: 6,
        borderRadius: BorderRadius.circular(8),
        child: Container(
          width: dialogWidth,
          padding: const EdgeInsets.all(16),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text('自定义弹窗标题'),
              const SizedBox(height: 12),
              const Text('这是位于点击组件下方的弹窗内容'),
              const SizedBox(height: 16),
              Align(
                alignment: Alignment.centerRight,
                child: TextButton(
                  onPressed: () => overlayEntry.remove(),
                  child: const Text('关闭'),
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  );

  // 将弹窗添加到Overlay层
  Overlay.of(context)!.insert(overlayEntry);

  // 点击弹窗外部关闭弹窗
  Future.delayed(Duration.zero, () {
    GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () => overlayEntry.remove(),
    ).onTapDown!(const TapDownDetails(), () {});
  });
}

方法二：使用showMenu（快速实现菜单式弹窗） #

如果你的弹窗是菜单样式，showMenu可以快速实现定位到组件下方的效果：

void _showMenuBelowWidget(BuildContext context) {
  final RenderBox targetBox = _targetKey.currentContext!.findRenderObject() as RenderBox;
  final Offset targetOffset = targetBox.localToGlobal(Offset.zero);
  final Size targetSize = targetBox.size;
  final screenSize = MediaQuery.of(context).size;

  showMenu(
    context: context,
    // 设置弹窗相对目标组件的位置
    position: RelativeRect.fromLTRB(
      targetOffset.dx,
      targetOffset.dy + targetSize.height,
      screenSize.width - targetOffset.dx - targetSize.width,
      screenSize.height - targetOffset.dy - targetSize.height,
    ),
    elevation: 4,
    items: const [
      PopupMenuItem(value: 1, child: Text('选项一')),
      PopupMenuItem(value: 2, child: Text('选项二')),
      PopupMenuItem(value: 3, child: Text('选项三')),
    ],
  );
}

注意事项 #

• 确保GlobalKey正确绑定到点击的组件，避免currentContext为空。
• 计算位置时要考虑屏幕边界，防止弹窗超出可视区域。
• 使用OverlayEntry时，记得在不需要弹窗时调用remove()方法清理资源。

内容的提问来源于stack exchange，提问作者Davout