cellBuilder property

HijriDateRangePickerCellBuilder? cellBuilder

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

See also:

• monthViewSettings, which allows to customize the month view in the hijri date range picker.
• monthCellStyle, which allows to customize the month cells in the hijri date range picker.
• yearCellStyle, which allows to customize the year cells in the hijri date range picker.
• 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

HijriDatePickerController _controller = HijriDatePickerController();

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

@override
Widget build(BuildContext context) {
  return MaterialApp(
      home: Scaffold(
    appBar: AppBar(
      title: const Text('Date range picker'),
    ),
    body: SfHijriDateRangePicker(
      controller: _controller,
      cellBuilder: (BuildContext context,
            HijriDateRangePickerCellDetails cellDetails) {
        if (_controller.view == HijriDatePickerView.month) {
          return Container(
            width: cellDetails.bounds.width,
            height: cellDetails.bounds.height,
            alignment: Alignment.center,
            child: Text(cellDetails.date.day.toString()),
          );
        } else if (_controller.view == HijriDatePickerView.year) {
          return Container(
            width: cellDetails.bounds.width,
            height: cellDetails.bounds.height,
            alignment: Alignment.center,
            child: Text(cellDetails.date.month.toString()),
          );
        } else if (_controller.view == HijriDatePickerView.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 HijriDateRangePickerCellBuilder? cellBuilder;