Flutter中如何缩小DropdownButtonFormField高度并保持文本居中？

问题原因 #

DropdownButtonFormField内部的InputDecoration默认带有垂直方向的contentPadding，当父容器高度低于默认文本区域的阈值时，默认内边距会挤压文本的垂直空间，导致文本无法居中，而图标不受该内边距约束，因此能保持居中状态。

解决方案 #

通过以下关键调整修复布局：

• 启用isExpanded: true，让下拉按钮占满父容器宽度，确保布局空间被充分利用
• 重置InputDecoration的contentPadding，取消默认的上下内边距，让文本垂直方向无额外约束
• 移除外层不必要的Padding（若需右侧间距可保留但调整为更适配的数值）

修改后的代码 #

Container(
  alignment: Alignment.center,
  width: double.infinity,
  height: 40,
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(
      color: const Color(0xFF616161),
      width: 0.65,
    ),
    borderRadius: BorderRadius.circular(8),
  ),
  child: DropdownButtonFormField(
    enableFeedback: true,
    menuMaxHeight: 200,
    icon: Icon(Icons.keyboard_arrow_down_rounded),
    iconSize: 21,
    alignment: Alignment.center,
    decoration: InputDecoration(
      border: InputBorder.none,
      prefixIcon: Icon(Icons.location_on_rounded),
      // 核心调整：取消垂直方向内边距，让文本垂直居中
      contentPadding: EdgeInsets.symmetric(vertical: 0),
    ),
    dropdownColor: Colors.white,
    borderRadius: BorderRadius.all(Radius.circular(8)),
    elevation: 2,
    // 核心调整：让按钮占满容器宽度，避免布局空间浪费
    isExpanded: true,
    value: cityValue,
    onChanged: (String? newValue) {
      setState(() {
        cityValue = newValue!;
      });
    },
    items: <String>['Tehran', 'Cat', 'Tiger', 'Lion']
        .map<DropdownMenuItem<String>>((String value) {
      return DropdownMenuItem<String>(
        value: value,
        child: Align(
          // 可选：确保下拉选项文本对齐（按需调整）
          alignment: Alignment.centerLeft,
          child: Text(
            value,
            style: TextStyle(fontSize: 15, color: Color(0xff707070)),
          ),
        ),
      );
    }).toList(),
  ),
),

补充调整 #

如果仍存在细微偏移，可微调contentPadding的垂直数值，比如设置EdgeInsets.only(top: 2, bottom: 2)来校准位置；外层Container的alignment: Alignment.center可保留，确保整体控件在容器内居中。

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