Flutter如何实现时间选择器

在Flutter中如何实现一个时间选择器？我想在应用中添加一个功能，让用户可以选择日期和时间，但不知道应该使用哪个组件或插件。官方是否有提供现成的时间选择器控件？如果需要第三方插件，哪些比较稳定且易于集成？能否提供一个简单的代码示例？

2 回复

Flutter中实现时间选择器可使用showDatePicker或第三方库如flutter_cupertino_date_picker。
示例代码：

showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2000),
  lastDate: DateTime(2100),
);

支持自定义主题和格式。

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


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

1. showTimePicker（系统默认）

这是最常用的方法，调用系统自带的时间选择器：

Future<void> _selectTime() 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_datetime_picker

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

dependencies:
  flutter_datetime_picker: ^1.5.1

使用示例：

DateTimePicker.showTimePicker(
  context,
  showTitleActions: true,
  onConfirm: (time) {
    print('选择的时间: $time');
  },
  currentTime: DateTime.now(),
);

3. 自定义时间选择器

使用CupertinoDatePicker实现iOS风格：

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      height: 200,
      child: CupertinoDatePicker(
        mode: CupertinoDatePickerMode.time,
        onDateTimeChanged: (DateTime newTime) {
          print('选择的时间: $newTime');
        },
      ),
    );
  },
);

4. 完整示例

ElevatedButton(
  onPressed: _selectTime,
  child: Text('选择时间'),
),

推荐使用showTimePicker，因为它与系统风格一致，用户体验更好。如果需要更多自定义功能，可以考虑使用第三方库。

回到顶部