Headers in Flutter Date Range Picker (SfDateRangePicker)

30 Jul 20254 minutes to read

You can customize the header of the date 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 SfDateRangePicker 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 SfDateRangePicker 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(0xFFffeaea),
          ),
      ),
    ),
  );
}

Header appearance Date Range Picker

View header

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

Customize view header height

You can customize the view header height of SfDateRangePicker 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 SfDateRangePicker 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 SfDateRangePicker 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