Flutter中如何在Popover内展示Widget并自定义内容？

你需要的是能自由嵌套Column并填充子元素的Popover，第三方包不好用的话，直接用Flutter原生的OverlayEntry就能灵活实现，完全自定义内容和样式：

示例代码 #

class CustomColumnPopover extends StatelessWidget {
  const CustomColumnPopover({super.key});

  @override
  Widget build(BuildContext context) {
    // 触发Popover的按钮，可替换成你的自定义组件
    return GestureDetector(
      onTap: () => _showCustomPopover(context),
      child: const Padding(
        padding: EdgeInsets.all(8.0),
        child: Text('打开Popover'),
      ),
    );
  }

  void _showCustomPopover(BuildContext context) {
    final renderBox = context.findRenderObject() as RenderBox;
    final buttonOffset = renderBox.localToGlobal(Offset.zero);
    final buttonSize = renderBox.size;

    final overlayEntry = OverlayEntry(
      builder: (context) => Positioned(
        // 控制Popover相对于触发按钮的位置
        left: buttonOffset.dx,
        top: buttonOffset.dy + buttonSize.height + 10,
        child: Material(
          elevation: 6,
          borderRadius: BorderRadius.circular(12),
          child: Container(
            width: 220,
            padding: const EdgeInsets.symmetric(vertical: 8),
            // 这里直接嵌套Column，按需添加任意子组件
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                _buildPopoverItem(Icons.share, '分享', () => overlayEntry.remove()),
                const Divider(height: 1, indent: 16, endIndent: 16),
                _buildPopoverItem(Icons.copy, '复制链接', () => overlayEntry.remove()),
                const Divider(height: 1, indent: 16, endIndent: 16),
                _buildPopoverItem(Icons.delete, '删除', () => overlayEntry.remove()),
              ],
            ),
          ),
        ),
      ),
    );

    Overlay.of(context).insert(overlayEntry);

    // 点击外部关闭Popover
    Future.delayed(Duration.zero, () {
      Overlay.of(context).insert(OverlayEntry(
        builder: (context) => GestureDetector(
          onTap: () => overlayEntry.remove(),
          behavior: HitTestBehavior.opaque,
        ),
      ));
    });
  }

  Widget _buildPopoverItem(IconData icon, String text, VoidCallback onTap) {
    return ListTile(
      leading: Icon(icon, size: 20),
      title: Text(text, style: const TextStyle(fontSize: 14)),
      onTap: onTap,
      contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
    );
  }
}

方案说明 #

• 用OverlayEntry直接在Overlay层插入自定义组件，完全不受第三方包的限制
• 可以精准控制Popover的弹出位置，适配不同的触发按钮
• Column里可以自由添加任何子组件（文本、图标、输入框等），样式完全自定义
• 额外添加了点击外部关闭的逻辑，符合常规交互习惯

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