Category / Section
How to customize the special time region using custom builder in the Flutter Calendar
2 mins read
In the Flutter Event Calendar, you can use the custom builder for the special time region by using the timeRegionBuilder property of the calendar.
STEP1: You can use any widget for special time region. Here we are using Icon widget for customization.
Widget timeRegionBuilder(
BuildContext context, TimeRegionDetails timeRegionDetails) {
if (timeRegionDetails.region.text == "Lunch") {
return Container(
color: timeRegionDetails.region.color,
alignment: Alignment.center,
child: Icon(
Icons.restaurant,
color: Colors.grey.withOpacity(0.5),
),
);
} else if (timeRegionDetails.region.text == "WeekEnd") {
return Container(
color: timeRegionDetails.region.color,
alignment: Alignment.center,
child: Icon(
Icons.weekend,
color: Colors.grey.withOpacity(0.5),
),
);
}
}
STEP 2: Assign the widget to the timeRegionBuilder property of the calendar.
child: SfCalendar(
view: CalendarView.week,
specialRegions: _getTimeRegions(),
timeRegionBuilder: timeRegionBuilder,
)),
List<TimeRegion> _getTimeRegions() {
final List<TimeRegion> regions = <TimeRegion>[];
DateTime date = DateTime.now();
regions.add(TimeRegion(
startTime: DateTime(2020, 12, 15, 13, 0, 0),
endTime: DateTime(2020, 12, 15, 14, 0, 0),
enablePointerInteraction: true,
color: Colors.grey.withOpacity(0.2),
recurrenceRule: 'FREQ=DAILY;INTERVAL=1',
text: 'Lunch',
));
regions.add(TimeRegion(
startTime: DateTime(2020, 12, 15, 00, 0, 0),
endTime: DateTime(2020, 12, 15, 24, 0, 0),
recurrenceRule: 'FREQ=WEEKLY;INTERVAL=1;BYDAY=SAT,SUN',
color: Color(0xffbD3D3D3),
text: 'WeekEnd',
));
return regions;
}
|
