Flutter 如何获取DatePicker选中的日期时间并在页面渲染展示

实现方法 #

你已经将选中值存入状态变量且选择后调用了setState触发重绘，只需在页面需要展示的位置新增展示组件即可，以下是具体实现：

可选前置步骤（方便格式化日期）

如果需要灵活调整日期展示格式，推荐引入intl格式化包：

1. 在pubspec.yaml的dependencies下添加依赖：

dependencies:
  flutter:
    sdk: flutter
  intl: ^0.18.1 # 可替换为最新稳定版

2. 在用到的dart文件头部导入包：

import 'package:intl/intl.dart';

新增展示组件

将以下代码插入到你需要展示选中值的布局位置即可：

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    // 展示选中时间，padLeft用于给个位数时间补0，格式更统一
    Text(
      "选中时间：${_time.hour.toString().padLeft(2, '0')}:${_time.minute.toString().padLeft(2, '0')}",
      style: TextStyle(fontSize: 16),
    ),
    SizedBox(height: 8),
    // 展示选中日期，处理未选择日期的空值场景
    Text(
      "选中日期：${_dateTime == null ? "未选择" : DateFormat('yyyy年MM月dd日').format(_dateTime!)}",
      style: TextStyle(fontSize: 16),
    ),
  ],
)

无需引入intl包的替代写法

如果不想额外引入依赖，也可以手动拼接日期字符串，把上面日期展示的Text内容替换为以下即可：

Text(
  "选中日期：${_dateTime == null ? "未选择" : "${_dateTime!.year}年${_dateTime!.month.toString().padLeft(2,'0')}月${_dateTime!.day.toString().padLeft(2,'0')}日"}",
  style: TextStyle(fontSize: 16),
)

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