Flutter Dropdown列表展开而非滚动，如何实现紧凑可滚动下拉列表？

核心解决方案：限制下拉列表高度并启用滚动 #

原生DropdownButton支持通过配置属性实现紧凑的可滚动下拉列表，无需更换Widget，只需调整以下关键参数：

修改后的代码示例 #

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

  @override
  State<_DropdownBehaivorButton> createState() => _DropdownBehaivorButtonState();
}

class _DropdownBehaivorButtonState extends State<_DropdownBehaivorButton> {
  String dropdownvalue = 'Agresivo';  

  var tipos = [   
    'Agresivo',
    'Tranquilo',
    'Travieso',
    'Docil',
    'Travieso',
    'Travieso',
    'Travieso'
  ];

  @override
  Widget build(BuildContext context) {
    return DropdownButtonHideUnderline(
      child: DropdownButton(
        borderRadius: BorderRadius.circular(25),
        isExpanded: true,
        iconEnabledColor: const Color(0xff525252),
        dropdownColor: Colors.white,
        style: _textStyle(),
        value: dropdownvalue,
        icon: const Icon(Icons.keyboard_arrow_down),
        // 限制下拉面板最大高度，超出自动显示滚动条
        dropdownMaxHeight: 200,
        // 自定义选项高度，缩小默认值让列表更紧凑
        itemHeight: 40,
        items: tipos.map((String items) {
          return DropdownMenuItem(
            value: items,
            // 用Padding控制边距，替代Center减少空间浪费
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16),
              child: Text(items),
            ),
          );
        }).toList(),
        onChanged: (String? newValue) {
          setState(() {
            dropdownvalue = newValue!;
          });
        },
      ),
    );
  }

  TextStyle _textStyle() => const TextStyle(
    fontSize: 18,
    color: Color.fromARGB(123, 82, 82, 82),
    fontWeight: FontWeight.w400
  );
}

关键改动说明 #

• dropdownMaxHeight：设置下拉面板的最大高度（示例中为200），当选项总高度超过该值时，面板自动添加滚动功能，避免列表过度展开。
• itemHeight：调整单个选项的高度，默认值为48，缩小后可让列表布局更紧凑。
• 选项布局优化：用Padding替代Center组件，既保证文字边距合理，又减少不必要的空间占用。

关于下拉方向的补充 #

DropdownButton默认会根据按钮在屏幕中的位置自动选择向上/向下展开，这是符合移动端交互逻辑的自适应行为。如果强制固定展开方向，可能会导致列表被屏幕边缘截断，不建议修改。

进阶方案：第三方库扩展 #

如果原生组件的样式仍无法满足需求，可尝试第三方下拉组件库，例如：

• dropdown_search：支持搜索过滤、自定义模板、滚动优化
• flutter_dropdown_plus：提供更灵活的下拉面板控制逻辑

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