如何移除DropdownButtonFormField展开时的默认内边距？

要消除DropdownMenuItem周围的空白内边距，需要同时处理弹出菜单容器的默认内边距和DropdownMenuItem自身的内边距，以下是具体修改方案：

关键修改点 #

• 给DropdownButtonFormField添加menuPadding: EdgeInsets.zero，清除弹出菜单整体的内边距
• 给每个DropdownMenuItem设置padding: EdgeInsets.zero，移除单个选项的默认内边距
• 确保内部Container的尺寸和对齐方式填满整个选项区域

修改后的完整代码 #

Container(
  padding: EdgeInsets.only(top: 0),
  width: MediaQuery.of(context).size.width * 0.25,
  child: DropdownButtonHideUnderline(
    child: DropdownButtonFormField<StoneQuality>(
      // 新增：清除弹出菜单容器的内边距
      menuPadding: EdgeInsets.zero,
      decoration: InputDecoration(
        contentPadding: EdgeInsets.symmetric(vertical: 8, horizontal: 15),
        isDense: true,
        fillColor: model.selectedStoneQuality != null ? Color(model.selectedStoneQuality!.backgroundColor) : Colors.white,
        filled: true,
        enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(30),
          borderSide: BorderSide(width: 1, color: Color(stoneQualityError == null ? ColorsApp.fieldBorderColor : ColorsApp.errorTextColor)),
        ),
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(30),
          borderSide: BorderSide(width: 1, color: Color(stoneQualityError == null ? ColorsApp.fieldBorderColor : ColorsApp.errorTextColor)),
        ),
      ),
      value: model.selectedStoneQuality,
      hint: Text(
        langContext.langTexts["placeholders"]["select"],
      ),
      icon: Icon(Icons.keyboard_arrow_down),
      isExpanded: true,
      iconSize: 24,
      elevation: 4,
      isDense: true,
      onChanged: model.isCompleted
          ? null
          : (value) {
              setState(() {
                model.selectedStoneQuality = value;
              });
            },
      items: model.stoneQualityDropDown.map<DropdownMenuItem<StoneQuality>>((StoneQuality value) {
        return DropdownMenuItem<StoneQuality>(
          // 新增：清除单个选项的内边距
          padding: EdgeInsets.zero,
          value: value,
          child: Container(
            width: double.infinity,
            constraints: BoxConstraints(minHeight: 48),
            alignment: Alignment.centerLeft,
            color: Color(value.backgroundColor),
            // 可选：如果需要和输入框文本对齐，添加左侧内边距
            // padding: EdgeInsets.only(left: 15),
            child: Text(value.text),
          ),
        );
      }).toList(),
      style: TextStyle(fontSize: 15, fontWeight: FontWeight.w500, color: Color(ColorsApp.lightGreyTextColor)),
    ),
  ),
),

补充说明 #

如果需要让选项文本和输入框内的文本对齐，可以在DropdownMenuItem内部的Container中添加padding: EdgeInsets.only(left: 15)（和输入框的contentPadding水平值一致），既消除周围空白，又保证排版一致性。

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