Flutter TimePicker选中时间显示格式异常问题：需实现HH:mm标准格式显示

这个问题很常见，因为TimeOfDay的hour和minute属性返回的是整数类型，当数值小于10时直接拼接就会丢失前置零。要实现HH:mm的标准格式显示，我们只需要把整数格式化为两位带前置零的字符串即可，同时还要处理用户取消选择时间的情况（避免空指针异常）。

第一步：完善时间选择的空值处理 #

当用户点击时间选择器的取消按钮时，showTimePicker会返回null，所以我们需要先判断是否获取到有效时间再更新状态，避免后续格式化时出现异常：

_pickTime() async {
  TimeOfDay? time = await showTimePicker(
    context: context,
    initialTime: pickedTime,
  );
  // 仅当用户选择了有效时间时才更新状态
  if (time != null) {
    setState(() {
      pickedTime = time;
    });
  }
}

第二步：修改时间格式化逻辑 #

我们可以使用Dart字符串的padLeft(2, '0')方法，确保数字始终以两位形式展示，把小时和分钟都处理成带前置零的字符串：

ListTile(
  title: Text(
    '${pickedTime.hour.toString().padLeft(2, '0')}:${pickedTime.minute.toString().padLeft(2, '0')}',
  ),
  trailing: const Icon(Icons.timer, size: 45),
  onTap: _pickTime,
)

这样修改后，不管选中的是04:05还是12:30，都会以标准的两位数字格式正确显示啦。

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