timeRegionBuilder property

A builder that builds a widget that replaces the time region view in day, week, workweek, and timeline day, week, workweek views.

See also:

specialRegions, to set the special time regions in the calendar.
TimeRegion, to now the details about the special time regions and it's properties in calendar.
Knowledge base: How to customize special regions with builder


List<TimeRegion> _getTimeRegions() {
   final List<TimeRegion> regions = <TimeRegion>[];
   DateTime date = DateTime.now();
   date = DateTime(date.year, date.month, date.day, 12, 0, 0);
   regions.add(TimeRegion(
       startTime: date,
       endTime: date.add(Duration(hours: 2)),
       enablePointerInteraction: false,
       color: Colors.grey.withValues(alpha:0.2),
       text: 'Break'));

   return regions;
 }

 @override
 Widget build(BuildContext context) {
   return MaterialApp(
       home: Scaffold(
     body: SfCalendar(
       view: CalendarView.day,
       specialRegions: _getTimeRegions(),
       timeRegionBuilder:
           (BuildContext context, TimeRegionDetails timeRegionDetails) {
         return Container(
           margin: EdgeInsets.all(1),
           alignment: Alignment.center,
           child: Text(
             timeRegionDetails.region.text!,
             style: TextStyle(color: Colors.black),
           ),
           decoration: BoxDecoration(
               shape: BoxShape.rectangle,
               borderRadius: BorderRadius.all(Radius.circular(4.0)),
               gradient: LinearGradient(
                   colors: [timeRegionDetails.region.color!, Colors.cyan],
                   begin: Alignment.centerRight,
                   end: Alignment.centerLeft)),
         );
       },
     ),
   ));
 }

Implementation

SfCalendar class