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 in the Flutter multi date range picker (SfDateRangePicker)?

Platform: Flutter |
Control: SfDateRangePicker |
Published Date: August 18, 2020 |
Last Revised Date: April 7, 2021

In the Flutter date range picker, you can customize header of the multi picker, and it can be achieved by hiding the default header and placing your custom header in the place of default header.

 

Step 1:

Set the `headerHeight` property value to `0` to hide the default header.

 

Card(
  margin: const EdgeInsets.fromLTRB(50, 0, 35, 0),
  child: SfDateRangePicker(
    controller: _controller,
    view: DateRangePickerView.month,
    headerHeight: 0,
    enableMultiView: true,
    onViewChanged: viewChanged,
    monthViewSettings: DateRangePickerMonthViewSettings(
        viewHeaderStyle: DateRangePickerViewHeaderStyle(
      backgroundColor: Color(0xFFfcc169),
    )),
  ),
)

 

Step 2:

For design own custom header use the `Row` widget inside the `Column` widget.

 

Row(
  children: <Widget>[
    Container(
        height: 30,
        width: 105,
        margin: const EdgeInsets.only(left: 50, top: 10),
        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: 30,
      width: 345,
      margin: const EdgeInsets.only(top: 10),
      child: Text('$startMonthString - $endMonthString',
          textAlign: TextAlign.center,
          style: TextStyle(
              fontSize: 20, color: Colors.white, height: 1.5)),
    ),
    Container(
        height: 30,
        width: 105,
        margin: const EdgeInsets.only(right: 31, top: 10),
        color: Color(0xFFfa697c),
        child: IconButton(
          icon: Icon(Icons.arrow_right),
          color: Colors.white,
          highlightColor: Colors.lightGreen,
          onPressed: () {
            setState(() {
              _controller.forward!();
            });
          },
        )),
    Container()
  ],
),

 

Step 3:

Using the `onViewChanged` callback of the date picker, you can update the custom header values.

 

Card(
  margin: const EdgeInsets.fromLTRB(50, 0, 35, 0),
  child: SfDateRangePicker(
    controller: _controller,
    view: DateRangePickerView.month,
    headerHeight: 0,
    enableMultiView: true,
    onViewChanged: viewChanged,
    monthViewSettings: DateRangePickerMonthViewSettings(
        viewHeaderStyle: DateRangePickerViewHeaderStyle(
          backgroundColor: Color(0xFFfcc169),
        )),
  ),
)
 
void viewChanged(DateRangePickerViewChangedArgs args) {
  final DateTime startDate = args.visibleDateRange.startDate!;
  final DateTime endDate = args.visibleDateRange.endDate!;
  final int count = endDate.difference(startDate).inDays;
  _headerString = DateFormat('MMMM yyyy')
      .format(startDate.add(Duration(days: (count * 0.25).toInt())))
      .toString() + ' - ' +DateFormat('MMMM yyyy')
      .format(startDate.add(Duration(days: (count * 0.75).toInt())))
      .toString();
  SchedulerBinding.instance!.addPostFrameCallback((duration) {
    setState(() {});
  });
}

 

View sample in Github

Screenshot

 

 

header customization

 

 

 

 

 

 

ADD COMMENT
You must log in to leave a comment

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