Category / Section
How to customize the Date Range Picker cells using builder in the Flutter (SfDateRangePicker)
1 min read
In the Flutter Date Range Picker, you can customize the date range picker cells using the cellBuilder property.
STEP 1: Use the required widget for cell customization. In this sample Text and Icon Widget used for customization.
Widget cellBuilder(
BuildContext context, DateRangePickerCellDetails cellDetails) {
if (_controller.view == DateRangePickerView.month) {
return Column(
children: [
Container(
child: Icon(
Icons.wb_sunny,
color: Colors.yellow,
),
),
Container(
child: Text(DateFormat('dd').format(cellDetails.date)),
)
],
);
} else if (_controller.view == DateRangePickerView.year) {
return Column(
children: [
Container(
child: Icon(
Icons.wb_sunny,
color: Colors.yellow,
),
),
Container(
child: Text(DateFormat('MMM').format(cellDetails.date)),
)
],
);
} else if (_controller.view == DateRangePickerView.decade) {
return Column(
children: [
Container(
child: Icon(
Icons.wb_sunny,
color: Colors.yellow,
),
),
Container(
child: Text(DateFormat('yyy').format(cellDetails.date)),
)
],
);
} else {
final int yearValue = cellDetails.date.year;
return Column(
children: [
Container(
child: Icon(
Icons.wb_sunny,
color: Colors.yellow,
),
),
Container(
child:
Text(yearValue.toString() + ' - ' + (yearValue + 9).toString()),
)
],
);
}
}
STEP 2: Assign customized widget to the cellBuilder property of the Flutter date range picker.
child: SfDateRangePicker( view: DateRangePickerView.month, controller: _controller, cellBuilder: cellBuilder, ),
Month view
| Year view
|
Decade view
| Century view
|
