How to customize the Date Range Picker cells using builder in the Flutter (SfDateRangePicker)
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 we're using Text and Icon Widget 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
|
Hi Dxv,
Regarding How do we modify the design for the selected cell? You can achieve your requirement by customizing the date range picker cells using the cellBuilder property in the Flutter Date Range Picker. We’ve prepared the sample for the same. Please find the sample below.
You can also customize the date range picker section by using the monthCellStyle of SfDateRangePicker. Please refer to our UG documentation to know more details about the selection cell customization,
SelectionCellCustomization CellcustomizationKB
We hope that this helps you, kindly revert us if you have any concerns.
Regards, Muniappan S.
how can we use "Image.asset" instead of "Icon" with
?
How do we modify the design for the selected cell?