Flutter中showTimePicker在部分机型上高度不足显示异常如何解决

问题场景 #

• 使用Flutter内置showTimePicker组件实现时间选择能力，代码在绝大多数机型运行正常，仅部分机型出现弹窗高度不足、内容被截断无法完整显示的异常。
• 异常效果截图：
  

原有实现代码 #

TimeOfDay pickedTime = await showTimePicker(
  context: context,
  helpText: AppLocalizations.of(context).translate('select_time'),
  cancelText: AppLocalizations.of(context).translate('not_now'),
  confirmText: AppLocalizations.of(context).translate('done'),
  initialTime: TimeOfDay.now(),
  initialEntryMode: TimePickerEntryMode.input,
  builder: (context, childWidget) {
    return MediaQuery(
      data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
      child: childWidget
    );
  }
);

异常原因 #

• 核心问题是自定义builder中直接覆写MediaQuery时，没有对系统字体缩放做限制，部分机型默认开启大字体显示（字体缩放比大于1）时，输入模式下的时间选择器内容实际高度超过了组件默认计算的弹窗高度，就会出现内容截断。
• Flutter 3.10之前的稳定版本存在已知bug：TimePickerEntryMode.input输入模式下，弹窗高度计算没有覆盖多语言长文本、大字体缩放的高度增量场景，在小屏定制安卓系统上复现概率极高。

适配修复方案 #

• 方案1（优先推荐，无侵入）：升级Flutter到3.10及以上稳定版本，官方已经修复了输入模式时间选择器的高度计算逻辑，同时在MediaQuery覆写时增加字体缩放比例约束，避免大字体撑爆布局：

TimeOfDay pickedTime = await showTimePicker(
  context: context,
  helpText: AppLocalizations.of(context).translate('select_time'),
  cancelText: AppLocalizations.of(context).translate('not_now'),
  confirmText: AppLocalizations.of(context).translate('done'),
  initialTime: TimeOfDay.now(),
  initialEntryMode: TimePickerEntryMode.input,
  builder: (context, childWidget) {
    final originMediaQuery = MediaQuery.of(context);
    return MediaQuery(
      data: originMediaQuery.copyWith(
        alwaysUse24HourFormat: true,
        // 限制字体缩放范围，避免超大字体导致布局溢出
        textScaleFactor: originMediaQuery.textScaleFactor.clamp(0.8, 1.1),
      ),
      child: childWidget!
    );
  }
);

• 方案2（无法升级Flutter版本时使用）：在builder中给时间选择器组件增加滚动容器和最小高度约束，保证内容超出高度时可以滚动查看，不会被截断：

builder: (context, childWidget) {
  final originMediaQuery = MediaQuery.of(context);
  return MediaQuery(
    data: originMediaQuery.copyWith(
      alwaysUse24HourFormat: true,
      textScaleFactor: originMediaQuery.textScaleFactor.clamp(0.8, 1.1),
    ),
    child: Center(
      child: SizedBox(
        width: originMediaQuery.size.width * 0.9,
        child: SingleChildScrollView(
          child: childWidget,
        ),
      ),
    ),
  );
}

额外注意事项 #

• 多语言场景下，helpText、操作按钮文本不要设置过长，避免头部布局被长文本撑高挤占内容区空间。
• 不要给时间选择器弹窗写死固定高度，否则会破坏不同屏幕尺寸下的响应式适配逻辑。

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