How to style the year, decade, century views in the Flutter Date Range Picker (SfDateRangePicker)

3 mins read

In the Flutter date range picker, you can customize the appearance of year, decade, and century view cells using the properties of the DateRangePickerYearCellStyle. class.

Available Style Properties:

textStyle: Customizes the text style for the year, decade, and century cell text.
disableDatesTextStyle: Defines the text style for disabled dates.
leadingDatesTextStyle: Sets the text style for leading dates.
todayTextStyle: Specifies the text style for the current date.
cellDecoration: Applies decoration to the year, decade, and century cells.
todayCellDecoration: Applies decoration to the current date cell.
leadingDatesDecoration: Sets decoration for leading date cells.
disabledDatesDecoration: Defines decoration for disabled date cells.

child: SfDateRangePicker(
    view: DateRangePickerView.year,
    yearCellStyle: DateRangePickerYearCellStyle(
      disabledDatesDecoration: BoxDecoration(
          color: const Color(0xFFe5e4cc),
          border:
              Border.all(color: const Color(0xFF19456b), width: 2),
          shape: BoxShape.rectangle),
      disabledDatesTextStyle: const TextStyle(color: Colors.black),
      leadingDatesDecoration: BoxDecoration(
          color: const Color(0xFFbac7a7),
          border:
              Border.all(color: const Color(0xFF19456b), width: 2),
          shape: BoxShape.rectangle),
      cellDecoration: BoxDecoration(
          color: const Color(0xFF889e81),
          border:
              Border.all(color: const Color(0xFF19456b), width: 2),
          shape: BoxShape.rectangle),
      leadingDatesTextStyle: const TextStyle(color: Colors.black),
      textStyle: const TextStyle(color: Colors.black),
      todayCellDecoration: BoxDecoration(
          color: const Color(0xFF698474),
          border:
              Border.all(color: const Color(0xFF19456b), width: 2),
          shape: BoxShape.rectangle),
      todayTextStyle: const TextStyle(color: Colors.black),
    )),

View the Github Sample here.

Year view

year view