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 by hiding the default header and placing your custom header in its place.
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:
Create a custom header using the 'Row' widget inside a '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:
Use the `onViewChanged` callback of the date picker to 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 the Github Sample here.
Screenshot
|
|
|
|
|
|
