Flutter如何实现时间选择器（time picker）

在Flutter中如何实现一个时间选择器（time picker）？我需要在应用中让用户选择时间，但不太清楚具体该怎么做。是否有内置的组件可以直接使用，还是需要借助第三方库？如果使用内置组件，能否自定义样式，比如修改颜色、字体大小等？另外，如何处理用户选择的时间数据，并将其传递给其他页面或保存到数据库？希望能提供一个简单的代码示例来说明具体实现步骤。

2 回复

Flutter中可使用showTimePicker方法实现时间选择器。示例代码：

TimeOfDay? selectedTime = await showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
);

该方法会返回用户选择的TimeOfDay对象，支持自定义初始时间和主题样式。

更多关于Flutter如何实现时间选择器（time picker）的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，实现时间选择器主要有以下几种方式：

1. 使用内置 showTimePicker 方法（推荐）

这是最简单的方式，调用系统风格的时间选择器：

Future<void> _selectTime(BuildContext context) async {
  final TimeOfDay? picked = await showTimePicker(
    context: context,
    initialTime: TimeOfDay.now(),
    builder: (BuildContext context, Widget? child) {
      return Theme(
        data: ThemeData.light(), // 可以自定义主题
        child: child!,
      );
    },
  );
  
  if (picked != null) {
    print('选择的时间: ${picked.hour}:${picked.minute}');
    // 处理选择的时间
  }
}

2. 使用第三方包 flutter_cupertino_date_picker

如果需要更多自定义选项，可以使用第三方包：

dependencies:
  flutter_cupertino_date_picker: ^1.0.26

DatePicker.showDatePicker(
  context,
  pickerTheme: DateTimePickerTheme(
    showTitle: true,
  ),
  minDateTime: DateTime.parse('2020-01-01'),
  maxDateTime: DateTime.parse('2030-12-31'),
  initialDateTime: DateTime.now(),
  dateFormat: 'HH:mm',
  pickerMode: DateTimePickerMode.time, // 设置为时间模式
  onConfirm: (dateTime, selectedIndex) {
    print('选择的时间: $dateTime');
  },
);

3. 自定义时间选择器

如果需要完全自定义，可以使用 CupertinoTimerPicker：

showModalBottomSheet(
  context: context,
  builder: (BuildContext builder) {
    return Container(
      height: 250,
      child: CupertinoTimerPicker(
        mode: CupertinoTimerPickerMode.hm,
        onTimerDurationChanged: (Duration changedTimer) {
          print('选择的时间: ${changedTimer.inHours}:${changedTimer.inMinutes % 60}');
        },
      ),
    );
  },
);

使用建议

  • 简单需求：使用内置的 showTimePicker
  • iOS风格：使用 CupertinoTimerPicker
  • 高度自定义：使用第三方包如 flutter_cupertino_date_picker

内置的 showTimePicker 在Android和iOS上都会显示对应平台的本地化样式，是最推荐的实现方式。

回到顶部