Flutter 时间选择器

引入flutter_datetime_picker插件

pubspec.yaml文件中引入：

dependencies:
  flutter_datetime_picker: 1.2.6

作用及使用

选择时间组件

1. 参考网址：flutter_datetime_picker

2. 使用方式：

   • 选择日期

     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天有效）如果失效，可加个人微信拉群