Flutter DropdownSearch组件字体过大且不随屏幕尺寸自适应

问题现象 #

使用DropdownSearch下拉搜索组件时，字体大小固定，调整屏幕尺寸时字体不会随之自适应变化，同时存在字体过大问题，异常效果如下：

原有问题代码 #

组件实现代码 #

DropdownSearch<String>(
        items: items,
        showSearchBox: showSearchBox ?? false,
        dropdownSearchDecoration: InputDecoration(
          contentPadding: const EdgeInsets.only(right: 8.0, left: 8.0),
          floatingLabelStyle:
              kResponsiveTextUbuntuFont(context, kDarkGreyColor),
          labelText: labelTxt,
          labelStyle: kResponsiveTextUbuntuFont(context, kDarkGreyColor),
          focusedBorder: const OutlineInputBorder(
            borderSide: BorderSide(color: kDarkGreyColor, width: 2),
          ),
          border: const OutlineInputBorder(
            borderSide: BorderSide(color: kDarkGreyColor, width: 2),
          ),
        ),
        onChanged: (newItem) => {},
        showSelectedItems: true,
        selectedItem: selectedItem,
        popupBackgroundColor: kBackgroundColor,
        dropdownSearchBaseStyle:
            kResponsiveTextUbuntuFont(context, kDarkGreyColor),
        mode: Mode.MENU,
      ),

原有字体样式定义 #

TextStyle KResponsiveTitleUbuntuFont(BuildContext context, Color color) {
  return TextStyle(
      fontFamily: 'Ubuntu',
      fontSize:
          (setWidth(context, 0.001) >= 1) ? 30 * setWidth(context, 0.001) : 50,
      fontWeight: FontWeight.w100,
      wordSpacing: 5,
      color: color);
}

问题根因 #

• 函数调用不匹配：定义的响应式字体函数名为大写开头的KResponsiveTitleUbuntuFont，组件中调用的是小写开头的kResponsiveTextUbuntuFont，如果两个函数不是同一个实现，实际生效的样式根本没有走编写的响应式逻辑
• 字号计算逻辑错误：判断条件setWidth(context, 0.001) >=1阈值和计算系数不合理，不满足条件时直接返回固定值50的字号，直接导致字体过大
• 样式覆盖不全：仅配置了输入框装饰和基础文本样式，下拉弹出层的菜单项、搜索输入框的文本没有绑定响应式字体，这部分内容会使用组件默认固定字号，无法跟随屏幕尺寸自适应

修复方案 #

1. 修正响应式字体工具函数 #

统一函数命名，调整字号计算逻辑，增加字号上下限避免出现过大/过小的问题：

// 统一函数名，和调用处保持一致
TextStyle kResponsiveTextUbuntuFont(BuildContext context, Color color) {
  double screenWidth = MediaQuery.of(context).size.width;
  // 按屏幕宽度比例计算字号，以375设计稿为基准，默认字号14
  double adaptiveFontSize = screenWidth * 0.037;
  // 限制字号范围：最小12sp，最大18sp，避免极端尺寸下字体显示异常
  adaptiveFontSize = adaptiveFontSize.clamp(12, 18);
  return TextStyle(
      fontFamily: 'Ubuntu',
      fontSize: adaptiveFontSize,
      fontWeight: FontWeight.w400,
      wordSpacing: 1,
      color: color);
}

如果项目中引入了flutter_screenutil做屏幕适配，可以直接使用14.sp作为字号，sp单位会自动适配屏幕尺寸和系统字体缩放，无需手动计算比例。

2. 补全DropdownSearch全节点样式配置 #

给搜索框、下拉菜单项都绑定响应式字体样式，保证所有文本节点都走自适应逻辑：

DropdownSearch<String>(
  items: items,
  showSearchBox: showSearchBox ?? false,
  // 配置下拉内搜索框的样式
  searchFieldProps: TextFieldProps(
    style: kResponsiveTextUbuntuFont(context, kDarkGreyColor),
    decoration: InputDecoration(
      contentPadding: const EdgeInsets.symmetric(horizontal: 8, vertical: 12),
      hintText: "搜索",
      hintStyle: kResponsiveTextUbuntuFont(context, kDarkGreyColor.withOpacity(0.6)),
      focusedBorder: const OutlineInputBorder(
        borderSide: BorderSide(color: kDarkGreyColor, width: 2),
      ),
      border: const OutlineInputBorder(
        borderSide: BorderSide(color: kDarkGreyColor, width: 2),
      ),
    ),
  ),
  dropdownSearchDecoration: InputDecoration(
    contentPadding: const EdgeInsets.symmetric(horizontal: 8, vertical: 12),
    floatingLabelStyle: kResponsiveTextUbuntuFont(context, kDarkGreyColor),
    labelText: labelTxt,
    labelStyle: kResponsiveTextUbuntuFont(context, kDarkGreyColor),
    hintStyle: kResponsiveTextUbuntuFont(context, kDarkGreyColor),
    focusedBorder: const OutlineInputBorder(
      borderSide: BorderSide(color: kDarkGreyColor, width: 2),
    ),
    border: const OutlineInputBorder(
      borderSide: BorderSide(color: kDarkGreyColor, width: 2),
    ),
  ),
  onChanged: (newItem) {},
  showSelectedItems: true,
  selectedItem: selectedItem,
  popupBackgroundColor: kBackgroundColor,
  dropdownSearchBaseStyle: kResponsiveTextUbuntuFont(context, kDarkGreyColor),
  // 自定义下拉菜单项样式，绑定响应式字体
  popupItemBuilder: (context, item, isSelected) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
      child: Text(
        item,
        style: kResponsiveTextUbuntuFont(context, isSelected ? kPrimaryColor : kDarkGreyColor),
      ),
    );
  },
  mode: Mode.MENU,
)

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