cellBuilder property

DateRangePickerCellBuilder? cellBuilder

A builder that builds a widget that replaces the cell in a month, year, decade and century views. The month cell, year cell, decade cell, century cell was differentiated by picker view.

See also:

• monthViewSettings, which allows to customize the month view in the date range picker.
• monthCellStyle, which allows to customize the month cells in the date range picker.
• yearCellStyle, which allows to customize the year cells in the date range picker.
• Knowledge base: How to customize the leading and trailing dates using cell builder
• Knowledge base: How to customize special dates using builder
• Knowledge base: How to select all days when clicking on day header
• Knowledge base: How to customize the date range picker cells using builder

DateRangePickerController _controller = DateRangePickerController();

@override
void initState() {
 _controller.view = DateRangePickerView.month;
 super.initState();
}

@override
Widget build(BuildContext context) {
  return MaterialApp(
      home: Scaffold(
    appBar: AppBar(
      title: const Text('Date range picker'),
    ),
    body: SfDateRangePicker(
      controller: _controller,
      cellBuilder:
          (BuildContext context, DateRangePickerCellDetails cellDetails) {
        if (_controller.view == DateRangePickerView.month) {
          return Container(
            width: cellDetails.bounds.width,
            height: cellDetails.bounds.height,
            alignment: Alignment.center,
            child: Text(cellDetails.date.day.toString()),
          );
        } else if (_controller.view == DateRangePickerView.year) {
          return Container(
            width: cellDetails.bounds.width,
            height: cellDetails.bounds.height,
            alignment: Alignment.center,
            child: Text(cellDetails.date.month.toString()),
          );
        } else if (_controller.view == DateRangePickerView.decade) {
          return Container(
            width: cellDetails.bounds.width,
            height: cellDetails.bounds.height,
            alignment: Alignment.center,
            child: Text(cellDetails.date.year.toString()),
          );
        } else {
          final int yearValue = (cellDetails.date.year ~/ 10) * 10;
          return Container(
            width: cellDetails.bounds.width,
            height: cellDetails.bounds.height,
            alignment: Alignment.center,
            child: Text(
               yearValue.toString() + ' - ' + (yearValue + 9).toString()),
          );
        }
      },
    ),
  ));
 }

Implementation

final DateRangePickerCellBuilder? cellBuilder;