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 customize the header view of the Flutter Date Range Picker?

Platform: Flutter |
Control: SfDateRangePicker

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

 

 

ADD COMMENT
You must log in to leave a comment
Comments
James
Oct 07, 2020

Hi, is it possible to change the order of the days of the week? I would like it to start on Monday.

Reply
Indumathi Ravichandran [Syncfusion]
Oct 08, 2020

Hi James,

Yes, it is possible to change the first day of the week in the date range picker by using the firstDayOfWeek property of the DateRangePickerMonthViewSettings. We have documented the same in our UG also. You can refer the same from the following link.

UG link: https://help.syncfusion.com/flutter/daterangepicker/getting-started#change-first-day-of-week

Also please find the pub document for the same.

Pub link: https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/firstDayOfWeek.html

We hope that this helps you. Please let us know if you need further assistance.

Regards, Indumathi R

Reply

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