如何在Flutter中制作自定义日期时间选择器？是否有可用插件？

从你提供的截图来看，这是一个横向滚轮式的日期时间选择器，下面分别介绍插件实现和自定义实现的方案：

一、插件推荐（快速实现） #

1. flutter_datetime_picker #

这个插件支持自定义日期时间选择器的样式和布局，能轻松实现横向滚轮效果：

• 首先在 pubspec.yaml 添加依赖：

  dependencies:
    flutter_datetime_picker: ^1.5.1
  

• 示例代码：

  DateTimePicker.showDateTimePicker(
    context,
    showTitleActions: true,
    minTime: DateTime(2020, 1, 1),
    maxTime: DateTime(2030, 12, 31),
    // 启用横向滚轮模式
    pickerMode: DateTimePickerMode.showDateTimePicker,
    pickerTheme: PickerTheme(
      backgroundColor: Colors.white,
      itemTextStyle: TextStyle(color: Colors.black, fontSize: 18),
      selectedTextStyle: TextStyle(color: Colors.blue, fontSize: 20, fontWeight: FontWeight.bold),
    ),
    onConfirm: (date) {
      print('选中的日期时间：$date');
    },
  );
  

  通过调整 PickerTheme 可以匹配截图中的样式，包括分隔符、滚轮高度等细节。

2. date_time_picker #

轻量型插件，支持灵活的布局配置，同样能实现横向滚轮效果：

• 添加依赖：

  dependencies:
    date_time_picker: ^2.1.0
  

• 使用示例：

  DateTimePicker(
    type: DateTimePickerType.dateTimeSeparate,
    initialValue: DateTime.now().toString(),
    firstDate: DateTime(2020),
    lastDate: DateTime(2030),
    // 自定义横向布局
    builder: (context, currentValue, child) {
      return Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(child: child!),
        ],
      );
    },
    onChanged: (val) => print(val),
    onSaved: (val) => print(val),
  );
  

二、自定义实现思路（完全定制） #

如果插件无法满足精细的样式需求，可以自行实现：

• 核心组件：用多个 ListView.builder 或第三方滚轮组件（比如 flutter_picker 的 Picker）分别实现年、月、日、时、分的滚轮，通过 Row 横向排列。
• 数据联动：监听每个滚轮的选中值，动态更新关联滚轮的可选数据（比如根据年份和月份调整日期的可选范围）。
• 样式定制：
  • 设置滚轮的固定高度和宽度，给选中项添加高亮样式（如加粗、变色）。
  • 在滚轮之间添加分隔符（比如 Container(width: 2, color: Colors.grey)）。
• 结果整合：将各个滚轮选中的年、月、日、时、分组合成 DateTime 对象。

简化自定义示例（基于 flutter_picker） #

Picker(
  adapter: DateTimePickerAdapter(
    type: PickerDateTimeType.kYMDHM,
    isNumberMonth: true,
  ),
  itemExtent: 50,
  height: 200,
  selectedTextStyle: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
  onConfirm: (Picker picker, List value) {
    print((picker.adapter as DateTimePickerAdapter).value);
  },
).showDialog(context);

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