cool_datepicker 1.0.5 icon indicating copy to clipboard operation
cool_datepicker: ^1.0.5 copied to clipboard

Cool datepicker ✨ This datepicker gives you cool animation, modern design, and you can customize colors and language for datepicker.

Cool datepicker #

pub package version

Features #

  • It's the best datepicker ui ever. (at least for me 😅)
  • It's possible to set all colors of datepicker
  • Support selected date list at the bottom. User can move selected date to selected year and month.
  • "COOL"

Samples #

Installing #

command:

 $ flutter pub add cool_datepicker

pubspec.yaml:

dependencies:
  cool_datepicker: ^(latest)

Usage #

import 'package:cool_datepicker/cool_datepicker.dart';


    CoolDatepicker(onSelected: (_) {})

Important options #

optionTypeDefaultDescription
onSelectedFunctionrequiredwhen user selects dates and then click the ok button, it's triggered. You must put one parameter in the Function. (ex. onChange: (a) {}).Then, you will get return List<DateTime> / Map<String, DateTime>
defaultValueList<DateTime> / Map<String, DateTime>nullDefault selected dates. It will automatically detects single/range depends on which type you use
disabledListList<DateTime>nulldisabled dates list. You must pass List<DateTime>
disabledRangeListList<Map<String, DateTime>>nulldisabled dates range map. You must use 'start' and 'end' key on the Map<String, DateTime>
isRangeboolfalsedatepicker for single/range

    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: (_) {},
    )

Result options #

optionTypeDefaultDescription
iconSizedouble20Datepicker icon size
resultWidthdouble220
resultHeightdouble50
resultBDBoxDecorationbelow codeBoxDecoration of the result
resultTSTextStylebelow codeTextStyle of the result
resultPaddingEdgeInsetsbelow codePadding of the result
isResultIconLabelReverseboolfalseReverse order of the result by row
labelIconGapdouble10Gap between the label and icon
isResultLabelbooltrueShow/hide the label of the result
placeholderStringnull
placeholderTSTextStylebelow code
iconSizedouble20the size of the calendar icon in 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);

Datepicker options #

optionTypeDefaultDescription
calendarSizedouble400Datepicker size
minYeardoubleDateTime.now().year - 100Datepicker minimum year
maxYeardoubleDateTime.now().year + 100Datepicker maximum year
formatstring'yyyy-mm-dd'Format to show as result and bottom selected dates
limitCountint1Set how many dates can be picked
weekLabelListListbelow codeSet week words on the datepicker
monthLabelListListbelow codeSet month dropdown label on the datepicker datepicker
firstWeekDayint7 (Sunday)Set de first weekday that will be shown. Possible values are:monday = 1, tuesday = 2 wednesday = 3, thursday = 4, friday = 5, saturday = 6, sunday = 7 (Can also use DateTime.monday, DateTime.sunday...)
isYearMonthDropdownReverseboolfalseReverse order of dropdowns on the datepicker
headerColorColorColor(0XFF6771e4)Reverse order of dropdowns on the datepicker
arrowIconAreaColorColorColor(0XFF4752e0)Reverse order of dropdowns on the datepicker
selectedCircleColorColorColor(0XFF6771e4)Reverse order of dropdowns on the datepicker
selectedBetweenAreaColorColorColor(0XFFe2e4fa)Reverse order of dropdowns on the datepicker
cancelFontColorColorColor(0XFF4a54c5)Reverse order of dropdowns on the datepicker
okButtonColorLinearGradientbelow codeReverse order of dropdowns on the datepicker
bottomSelectedBorderColorColorColor(0XFF6771e4)Reverse order of dropdowns on the datepicker
isDarkboolfalsedark mode
cancelBtnLabelString'CANCEL'Cancel button label
okBtnLabelString'OK'Ok button label
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),
]);
8
likes
110
pub points
73%
popularity

Publisher

unverified uploader

Cool datepicker ✨ This datepicker gives you cool animation, modern design, and you can customize colors and language for datepicker.

Repository (GitHub)

Documentation

API reference

License

Icon for licenses.MIT (LICENSE)

Dependencies

flutter, flutter_web_plugins

More

Packages that depend on cool_datepicker