How to customize the header view of the Flutter Date Range Picker?

2 mins read

In the Flutter Date Range Picker, you can add your custom header, and it can be achieved by hiding the default header and placing your custom header in the date range picker.

Step 1:

Set the `headerHeight` property value to 0 to hide the default header. Please find the following image for date picker without header.

 
 
 
body: Column(
  children: <Widget>[
    Card(
      margin: const EdgeInsets.fromLTRB(50, 0, 50, 50),
      child: SfDateRangePicker(
          controller: _controller,
          view: DateRangePickerView.month,
          headerHeight: 0, 
    )
  ],
);

without header

Step 2:

For design own custom header using the Row widget inside the Column widget for the header customization.

Row(
  children: <Widget>[
    Container(
      height: cellWidth,
      width: cellWidth + 10,
    ),
    Container(
        width: cellWidth,
        height: cellWidth,
        color: Color(0xFFfa697c),
        child: IconButton(
          icon: Icon(Icons.arrow_left),
          color: Colors.white,
          iconSize: 20,
          highlightColor: Colors.lightGreen,
          onPressed: () {
            setState(() {
              _controller.backward!();
            });
          },
        )),
    Container(
      color: Color(0xFFfa697c),
      height: cellWidth,
      width: cellWidth * 4.5,
      child: Text(headerString,
          textAlign: TextAlign.center,
          style: TextStyle(
              fontSize: 25, color: Colors.white, height: 1.4)),
    ),
    Container(
        width: cellWidth,
        height: cellWidth,
        color: Color(0xFFfa697c),
        child: IconButton(
          icon: Icon(Icons.arrow_right),
          color: Colors.white,
          highlightColor: Colors.lightGreen,
          onPressed: () {
            setState(() {
              _controller.forward!();
            });
          },
        )),
    Container(
      height: cellWidth,
      width: cellWidth,
    )
  ],
),

Step 3:

Then, add the custom header in the date range picker.

Card(
  margin: const EdgeInsets.fromLTRB(50, 0, 50, 50),
  child: SfDateRangePicker(
      controller: _controller,
      view: DateRangePickerView.month,
      headerHeight: 0,
      onViewChanged: viewChanged,
      monthViewSettings: DateRangePickerMonthViewSettings(
          showTrailingAndLeadingDates: true,
          viewHeaderStyle: DateRangePickerViewHeaderStyle(
              backgroundColor: Color(0xFFfcc169))),
      monthCellStyle: DateRangePickerMonthCellStyle(
          cellDecoration: BoxDecoration(color: Color(0xFF6fb98f)),
          leadingDatesDecoration:
          BoxDecoration(color: Color(0xFF6fb98f)),
          trailingDatesDecoration:
          BoxDecoration(color: Color(0xFF6fb98f)))),
)

Step 4:

Using the `onViewChanged` callback of the date picker, you can get the mid date of the visible date range and assign it to the header string.

void viewChanged(DateRangePickerViewChangedArgs args) {
  final DateTime visibleStartDate = args.visibleDateRange.startDate!;
  final DateTime visibleEndDate = args.visibleDateRange. endDate!;
  final int totalVisibleDays = (visibleStartDate.difference(visibleEndDate).inDays);
  final DateTime midDate = 
     visibleStartDate.add(Duration(days: totalVisibleDays ~/ 2));
  headerString = DateFormat('MMMM yyyy').format(midDate).toString();
  SchedulerBinding.instance!.addPostFrameCallback((duration) {
    setState(() {});
  });
}

View sample in Github.

Screenshots:

with headers

Did you find this information helpful?

Yes