Flutter Drawer

Lear to use Drawer navigation in your Flutter App. Drawers are very important to place navigation menus.

The drawer is a slider navigation panel where you and put all menus and navigation route links of your app. When you add a drawer to Scaffold, the menu icon will appear on appBar.

To insert Drawer into your app, you need Scaffold() widget:

Scaffold(
   drawer: Drawer(
     child: Container(), //Content inside Drawer
   )
)

Constructor of Drawer() widget.

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

The properties of this constructor are explained below:

1. elevation - double

This property is used to raise the Drawer panel with shadow, you need to pass the double value which determines the height of elevation.

Drawer(
   elevation: 5.0,
)

2. child - Widget

This property is used to pass the content widget of Drawer. Whenever you press menu icon on appBar, the drawer will open with the child content with a downline widget tree. 

Drawer(
  child: SingleChildScrollView( 
    child: Container( 
      child: Text("This is content of drawer"),
    )
  )
)

Open or close drawer manually:

First, in the class, define GlobalKey for the current Scaffold State.

GlobalKey<ScaffoldState> scaffoldKey = new GlobalKey<ScaffoldState>();

Assign that key to Scaffold:

Scaffold(
    key: scaffoldKey,
)

Code to open Drawer:

if(scaffoldKey.currentState.isDrawerOpen){ //check if drawer is closed
     scaffoldKey.currentState.openDrawer(); //open drawer
}

Code to close Drawer:

if(scaffoldKey.currentState.isDrawerOpen){ //check if drawer is open
      Navigator.pop(context); //context of drawer is different 
}

Example Code:

import 'package:flutter/material.dart';

void main() {
   runApp(MyApp()); 
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return DefaultTabController( //controller for TabBar
      length: 2, //lenght of tabs in TabBar
      child: MaterialApp(
         home: HomePage(),
      )
    );
  }
}

class HomePage extends StatelessWidget{

  GlobalKey<ScaffoldState> scaffoldKey = new GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        key: scaffoldKey,
        backgroundColor: Colors.blue[100], //background color of scaffold
        appBar: AppBar(
            title:Text("Drawer Example"), //title of app
            backgroundColor: Colors.redAccent, //background color of app bar
        ),

        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              DrawerHeader( //header of drawer
                decoration: BoxDecoration(
                  color: Colors.redAccent,
                ),
                child: Text(
                  'My Drawer Header',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 24,
                  ),
                ),
              ),
              ListTile( //menu item of Drawer
                leading: Icon(Icons.home),
                title: Text('Home Page'),
              ),
              ListTile(
                leading: Icon(Icons.account_circle),
                title: Text('My Profile'),
              ),
              ListTile(
                leading: Icon(Icons.settings),
                title: Text('Account Settings'),
              ),
              ListTile( 
                onTap:(){
                  if(scaffoldKey.currentState.isDrawerOpen){ //check if drawer is open
                      Navigator.pop(context); //context of drawer is different 
                  }
                },
                leading:Icon(Icons.close),
                title: Text("Close Drawer")
              )
            ],
          ),
        ),
  
        body: Center( //content body on scaffold
            child: ElevatedButton( 
              onPressed: (){
                if(!scaffoldKey.currentState.isDrawerOpen){ //check if drawer is closed
                     scaffoldKey.currentState.openDrawer(); //open drawer
                }
              },
              child: Text("OPEN DRAWER"),
            )
        )
     );
  }
}

Output:

Menu Icon on AppBar Blank Drawer Drawer with child content