Category / Section
How to use navigation drawer for view switching in the Flutter Calendar
2 mins read
In the Flutter Event Calendar, you can implement a navigation drawer for view switching by loading controller views in the drawer of the Scaffold widget while displaying the calendar in the body region.
First, initialize the default values for the calendar.
final CalendarController _controller = CalendarController(); List<String> _items = [ 'Day view', 'Week view', 'Work week view', 'Month view', 'Schedule view', 'Timeline day', 'Timeline week', 'Timeline work week', 'Timeline month' ];
Place the ListView.builder in the drawer of the Scaffold widget for view switching.
drawer: Drawer(
child: ListView.builder(
itemCount: _items.length,
itemBuilder: (context, index) {
return GestureDetector(
child: ListTile(
title: Text('${_items[index]}'),
),
onTap: () {
if (index == 0) {
_controller.view = CalendarView.day;
Navigator.pop(context);
} else if (index == 1) {
_controller.view = CalendarView.week;
Navigator.pop(context);
} else if (index == 2) {
_controller.view = CalendarView.workWeek;
Navigator.pop(context);
} else if (index == 3) {
_controller.view = CalendarView.month;
Navigator.pop(context);
} else if (index == 4) {
_controller.view = CalendarView.schedule;
Navigator.pop(context);
} else if (index == 5) {
_controller.view = CalendarView.timelineDay;
Navigator.pop(context);
} else if (index == 6) {
_controller.view = CalendarView.timelineWeek;
Navigator.pop(context);
} else if (index == 7) {
_controller.view = CalendarView.timelineWorkWeek;
Navigator.pop(context);
} else if (index == 8) {
_controller.view = CalendarView.timelineMonth;
Navigator.pop(context);
}
});
},
),
),
Place the calendar inside the body of Scaffold widget.
body: SafeArea( child: SfCalendar( view: CalendarView.month, controller: _controller, dataSource: _getCalendarDataSource(), )),
|
