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, ),
|
This page will automatically be redirected to the sign-in page in 10 seconds.