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

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),
]);

Learn more about date picker click here

Credit

This project is developed by joo6077
Download this project from the below link.
https://github.com/joo6077/cool_datepicker/archive/refs/heads/master.zip
You can visit the source page from the below link:
https://github.com/joo6077/cool_datepicker

Spread the love
See also  Login Page UI in Flutter

Leave a Reply