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 |