| layout | post |
|---|---|
| title | Builders in Flutter Date Range Picker widget | Syncfusion |
| description | Learn here all about Builders feature of Syncfusion Flutter Date Range Picker (SfDateRangePicker) widget and more. |
| platform | Flutter |
| control | SfDateRangePicker |
| documentation | ug |
The date range picker allows you to create a responsive UI with the conditions based on a widget’s details, and to design and create your custom view to the month cells and year cells in the date range picker.
The DateRangePickerCellBuilder allows you to design your custom view and assign the view to the month and year view cells of the date range picker by returning an appropriate widget in the cellBuilder of SfDateRangePicker.
DateRangePickerCellDetails: Returns the details of the cell.
date: The date associate with the cell.bound: Returns the cell bounds.visibleDates: The visible dates of the current view.
{% tabs %} {% highlight dart hl_lines="12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 3 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63" %}
class MyAppState extends State { final DateRangePickerController _controller = DateRangePickerController();
@override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: SafeArea( child: SfDateRangePicker( controller: _controller, cellBuilder: ( BuildContext context, DateRangePickerCellDetails details, ) { final bool isToday = isSameDate(details.date, DateTime.now()); final bool isBlackOut = isBlackedDate(details.date); final bool isSpecialDate = isSpecialDay(details.date); return Container( margin: EdgeInsets.all(2), padding: EdgeInsets.only(top: 10), decoration: BoxDecoration( color: Colors.blueAccent, border: isToday ? Border.all(color: Colors.black, width: 2) : null, ), child: Column( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ Text( details.date.day.toString(), style: TextStyle( fontSize: 13, fontWeight: FontWeight.bold, ), ), isBlackOut ? Icon(Icons.block_sharp, size: 13) : isSpecialDate ? Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Icon(Icons.cake, size: 13), Icon(Icons.celebration, size: 13), Icon(Icons.audiotrack, size: 13), ], ) : Container(), ], ), ); }, ), ), ), ); }
bool isSpecialDay(DateTime date) { if (date.day == 20 || date.day == 21 || date.day == 24 || date.day == 25) { return true; } return false; }
bool isSameDate(DateTime date, DateTime dateTime) { if (date.year == dateTime.year && date.month == dateTime.month && date.day == dateTime.day) { return true; }
return false;
}
bool isBlackedDate(DateTime date) { if (date.day == 17 || date.day == 18) { return true; } return false; } }
{% endhighlight %} {% endtabs %}
NOTE
- Use HijriDateRangePickerCellDetails for the SfHijriDateRangePicker.