flutter date pickers
allows to use date pickers without dialog. provides some customizable styles for date pickers.
a set of date pickers:
daypickerfor one dayweekpickerfor whole weekrangepickerfor random rangemonthpickerfor month
how to style date picker
every date picker constructor take a style object as a parameter (if no styles passed – defaults will be used).
for single value pickers (daypicker, monthpicker) it is datepickerstyles object;
for range pickers (weekpicker, rangepickers) it is datepickerrangestyles object;
customizable styles:
for all date pickers
| property | description |
|---|---|
| textstyle displayedperiodtitle | title of the date picker |
| textstyle currentdatestyle | style for current date |
| textstyle disableddatestyle | style for disabled dates (before first and after last date user can pick) |
| textstyle selecteddatestyle | style for selected date |
| boxdecoration selectedsingledatedecoration | decoration for selected date in case single value is selected |
| textstyle defaultdatetextstyle | style for date which is neither current nor disabled nor selected |
only for range date pickers (weekpicker, rangepicker)
| property | description |
|---|---|
| boxdecoration selectedperiodstartdecoration | decoration for the first date of the selected range |
| boxdecoration selectedperiodlastdecoration | decoration for the first date of the selected range |
| boxdecoration selectedperiodmiddledecoration | decoration for the date of the selected range which is not first date and not end date of this range |
usage
// create week date picker with passed parameters
widget buildweekdatepicker (datetime selecteddate, datetime firstalloweddate, datetime lastalloweddate, valuechanged<dateperiod> onnewselected) {
// add some colors to default settings
datepickerrangestyles styles = datepickerrangestyles(
selectedperiodlastdecoration: boxdecoration(
color: colors.red,
borderradius: borderradius.only(
topright: radius.circular(10.0),
bottomright: radius.circular(10.0))),
selectedperiodstartdecoration: boxdecoration(
color: colors.green,
borderradius: borderradius.only(
topleft: radius.circular(10.0), bottomleft: radius.circular(10.0)),
),
selectedperiodmiddledecoration: boxdecoration(
color: colors.yellow, shape: boxshape.rectangle),
);
return weekpicker(
selecteddate: selecteddate,
onchanged: onnewselected,
firstdate: firstalloweddate,
lastdate: lastalloweddate,
datepickerstyles: styles
);
}
Comments are closed.