如何设置Flutter DropdownButtonFormField下拉菜单的宽度、边距及显示位置？

针对你遇到的下拉菜单展开时原输入框隐藏、菜单项全屏宽度的问题，同时实现菜单项左右边距和菜单正下方显示的需求，可通过以下代码修改解决：

完整修改后的代码 #

LayoutBuilder(
  builder: (context, constraints) {
    return DropdownButtonFormField(
      items: businessType
          .map((businessType) => DropdownMenuItem(
                value: businessType,
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16), // 添加菜单项左右边距
                  child: Text(
                    businessType['val'],
                    maxLines: 1,
                    style: TextThemeFile.primary14MediumPoppins(context, 25),
                    softWrap: true,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ))
          .toList(),
      onChanged: onChanged,
      value: selected,
      hint: hint,
      icon: suffixIcon,
      elevation: 0,
      dropdownColor: Colors.white, // 下拉菜单背景色，与输入框区分
      decoration: InputDecoration(
        border: OutlineInputBorder(), // 给输入框添加边框，避免展开时视觉上"隐藏"
        contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      ),
      menuStyle: MenuStyle(
        minimumSize: MaterialStatePropertyAll(Size(constraints.maxWidth, double.infinity)), // 菜单宽度匹配输入框
        alignment: Alignment.bottomCenter, // 菜单显示在输入框正下方
        padding: MaterialStatePropertyAll(EdgeInsets.zero), // 去除菜单默认内边距
      ),
    );
  },
)

关键修改说明 #

• 菜单项左右边距：在DropdownMenuItem的文本外层包裹Padding组件，通过horizontal参数控制左右边距大小。
• 菜单宽度匹配+正下方显示：使用LayoutBuilder获取输入框所在容器的宽度，通过menuStyle的minimumSize将下拉菜单宽度设置为与输入框一致；alignment: Alignment.bottomCenter确保菜单精准对齐输入框底部。
• 解决原输入框隐藏问题：给InputDecoration添加边框样式，让输入框在菜单展开时依然清晰可见；设置dropdownColor为纯色，与输入框背景形成区分，避免视觉混淆。
• 优化菜单排版：去除菜单默认内边距，避免不必要的空白区域。

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