Articles in this section
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(),
)),

View sample in GitHub

viewswitch gif

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied