Flutter如何实现时间选择器

在Flutter中如何实现一个时间选择器？需要支持选择日期和时间，并且能自定义样式和主题。最好能提供完整的代码示例和注意事项。

2 回复

Flutter中可使用showDatePicker或第三方库如flutter_cupertino_date_picker实现时间选择器。
showDatePicker是Material风格，支持日期选择；Cupertino风格需用CupertinoDatePicker。
示例代码：

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

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


Flutter 中实现时间选择器有多种方式，以下是常用的方法：

1. showDatePicker 和 showTimePicker

这是官方提供的标准时间选择器：

// 选择日期
Future<DateTime?> selectedDate = showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2000),
  lastDate: DateTime(2100),
);

// 选择时间
Future<TimeOfDay?> selectedTime = showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
);

2. 完整示例代码

DateTime? selectedDate;
TimeOfDay? selectedTime;

void _selectDateTime() async {
  // 选择日期
  final DateTime? pickedDate = await showDatePicker(
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime(2000),
    lastDate: DateTime(2100),
  );
  
  if (pickedDate != null) {
    // 选择时间
    final TimeOfDay? pickedTime = await showTimePicker(
      context: context,
      initialTime: TimeOfDay.now(),
    );
    
    if (pickedTime != null) {
      setState(() {
        selectedDate = DateTime(
          pickedDate.year,
          pickedDate.month,
          pickedDate.day,
          pickedTime.hour,
          pickedTime.minute,
        );
        selectedTime = pickedTime;
      });
    }
  }
}

3. 第三方库

如果需要更丰富的功能，可以使用第三方库：

flutter_datetime_picker

dependencies:
  flutter_datetime_picker: ^1.5.1

DatePicker.showDateTimePicker(
  context,
  showTitleActions: true,
  onConfirm: (date) {
    print('Selected date: $date');
  },
  currentTime: DateTime.now(),
);

4. 自定义样式

可以通过 builder 参数自定义样式：

showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2000),
  lastDate: DateTime(2100),
  builder: (context, child) {
    return Theme(
      data: ThemeData.light().copyWith(
        colorScheme: ColorScheme.light(
          primary: Colors.blue,
          onPrimary: Colors.white,
        ),
      ),
      child: child!,
    );
  },
);

选择哪种方式取决于你的具体需求。官方组件适合大多数场景，第三方库提供更多定制选项。

回到顶部