如何缩小Flutter中DropdownMenu的高度？

要实现DropdownMenu（触发框+下拉选项）的高度缩小，你需要针对触发输入框和下拉选项项分别调整内置的边距与最小尺寸，以下是简便可行的修改方案：

关键修改点： #

• 给InputDecorationTheme添加contentPadding，自定义触发框的内边距，替代仅设置isCollapsed的方式
• 给DropdownMenuEntry的ButtonStyle设置minimumSize，缩小下拉选项的最小高度
• 保留外层SizedBox的高度限制，配合内边距实现精准控制

修改后的完整代码： #

SizedBox(
  height: 30,
  child: Container(
    decoration: const BoxDecoration(color: Colors.white),
    child: DropdownMenu<String>(
      textStyle: const TextStyle(fontSize: 10),
      inputDecorationTheme: const InputDecorationTheme(
        isCollapsed: true,
        // 自定义触发框内边距，垂直方向缩小
        contentPadding: EdgeInsets.symmetric(vertical: 4, horizontal: 8),
        // 可根据需求移除或保留默认边框
        border: OutlineInputBorder(),
      ),
      dropdownMenuEntries: [
        DropdownMenuEntry(
          value: "Name - First",
          label: "Name - First",
          style: ButtonStyle(
            textStyle: MaterialStateTextStyle.resolveWith(
              (states) => const TextStyle(fontSize: 10),
            ),
            // 设置下拉选项的最小高度
            minimumSize: MaterialStateProperty.all(const Size.fromHeight(24)),
          ),
        ),
      ],
    ),
  ),
),

说明： #

• contentPadding直接控制触发输入框的内部间距，垂直值设小后会让触发框高度贴合文字
• minimumSize强制下拉选项的最小高度，避免Flutter使用默认的较大高度
• 外层SizedBox的height可以根据最终视觉效果微调，配合内边距达到理想高度

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