前言
大家好,我是未央歌,一个默默无闻的移动开发搬砖者~
日期组件很常用,但是 flutter 官方提供的日期组件没办法自定义风格,很难符合我们的UI需求,故在此基础写了这个库date_picker_pro,提供各种自定义样式、颜色、回调等,希望对大家有用。
目前这个库提供 日期选择 和 日期范围选择 的组件。
如何使用
导包
- 在项目的 pubspec.yaml 文件导入此库date_picker_pro
date_picker_pro: ^0.0.4
日期选择(DatePicker)
import 'package:date_picker_pro/date_picker.dart';
DatePicker(
controller: controller,
initialDate: DateTime(2024, 8, 15),
currentDate: DateTime(2024, 8, 16),
firstDate: DateTime(2021, 8, 1),
lastDate: DateTime(2024, 9, 28),
selectableDayPredicate: (DateTime date) {
// 只允许选周一到周五的日期
if (date.weekday == DateTime.saturday || date.weekday == DateTime.sunday) {
return false;
}
return true;
},
onDateChanged: (DateTime date) {},
onDisplayedMonthChanged: (DateTime date) {},
selectedColor: Colors.blue,
selectedTextColor: Colors.white,
enableTextColor: Colors.black,
disableTextColor: Colors.grey,
selectedShape: BoxShape.circle,
monthHeaderItemHeight: 40,
backgroundColor: Colors.white,
monthTextStyle: const TextStyle(
color: Colors.black,
fontSize: 14,
fontWeight: FontWeight.normal,
),
)
DatePicker提供的 API/参数 | 描述 |
---|---|
controller | 控制器 |
initialDate controller.setSelectedDate() | 设置所选日期 |
currentDate controller.setCurrentDate() | 设置当前日期 |
firstDate | 第一个可以选择的日期 |
lastDate | 最后一个可以选择的日期 |
onDisplayedMonthChanged | 所选月份变化回调 |
selectedColor controller.setSelectedColor() | 选中日期的颜色 |
selectedTextColor controller.setSelectedTextColor() | 选中日期的文本颜色 |
enableTextColor controller.setEnableTextColor() | 可选日期的文本颜色 |
disableTextColor controller.setDisableTextColor() | 不可选日期的文本颜色 |
selectedShape controller.setSelectedShape() | 选中日期的形状,含矩形、圆形 |
onDateChanged | 选中日期回调 |
monthTextStyle controller.setMonthTextStyle() | 设置月的文本样式 |
selectableDayPredicate | 设置可选日期规则 |
monthHeaderItemHeight controller.setMonthHeaderItemHeight() | 设置月的标题高度 |
backgroundColor controller.setBackgroundColor() | 设置背景颜色 |
日期范围选择(DateRangePicker)
import 'package:date_picker_pro/date_picker.dart';
DateRangePicker(
controller: dateRangePickerController,
initialDateRange: DateTimeRange(
start: DateTime(2024,8,1),
end: DateTime(2024,8,30),
),
currentDate: DateTime.now(),
firstDate: DateTime(2023),
lastDate: DateTime(2025),
intervalColor: Colors.blueGrey.shade50,
selectedColor: Colors.blue,
selectedTextColor: Colors.white,
enableTextColor: Colors.black,
disableTextColor: Colors.grey,
selectedShape: BoxShape.rectangle,
monthHeaderItemHeight: 40,
monthHeaderColor: Colors.grey.shade300,
backgroundColor: Colors.white,
monthTextStyle: const TextStyle(
color: Colors.black,
fontSize: 14,
fontWeight: FontWeight.normal,
),
onDateTimeRangeChanged: (DateTimeRange? dateTimeRange) {},
)
DateRangePicker 提供的 API/参数 | 描述 |
---|---|
controller | 控制器 |
initialDateRange controller.setInitialDateRange() | 初始化所选日期范围 |
currentDate controller.setCurrentDate() | 设置当前日期 |
firstDate | 第一个可以选择的日期 |
lastDate | 最后一个可以选择的日期 |
intervalColor controller.setIntervalColor() | 所选日期范围区间的颜色 |
selectedColor controller.setSelectedColor() | 选中日期的颜色 |
selectedTextColor controller.setSelectedTextColor() | 选中日期的文本颜色 |
enableTextColor controller.setEnableTextColor() | 可选日期的文本颜色 |
disableTextColor controller.setDisableTextColor() | 不可选日期的文本颜色 |
selectedShape controller.setSelectedShape() | 选中日期的形状,含矩形、圆形 |
onDateTimeRangeChanged | 选中日期范围回调 |
monthTextStyle controller.setMonthTextStyle() | 设置月的文本样式 |
monthHeaderColor controller.setMonthHeaderColor() | 设置月的背景颜色 |
monthHeaderItemHeight controller.setMonthHeaderItemHeight() | 设置月的标题高度 |
backgroundColor controller.setBackgroundColor() | 设置背景颜色 |
controller.reset() | 重置选中日期范围 |
controller.getDateTimeRange() | 获取选中的日期范围,如果没选返回 null |
说明
-
现在只提供 widget ,没有提供弹窗。至于要在页面展示还是弹窗展示,全凭个人喜好自己去封装。如果很多人想要一个通用的日期选择对话框,评论区留言,后面看情况再出一个版本来封装一个通用的弹窗。
最后
如果你对 Flutter 感兴趣,可以看看我的专栏:
感谢大家的支持,码字实在不易,其中如若有错误,望指出,记得点赞关注加收藏哦 ~