We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: Flutter |
Control: SfDateRangePicker |
Published Date: January 27, 2021 |
Last Revised Date: May 5, 2021

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

 

          Decade view

decade view

 

         Century view

century view

 

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile