如何在Flutter中创建可自定义且定位精准的Dropdown Widget

直接用Stack + Positioned + GlobalKey就能解决你的问题，既支持完全自定义下拉容器，又能精准定位到点击的Widget位置，具体实现如下：

核心思路 #

1. 用GlobalKey绑定点击目标Widget，点击时获取它在屏幕上的准确坐标
2. 将全局坐标转换为Stack组件内的局部坐标，用Positioned把自定义Dropdown精准摆到对应位置
3. 用GestureDetector处理点击事件，控制Dropdown的显示/隐藏

完整代码示例 #

import 'package:flutter/material.dart';

class CustomPositionedDropdown extends StatefulWidget {
  const CustomPositionedDropdown({super.key});

  @override
  State<CustomPositionedDropdown> createState() => _CustomPositionedDropdownState();
}

class _CustomPositionedDropdownState extends State<CustomPositionedDropdown> {
  // 绑定点击目标的GlobalKey
  final GlobalKey _targetKey = GlobalKey();
  // 控制Dropdown显示状态
  bool _isDropdownVisible = false;
  // Dropdown的定位参数
  double _dropdownLeft = 0;
  double _dropdownTop = 0;

  // 计算点击目标的位置，设置Dropdown坐标
  void _calculateDropdownPosition() {
    RenderBox renderBox = _targetKey.currentContext!.findRenderObject() as RenderBox;
    // 获取目标Widget的全局坐标
    Offset globalPosition = renderBox.localToGlobal(Offset.zero);
    // 获取目标Widget的尺寸
    Size targetSize = renderBox.size;

    setState(() {
      // 让Dropdown的左上角和点击目标的左上角完全对齐（保证圆形重合）
      _dropdownLeft = globalPosition.dx;
      _dropdownTop = globalPosition.dy;
      _isDropdownVisible = true;
    });
  }

  // 关闭Dropdown
  void _hideDropdown() {
    setState(() {
      _isDropdownVisible = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 主内容区域
          Center(
            child: GestureDetector(
              key: _targetKey,
              onTap: _calculateDropdownPosition,
              // 你的点击目标Widget（白色圆形）
              child: Container(
                width: 50,
                height: 50,
                decoration: const BoxDecoration(
                  color: Colors.white,
                  shape: BoxShape.circle,
                  boxShadow: [BoxShadow(color: Colors.grey, blurRadius: 2)],
                ),
              ),
            ),
          ),
          // 自定义Dropdown容器，仅在显示状态下渲染
          if (_isDropdownVisible)
            Positioned(
              left: _dropdownLeft,
              top: _dropdownTop,
              child: GestureDetector(
                // 点击Dropdown内部不触发关闭
                onTap: () {},
                child: Material(
                  elevation: 4,
                  // 完全自定义的Dropdown内容，可替换为任意组件
                  child: Container(
                    width: 200,
                    height: 150,
                    color: Colors.white,
                    child: Column(
                      children: [
                        // 保留重合的圆形
                        Container(
                          width: 50,
                          height: 50,
                          decoration: const BoxDecoration(
                            color: Colors.white,
                            shape: BoxShape.circle,
                            boxShadow: [BoxShadow(color: Colors.grey, blurRadius: 2)],
                          ),
                        ),
                        const Padding(
                          padding: EdgeInsets.all(12.0),
                          child: Text("自定义Dropdown内容"),
                        ),
                        ElevatedButton(
                          onPressed: _hideDropdown,
                          child: const Text("关闭"),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          // 点击空白区域关闭Dropdown
          if (_isDropdownVisible)
            GestureDetector(
              onTap: _hideDropdown,
              child: Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
                color: Colors.transparent,
              ),
            ),
        ],
      ),
    );
  }
}

关键细节调整 #

• 如果Dropdown会超出屏幕边界，可在计算坐标时判断：比如当globalPosition.dy + 150 > MediaQuery.of(context).size.height时，把_dropdownTop设为globalPosition.dy - 150，让Dropdown向上弹出
• Dropdown内容完全开放自定义，你可以替换成按钮、输入框、图片等任意组件，不受列表形式限制

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