【Flutter】想要一个高度自定义的日期选择组件,看这里!

622 阅读3分钟

前言

大家好,我是未央歌,一个默默无闻的移动开发搬砖者~

日期组件很常用,但是 flutter 官方提供的日期组件没办法自定义风格,很难符合我们的UI需求,故在此基础写了这个库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()
设置背景颜色

date_picker.gif

日期范围选择(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

date_ranger_picker.gif

说明

  • github代码地址

  • 现在只提供 widget ,没有提供弹窗。至于要在页面展示还是弹窗展示,全凭个人喜好自己去封装。如果很多人想要一个通用的日期选择对话框,评论区留言,后面看情况再出一个版本来封装一个通用的弹窗。

最后

如果你对 Flutter 感兴趣,可以看看我的专栏:

感谢大家的支持,码字实在不易,其中如若有错误,望指出,记得点赞关注加收藏哦 ~