cool datepicker
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
| option |
type |
default |
description |
| onselected |
function |
required |
when 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> |
| defaultvalue |
list<datetime> / map<string, datetime> |
null |
default selected dates. it will automatically detects single/range depends on which type you use |
| disabledlist |
list<datetime> |
null |
disabled dates list. you must pass list<datetime> |
| disabledrangelist |
list<map<string, datetime>> |
null |
disabled dates range map. you must use ‘start’ and ‘end’ key on the map<string, datetime> |
| isrange |
bool |
false |
datepicker 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
| option |
type |
default |
description |
| iconsize |
double |
20 |
datepicker icon size |
| resultwidth |
double |
220 |
|
| resultheight |
double |
50 |
|
| resultbd |
boxdecoration |
below code |
boxdecoration of the result |
| resultts |
textstyle |
below code |
textstyle of the result |
| resultpadding |
edgeinsets |
below code |
padding of the result |
| isresulticonlabelreverse |
bool |
false |
reverse order of the result by row |
| labelicongap |
double |
10 |
gap between the label and icon |
| isresultlabel |
bool |
true |
show/hide the label of the result |
| placeholder |
string |
null |
|
| placeholderts |
textstyle |
below code |
|
| iconsize |
double |
20 |
the 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
| option |
type |
default |
description |
| calendarsize |
double |
400 |
datepicker size |
| minyear |
double |
datetime.now().year – 100 |
datepicker minimum year |
| maxyear |
double |
datetime.now().year + 100 |
datepicker maximum year |
| format |
string |
‘yyyy-mm-dd’ |
format to show as result and bottom selected dates |
| limitcount |
int |
1 |
set how many dates can be picked |
| weeklabellist |
list |
below code |
set week words on the datepicker |
| monthlabellist |
list |
below code |
set month dropdown label on the datepicker datepicker |
| isyearmonthdropdownreverse |
bool |
false |
reverse order of dropdowns on the datepicker |
| headercolor |
color |
color(0xff6771e4) |
reverse order of dropdowns on the datepicker |
| arrowiconareacolor |
color |
color(0xff4752e0) |
reverse order of dropdowns on the datepicker |
| selectedcirclecolor |
color |
color(0xff6771e4) |
reverse order of dropdowns on the datepicker |
| selectedbetweenareacolor |
color |
color(0xffe2e4fa) |
reverse order of dropdowns on the datepicker |
| cancelfontcolor |
color |
color(0xff4a54c5) |
reverse order of dropdowns on the datepicker |
| okbuttoncolor |
lineargradient |
below code |
reverse order of dropdowns on the datepicker |
| bottomselectedbordercolor |
color |
color(0xff6771e4) |
reverse order of dropdowns on the datepicker |
| isdark |
bool |
false |
dark mode |
| cancelbtnlabel |
string |
‘cancel’ |
cancel button label |
| okbtnlabel |
string |
‘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),
]);
Comments are closed.