Headers in Flutter Date Range Picker (SfDateRangePicker)

6 Jun 20234 minutes to read

You can customize the header of the data range picker using the headerStyle and headerHeight properties in date range picker.

Customize the header height

You can customize the height of the header of DateRangePicker by using the headerHeight property.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SfDateRangePicker(
      view: DateRangePickerView.month,
      headerHeight: 100,
    ),
  );
}

Header height Date Range Picker

Header appearance

You can customize the header style of the DataRangePicker by using the backgroundColor, textStyle, and textAlign properties of DateRangePickerHeaderStyle.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SfDateRangePicker(
      view: DateRangePickerView.month,
      headerStyle: DateRangePickerHeaderStyle(
          backgroundColor: Color(0xFF7fcd91),
          textAlign: TextAlign.center,
          textStyle: TextStyle(
            fontStyle: FontStyle.normal,
            fontSize: 25,
            letterSpacing: 5,
            color: Color(0xFFff5eaea),
          )),
    ),
  );
}

Header appearance Date Range Picker

View header

You can customize the view header of the DateRangePicker using the viewHeaderHeight and viewHeaderStyle properties of DateRangePickerMonthViewSettings.

Customize view header height

You can customize the view header height of DateRangePicker using the viewHeaderHeight property of DateRangePickerMonthViewSettings.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SfDateRangePicker(
      view: DateRangePickerView.month,
      monthViewSettings:
          DateRangePickerMonthViewSettings(viewHeaderHeight: 100),
    ),
  );
}

View Header height Date Range Picker

View header appearance

You can customize the view header style of DateRangePicker by using the backgroundColor, textStyle properties of DateRangePickerViewHeaderStyle.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SfDateRangePicker(
      view: DateRangePickerView.month,
      monthViewSettings: DateRangePickerMonthViewSettings(
          viewHeaderStyle: DateRangePickerViewHeaderStyle(
              backgroundColor: Color(0xFF7fcd91),
              textStyle: TextStyle(fontSize: 20, letterSpacing: 5))),
    ),
  );
}

View Header appearance Date Range Picker

View header day format

You can customize the view header of DateRangePicker by using the dayFormat property of DateRangePickerMonthViewSettings.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SfDateRangePicker(
        view: DateRangePickerView.month,
        monthViewSettings: DateRangePickerMonthViewSettings(dayFormat: 'EEE')),
  );
}

View Header format Date Range Picker

See also