Category / Section
How to customize leading and trailing dates using cell builder in the Flutter Date Range Picker (SfDateRangePicker)
1 min read
In the Flutter date range picker, customize the leading and the trailing dates by using the cellBuilder property of the SfDateRangePicker.
Find out the middle date month. If the details (month) of the DateRangePickerCellDetails is not equal to the middle date month, then consider a different text style for that month.
child: SfDateRangePicker(
monthViewSettings: DateRangePickerMonthViewSettings(
showTrailingAndLeadingDates: true),
cellBuilder:
(BuildContext context, DateRangePickerCellDetails details) {
int middleDateMonth = details
.visibleDates[details.visibleDates.length ~/ 2].month;
if (details.date.month != middleDateMonth) {
return Center(
child: Container(
child: Text(
DateFormat('d').format(details.date),
style: TextStyle(color: Colors.grey),
)),
);
} else {
return Center(
child: Container(
child: Text(DateFormat('d').format(details.date))),
);
}
})
