酷炫的日期选择器

功能

  • 这是有史以来最好的日期选择器UI。（至少对我来说是这样?）
  • 可以设置日期选择器的所有颜色
  • 支持底部显示已选日期列表。用户可以将已选日期移动到选定的年份和月份。
  • “酷炫”

示例




安装

命令

 $ flutter pub add cool_datepicker

pubspec.yaml

dependencies:
  cool_datepicker: ^(latest)

用法

import 'package:cool_datepicker/cool_datepicker.dart';


    CoolDatepicker(onSelected: (_) {})

重要选项

选项 类型 默认值 描述
onSelected 功能 必需 当用户选择日期然后点击“确定”按钮时，它将被触发。您必须在函数中放入一个参数。（例如：onChange: (a) {}）。然后，您将收到返回的 List<DateTime> / Map<String, DateTime>
defaultValue List<DateTime> / Map<String, DateTime> 空 默认选定的日期。它将根据您使用的类型自动检测单选/范围选择。
disabledList List<DateTime> 空 禁用的日期列表。您必须传递 List<DateTime>
disabledRangeList List<Map<String, DateTime>> 空 禁用的日期范围映射。您必须在 Map<String, DateTime> 中使用 'start' 和 'end' 键。
isRange 布尔值 假 日期选择器用于单选/范围选择 

    CoolDatepicker(
        defaultValue: [DateTime(2020, 8, 24)], // single select
        onSelected: (_) {},
        disabledList: [DateTime(2021, 10, 22), DateTime(2021, 10, 12)],
        disabledRangeList: [
            {
            'start': DateTime(2021, 11, 1),
            'end': DateTime(2021, 11, 13)
            },
        ],
    )
    CoolDatepicker(
        defaultValue: { // range select
        'start': DateTime(2020, 9, 25),
        'end': DateTime(2021, 11, 24)
        },
        onSelected: (_) {},
    )

结果选项

选项 类型 默认值 描述
iconSize 双精度 20 日期选择器图标大小
resultWidth 双精度 220
resultHeight 双精度 50
resultBD BoxDecoration 以下代码 结果的 Box decoration
resultTS TextStyle 以下代码 结果的文本样式
resultPadding EdgeInsets 以下代码 结果的内边距
isResultIconLabelReverse 布尔值 假 结果按行反转顺序
labelIconGap 双精度 10 标签和图标之间的间隙
isResultLabel 布尔值 真 显示/隐藏结果的标签
placeholder 字符串 空
placeholderTS TextStyle 以下代码
iconSize 双精度 20 resultBox 中日历图标的大小 

resultBD = BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.1),
              spreadRadius: 1,
              blurRadius: 10,
              offset: Offset(0, 1),
            ),
          ],
        );

resultTS = TextStyle(
            fontSize: 20,
            color: Colors.black,
          );

resultPadding = const EdgeInsets.only(left: 10, right: 10);

placeholderTS = TextStyle(color: Colors.grey.withOpacity(0.7), fontSize: 20);

日期选择器选项

选项 类型 默认值 描述
calendarSize 双精度 400 日期选择器大小
minYear 双精度 DateTime.now().year – 100 日期选择器的最小年份
maxYear 双精度 DateTime.now().year + 100 日期选择器的最大年份
format string ‘yyyy-mm-dd’ 结果和底部已选日期显示的格式
limitCount 整数 1 设置可选择的日期数量
weekLabelList 列表 以下代码 设置日期选择器上的星期标签
monthLabelList 列表 以下代码 设置日期选择器日期选择器上的月份下拉标签
isYearMonthDropdownReverse 布尔值 假 日期选择器上的下拉列表顺序反转
headerColor 颜色 Color(0XFF6771e4) 日期选择器上的下拉列表顺序反转
arrowIconAreaColor 颜色 Color(0XFF4752e0) 日期选择器上的下拉列表顺序反转
selectedCircleColor 颜色 Color(0XFF6771e4) 日期选择器上的下拉列表顺序反转
selectedBetweenAreaColor 颜色 Color(0XFFe2e4fa) 日期选择器上的下拉列表顺序反转
cancelFontColor 颜色 Color(0XFF4a54c5) 日期选择器上的下拉列表顺序反转
okButtonColor LinearGradient 以下代码 日期选择器上的下拉列表顺序反转
bottomSelectedBorderColor 颜色 Color(0XFF6771e4) 日期选择器上的下拉列表顺序反转
isDark 布尔值 假 黑暗模式
cancelBtnLabel 字符串 ‘取消’ 取消按钮标签
okBtnLabel 字符串 ‘确定’ 确定按钮标签 

weekLabelList = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];

monthLabelList = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];

okButtonColor = const LinearGradient(colors: [
    Color(0XFF4a54c5),
    Color(0XFF6771e4),
]);

GitHub

查看 Github