leadingDatesDecoration property

Decoration? leadingDatesDecoration

The decoration for the leading date cells of SfDateRangePicker year, decade and century view.

Defaults to null.

Using a SfDateRangePickerTheme gives more fine-grained control over the appearance of various components of the date range picker.

Note: This property not applicable when the SfDateRangePicker.pickerMode set as DateRangePickerMode.hijri.

See also:

• leadingDatesTextStyle, which used to set text style for the leading date cell in the year views of date range picker.
• disabledDatesDecoration, which used to set decoration for the disabled year cells in the year views of the date range picker.
• todayCellDecoration, which used to set decoration for the today date cell in the year views of the date range picker.
• cellDecoration, which used to set decoration for the year cells in the year views of the dat range picker.
• SfDateRangePicker.selectionColor, which fills the background of the selected cells in the date range picker.
• SfDateRangePicker.startRangeSelectionColor, which fills the background of the first cell of the range selection in date range picker.
• SfDateRangePicker.endRangeSelectionColor, which fills the background of the last cell of the range selection in date range picker.
• SfDateRangePicker.rangeSelectionColor, which fills the background of the in between cells of date range picker in range selection.
• Knowledge base: How to apply theming
• Knowledge base: How to style the year, decade and century views

Widget build(BuildContext context) {
   return MaterialApp(
     home: Scaffold(
       body: SfDateRangePicker(
         controller: _pickerController,
         view: DateRangePickerView.century,
         selectionMode: DateRangePickerSelectionMode.range,
         yearCellStyle: DateRangePickerYearCellStyle(
           leadingDatesDecoration: BoxDecoration(
               color: Colors.grey.withOpacity(0.4),
               border: Border.all(color: const Color(0xFF2B732F),
                    width: 1),
               shape: BoxShape.circle),
         ),
       ),
     ),
   );
 }

Implementation

final Decoration? leadingDatesDecoration;