Flutter 时间选择器,京东物流选择配送时间

引入flutter_datetime_picker插件

pubspec.yaml文件中引入：

dependencies: flutter_datetime_picker: 1.2.6 作用及使用

选择时间组件

参考网址：flutter_datetime_picker

使用方式：

选择日期

import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';FlatButton( onPressed: () { DatePicker.showDatePicker(context, // 是否展示顶部操作按钮 showTitleActions: true, // 最小时间 minTime: DateTime(2018, 3, 5), // 最大时间 maxTime: DateTime(2099, 6, 7), // change事件 onChanged: (date) { print('change $date'); }, // 确定事件 onConfirm: (date) { print('confirm $date'); }, // 当前时间 currentTime: DateTime.now(), // 语言 locale: LocaleType.zh); }, child: Text( '选择日期(Chinese)', style: TextStyle(color: Colors.blue), ))

效果如图：

选择时间

import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';FlatButton( onPressed: () { DatePicker.showTimePicker(context, // 是否展示顶部操作按钮 showTitleActions: true, // change事件 onChanged: (date) { print('change $date'); }, // 确定事件 onConfirm: (date) { print('confirm $date'); }, // 当前时间 // currentTime: DateTime(2019, 6, 20, 17, 30, 20), // 指定时间 currentTime: DateTime.now(), // 当前时间 // 语言 locale: LocaleType.zh); }, child: Text( '仅选择时间(Chinese)', style: TextStyle(color: Colors.blue), )),

效果如图：

选择日期时间

import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';FlatButton( onPressed: () { DatePicker.showDateTimePicker(context, // 是否展示顶部操作按钮 showTitleActions: true, // change事件 onChanged: (date) { print('change $date'); }, // 确定事件 onConfirm: (date) { print('confirm $date'); }, // 当前时间 currentTime: DateTime.now(), // 语言 locale: LocaleType.zh); }, child: Text( '选择日期时间(Chinese)', style: TextStyle(color: Colors.blue),)),

效果如图：

可自定义内容

import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';FlatButton( onPressed: () { DatePicker.showPicker(context, // 是否展示顶部操作按钮 showTitleActions: true, // change事件 onChanged: (date) { print('change $date'); }, // 确定事件 onConfirm: (date) { print('confirm $date'); }, // 自定义内容model // pickerModel:CommonPickerModel(), // 语言 locale: LocaleType.zh); }, child: Text( '自定义选择框(Chinese)', style: TextStyle(color: Colors.blue), )),

效果如图：

欢迎加群讨论更多flutter相关问题(7天有效）如果失效，可加个人微信拉群