Flutter中showTimePicker选择后如何以24小时制格式显示时间

你在showTimePicker的builder中配置的alwaysUse24HourFormat: true仅作用于时间选择弹窗内部，弹窗返回的TimeOfDay实例只存储小时、分钟两个数值，不携带任何时间格式配置。
外层文本组件调用trainingStartTime.format(context)时，传入的是当前页面的上下文，这个上下文没有配置强制24小时制，所以会默认跟随系统的12小时制规则格式化时间，才会出现弹窗内选的是24小时制、展示时退回12小时制的问题。

方案1：手动拼接24小时制字符串（推荐，无环境依赖） #

直接对小时、分钟数值补零拼接，完全不受系统地区、时间格式设置影响，稳定性最高，只需要替换原Text组件的内容即可：

Text(
  // 不足两位的数值前补0，例如9点3分显示为09:03
  '${trainingStartTime.hour.toString().padLeft(2, '0')}:${trainingStartTime.minute.toString().padLeft(2, '0')}',
  style: const TextStyle(
    fontSize: 18,
  ),
)

方案2：保留format方法，传入24小时制上下文 #

如果需要使用TimeOfDay自带的格式化逻辑，可以先构造一个开启了24小时制配置的上下文传给format方法：
首先在页面类中加一个辅助格式化方法：

String formatTimeTo24h(TimeOfDay time, BuildContext pageContext) {
  final mediaQuery24h = MediaQuery.of(pageContext).copyWith(alwaysUse24HourFormat: true);
  final dummyElement = MediaQuery(data: mediaQuery24h, child: const SizedBox()).createElement();
  return time.format(dummyElement);
}

然后替换原Text组件的内容：

Text(
  formatTimeTo24h(trainingStartTime, context),
  style: const TextStyle(
    fontSize: 18,
  ),
)

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