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

1 min read

In the Flutter date range picker, you can style the year, decade and century view cells by using the textStyle, disableDatesTextStyle, leadingDatesTextStyle, todayTextStyle, cellDecoration, todayCellDecoration, leadingDatesDecoration, disabledDatesDecoration properties of the DateRangePickerYearCellStyle.

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 sample in GitHub

Year view

year view