本文共 2490 字，大约阅读时间需要 8 分钟。

引入flutter_datetime_picker插件

pubspec.yaml文件中引入：

dependencies:  flutter_datetime_picker: 1.2.6

作用及使用

选择时间组件

1. 参考网址：

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),  )),

效果如图：

转自：

转载地址：http://ilnci.baihongyu.com/