Category / Section
How to use navigation drawer for view switching in the Flutter Calendar
1 min read
In the Flutter Event Calendar, you can use navigation drawer for view switching by loading controller views in drawer of the Scaffold widget and show the calendar in body region.
Inside the state initializethe default values for 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(), )),
|
