看起来你遇到的核心问题是DropdownMenu的选中文本和左右图标（左侧星星图标、右侧下拉箭头）挤在一起，被背景覆盖导致看不清。我仔细梳理了你的代码，这几个调整点应该能快速解决问题：

1. 优先调整输入装饰的水平内边距 #

你当前把contentPadding的水平值设为0，这会让文本完全贴紧左右边缘，直接和图标区域重叠。给水平方向留足够内边距，就能立刻给文本腾出显示空间：

contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 0),

这个数值可以根据你的UI需求微调（比如12、16都可以），只要保证文本和左右图标之间有明显间隔即可。

2. 优化下拉菜单条目的显示效果（可选） #

如果展开后的下拉条目也有背景或文本显示问题，可以给DropdownMenu添加menuStyle，消除默认的表面 tint 并统一背景：

menuStyle: MenuStyle(
  backgroundColor: MaterialStatePropertyAll(BrandingColours.background),
  surfaceTintColor: MaterialStatePropertyAll(Colors.transparent), // 去掉默认的淡色覆盖层
),

同时，确保下拉条目的文本颜色和背景足够对比，比如给DropdownMenuEntry单独设置样式：

return DropdownMenuEntry(
  value: v,
  label: v.toString(),
  style: MenuItemButton.styleFrom(
    foregroundColor: BrandingColours.white, // 和图标颜色统一，保证对比度
  ),
);

3. 给左侧图标添加额外间距（可选） #

如果调整内边距后，图标和文本还是太近，可以用Padding包裹leadingIcon，手动增加右侧间距：

leadingIcon: Padding(
  padding: const EdgeInsets.only(right: 8),
  child: Icon(Icons.star_rate, color: BrandingColours.white),
),

修改后的完整代码片段（关键部分） #

DropdownMenu<int>(
  inputDecorationTheme: InputDecorationTheme(
    fillColor: BrandingColours.background,
    filled: true,
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(15),
      borderSide: BorderSide(color: BrandingColours.foreground, width: 3),
    ),
    enabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(15),
      borderSide: BorderSide(color: BrandingColours.foreground, width: 3),
    ),
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(15),
      borderSide: BorderSide(color: BrandingColours.foreground, width: 3),
    ),
    // 核心修改：调整水平内边距
    contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 0),
    constraints: BoxConstraints.tight(const Size.fromHeight(50))
  ),
  initialSelection: widget.recipe.servings,
  // 可选：给左侧图标加间距
  leadingIcon: Padding(
    padding: const EdgeInsets.only(right: 8),
    child: Icon(Icons.star_rate, color: BrandingColours.white),
  ),
  menuHeight: 200,
  // 可选：优化下拉菜单样式
  menuStyle: MenuStyle(
    backgroundColor: MaterialStatePropertyAll(BrandingColours.background),
    surfaceTintColor: MaterialStatePropertyAll(Colors.transparent),
  ),
  dropdownMenuEntries: [-1,1,2,3,4,5,6,7,8,9,10].map((v) {
    if (v != -1) {
      return DropdownMenuEntry(
        value: v,
        label: v.toString(),
        // 可选：统一条目文本颜色
        style: MenuItemButton.styleFrom(
          foregroundColor: BrandingColours.white,
        ),
      );
    } else {
      return DropdownMenuEntry(
        value: -1, 
        label: 'N/A',
        style: MenuItemButton.styleFrom(
          foregroundColor: BrandingColours.white,
        ),
      );
    }
  }).toList(),
  textStyle: Branding.R20,
),

额外注意点 #

• 检查Branding.R20文本样式的颜色：确保它和fillColor（BrandingColours.background）有足够的对比度，如果颜色太接近，也会造成“文本被遮挡”的视觉错觉。
• 不要把contentPadding水平值设为0：这是导致文本和图标重叠的根本原因，预留合理间距是最直接的解决方案。

内容来源于stack exchange