Flutter – Navigation Drawer

The mobile applications that use Material Designs have two primary options for navigation. These are namely the ‘Tabs’ and the ‘Drawers’. This article will primarily focus on Drawers. A drawer is used to provide access to different destinations and functionalities provided in your application. It is represented by three horizontal parallel lines on the upper end of the scaffold. For using the app drawer you need to import the material component package that is ” package: flutter/material.dart.” The Navigating AppDrawer is divided into three sections namely header, body, and footer. The idea is about having a navigator with a couple of items as the drawer’s child that will be navigated to different destinations on getting tapped. A Drawer has ListView or a Container with ListView as its child widgets that help to navigate to a specific destination.

Why Drawers? 

Drawers are very easy to implement as well as handy to balance different functionalities of your mobile application at the same time. Creating a drawer makes visiting different destinations in your app quite easy and manageable to a large extent, especially in the case of a complex application with many screens. You can easily switch between different screens and perform tasks. 

Syntax:

Drawer(
 {Key? key, 
 double elevation, 
 Widget? child, 
 String? semanticLabel}
) 

How to create a drawer in Flutter?

A drawer can be set using 4 simple steps: 

1. Create a flutter project: Open the terminal and navigate to the desired location you want to create your project. Using the “flutter create project_name” command creates your flutter project.

flutter create file_name

2. Create a scaffold widget: Inside the MyApp Class of your stateless/stateful widget return a scaffold widget. A Scaffold Widget provides a framework for implementing the basic visual layout structure of the flutter app.

Scaffold(
drawer: 

);

3. Add Drawer inside the scaffold: Set the scaffold’s drawer property to Drawer with ListView as its child or you can add a Container with a ListView as its child as well. Various ListViews contain desired items that needed to be displayed inside the drawer. 

Scaffold(
drawer: Drawer( 
//…
),);

4. Add a closing functionality: Navigator is used for implementing closing functionality on the drawer when the user wants to close it after tapping on some item. This can be done using

Navigator.of(context).pop();

A drawer is divided into three categories:

1. Standard Navigation Drawer: They provide user interaction with the screen content and drawer at the same time. 
2. Modal Navigation Drawer: These drawers block the user interaction with the rest of the screen and allow only the user to interact with the drawer only.
3. Bottom Navigation Drawer: These are similar to modal navigation drawers except the orientation of the drawer is towards the bottom section of the screen.

The Complete Code

Dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  static const header = 'GeeksforGeeks';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: header,
      home: MyHomePage(title: header),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        backgroundColor: Colors.green,
      ),
      body: const Center(
        child: Text(
          'Navigation Drawer Demo',
          style: TextStyle(fontSize: 20),
        ),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.green,
              ),
              child: Text(
                'Navigation Drawer',
                style: TextStyle(fontSize: 20),
              ),
            ),
            ListTile(
              leading: Icon(Icons.person),
              title: const Text(' My Profile '),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: Icon(Icons.book),
              title: const Text(' My Course '),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: Icon(Icons.workspace_premium),
              title: const Text(' Go Premium '),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: Icon(Icons.video_label),
              title: const Text(' Saved Videos '),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: Icon(Icons.edit),
              title: const Text(' Edit Profile '),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: Icon(Icons.logout),
              title: const Text('LogOut'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

Output: