Cool Datepicker Build with Flutter

You are currently viewing Cool Datepicker Build with Flutter
Cool Datepicker Build with Flutter

Cool Datepicker Build with Flutter

pub package version


  • 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”




 $ flutter pub add cool_datepicker


  cool_datepicker: ^(latest)


import 'package:cool_datepicker/cool_datepicker.dart';

    CoolDatepicker(onSelected: (_) {})

Important options

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
        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)
        defaultValue: { // range select
        'start': DateTime(2020, 9, 25),
        'end': DateTime(2021, 11, 24)
        onSelected: (_) {},

Result options

iconSizedouble20Datepicker icon size
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
placeholderTSTextStylebelow code
iconSizedouble20the size of the calendar icon in resultBox
resultBD = BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10),
          boxShadow: [
              color: Colors.grey.withOpacity(0.1),
              spreadRadius: 1,
              blurRadius: 10,
              offset: Offset(0, 1),
resultTS = TextStyle(
            fontSize: 20,
resultPadding = const EdgeInsets.only(left: 10, right: 10);
placeholderTS = TextStyle(color: Colors.grey.withOpacity(0.7), fontSize: 20);

Datepicker options

calendarSizedouble400Datepicker size – 100Datepicker minimum 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: [

Learn more about date picker click here


This project is developed by joo6077
Download this project from the below link.
You can visit the source page from the below link:

Spread the love
See also  Login Page UI in Flutter

Leave a Reply