How to customize the header view of the Flutter Date Range Picker?
In the Flutter Date Range Picker, you can create your own custom header by hiding the default header and implementing a custom one.
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, ) ], );
|
|
|
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:
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:
Use 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(() {});
});
}
Screenshots:
|
|
|
Conclusion
I hope you enjoyed learning about how to customize the header view of the Flutter Date Range Picker.
You can refer to our Flutter Date Range Picker feature tour page to learn about its other groundbreaking feature representations. You can also explore our documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
