Category / Section
How to customize the header in the Flutter multi date range picker (SfDateRangePicker)?
3 mins read
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(() {});
});
}
Screenshot
|
|
|
|
|
|
