We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
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.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
