如何修改Flutter FormBuilderDropdown的内部垂直内边距与选中项高亮圆角

针对你使用flutter_form_builder时遇到的下拉菜单垂直内边距和选中项圆角问题，可以通过以下两个关键配置解决，无需替换现有包：

1. 移除下拉菜单内部垂直内边距 #

FormBuilderDropdown底层依赖Flutter原生的DropdownButtonFormField，下拉项的默认垂直内边距由组件的itemPadding参数控制，而非子项内部的Container或Padding。直接在FormBuilderDropdown上设置该参数即可：

itemPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 0)

• 保留水平内边距（16dp）避免文字贴边，垂直设为0彻底移除上下padding。

2. 修改选中项高亮区域的圆角半径 #

选中项的高亮样式由Flutter主题中的DropdownMenuTheme控制，需要用Theme组件包裹FormBuilderDropdown，自定义下拉菜单的样式：

Theme(
  data: Theme.of(context).copyWith(
    dropdownMenuTheme: DropdownMenuThemeData(
      style: DropdownMenuStyle(
        // 自定义高亮区域圆角
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8), // 按需调整大小
        ),
        // 可选：匹配设计的高亮背景色
        surfaceTintColor: context.colorScheme.primaryContainer.withOpacity(0.1),
      ),
    ),
  ),
  child: FormBuilderDropdown<Experience>(
    // ... 其他原有配置
  ),
)

修改后的完整代码 #

Theme(
  data: Theme.of(context).copyWith(
    dropdownMenuTheme: DropdownMenuThemeData(
      style: DropdownMenuStyle(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
        ),
        surfaceTintColor: context.colorScheme.primaryContainer.withOpacity(0.1),
      ),
    ),
  ),
  child: FormBuilderDropdown<Experience>(
    name: 'experience',
    icon: AppIcon(
      PhosphorIconsRegular.caretDown,
      color: context.colorScheme.iconSecondary,
    ),
    elevation: 4,
    style: context.textTheme.text14Regular,
    itemPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 0),
    decoration: InputDecoration(
      border: OutlineInputBorder(
        borderSide: BorderSide(
          color: context.colorScheme.borderPrimary,
        ),
        borderRadius: BorderRadius.circular(borderRegular),
      ),
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(
          color: context.colorScheme.borderPrimary,
        ),
        borderRadius: BorderRadius.circular(borderRegular),
      ),
      enabledBorder: OutlineInputBorder(
        borderSide: BorderSide(
          color: context.colorScheme.borderPrimary,
        ),
        borderRadius: BorderRadius.circular(borderRegular),
      ),
      isDense: true,
    ),
    items: Experience.values
        .take(Experience.values.length - 1)
        .map(
          (experience) => DropdownMenuItem(
            value: experience,
            child: Text(
              context.l10n.experiences_600(experience.name),
            ),
          ),
        )
        .toList(),
  ),
)

为什么之前的尝试无效？ #

• 单独在DropdownMenuItem的子项中设置padding: EdgeInsets.zero无法覆盖组件外层的默认itemPadding；
• 选中项的高亮样式属于全局下拉菜单主题，而非单个DropdownMenuItem的样式属性。

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