headerStyle property

DateRangePickerHeaderStyle headerStyle

Sets the style for customizing the SfDateRangePicker header view.

Allows to customize the DateRangePickerHeaderStyle.textStyle, DateRangePickerHeaderStyle.textAlign and DateRangePickerHeaderStyle.backgroundColor of the header view in SfDateRangePicker.

See also:

• DateRangePickerHeaderStyle, which contains options to customize the header view of the date range picker.
• headerHeight, which is the size of the header view in the date range picker.
• showNavigationArrow, which displays the navigation arrows on the header view of the date range picker.
• monthFormat, which allows to customize the month text in the header view also in the year cell view of date range picker.
• Knowledge base: How to style a header
• Knowledge base: How to select all days when clicking on the day header
• Knowledge base: How to restrict the year view navigation when tapping on header view
• Knowledge base: How to customize the header in Flutter multi date range picker
• Knowledge base: How to customize the header view

Widget build(BuildContext context) {
   return MaterialApp(
     home: Scaffold(
       body: SfDateRangePicker(
         view: DateRangePickerView.month,
         headerStyle: DateRangePickerHeaderStyle(
           textAlign: TextAlign.left,
           textStyle: TextStyle(
               color: Colors.blue, fontSize: 18,
                    fontWeight: FontWeight.w400),
           backgroundColor: Colors.grey,
         ),
       ),
     ),
   );
 }

Implementation

final DateRangePickerHeaderStyle headerStyle;