How to Add Drawer Navigation in Flutter

In this example, we are going to show you how to add drawer menu navigation to your Flutter app. Drawer Navigation is an important component where you can list the main menu inside it to navigate to different pages of the app. See the example below:

Scaffold(
    appBar: AppBar( //add appbar
      title: Text("Drawer in Flutter Flutter"),
    ),
    drawer: Drawer() //add drawer
    //when you add drawer, the menu icon will appear on appbar
)

You can pass Drawer() widget on "drawer" parameter of Scaffold Widget.

Hamburger icon on AppBar appears when you add Drawer.

If you want to change the drawer icon, then have a look at: How to Change Drawer Icon in Flutter

You can also add Menus inside the Drawer using following code:

Drawer( 
    child: SafeArea( 
      child:Column(
          children: [
              ListTile(
                dense: true,
                title: Text("Home Page"),
                leading: Icon(Icons.home),
                onTap: (){
                    //action when this menu is pressed
                },
              ),

              ListTile(
                dense: true,
                title: Text("My Profile"),
                leading: Icon(Icons.person),
                onTap: (){
                    //action when this menu is pressed
                },
              ),


              ListTile(
                dense: true,
                title: Text("My Orders"),
                leading: Icon(Icons.add_box),
                onTap: (){
                    //action when this menu is pressed
                },
              ),

              ListTile(
                dense: true,
                title: Text("My Favourites"),
                leading: Icon(Icons.monitor_heart),
                onTap: (){
                    //action when this menu is pressed
                },
              )
        ],
      )
    ),
)

Output will look like below:

You can also add expandable menu items: How to Add Expandable Navigation Menu on Drawer in Flutter

If you want to open this drawer programmatically then have a look at: How to Open or Close Drawer Programmatically in Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {  

  final scaffoldKey = GlobalKey<ScaffoldState>();
  //key for scaffold, required to manually open/close drawer

  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          key: scaffoldKey,
          appBar: AppBar(
            title: Text("Drawer in Flutter Flutter"),
          ),
          drawer: Drawer(
              
              child: SafeArea( 
                child:Column(
                    children: [
                       ListTile(
                          dense: true,
                          title: Text("Home Page"),
                          leading: Icon(Icons.home),
                          onTap: (){
                              //action when this menu is pressed
                          },
                       ),

                       ListTile(
                          dense: true,
                          title: Text("My Profile"),
                          leading: Icon(Icons.person),
                          onTap: (){
                              //action when this menu is pressed
                          },
                       ),


                       ListTile(
                          dense: true,
                          title: Text("My Orders"),
                          leading: Icon(Icons.add_box),
                          onTap: (){
                              //action when this menu is pressed
                          },
                       ),

                       ListTile(
                          dense: true,
                          title: Text("My Favourites"),
                          leading: Icon(Icons.monitor_heart),
                          onTap: (){
                              //action when this menu is pressed
                          },
                       )
                  ],
                )
              ),
          ),
          
          body: Container(
              height: 150,
              child: Center( 
                 child: ElevatedButton(  //open/close drawer by code
                    child: Text("Open/Close Drawer"),
                    onPressed: (){
                        if(scaffoldKey.currentState!.isDrawerOpen){
                            scaffoldKey.currentState!.closeDrawer();
                            //close drawer, if drawer is open
                        }else{
                            scaffoldKey.currentState!.openDrawer();
                            //open drawer, if drawer is closed
                        }
                    },
                 ),
              ),
          )
       );
  }
}

If you want to make drawer reusable on different pages, then have a look at How to Make Reusable App Bar and Drawer in Flutter

In this way, you can add drawer menu navigation in your Flutter app easily.

Share This Facebook Twitter Reddit LinkedIn Pinterest

How to Open or Close Drawer Programmatically in Flutter

How to Add Expandable Navigation Menu on Drawer in Flutter