Flutter Navigation Drawer from Basic to Custom Drawer
Tags: flutter, dart, programming, mobile
Published: 2020-01-12 16:59:04

---
title: Flutter Navigation Drawer from Basic to Custom Drawer
published: true
description: Implementing flutter navigationd drawer and customize it
tags: flutter, dart, programming, mobile
cover_image: https://mightytechno.com/wp-content/uploads/2019/11/flutter-slider.png
canonical_url: https://mightytechno.com/flutter-navigation-drawer/
---


When comes to the navigation in app, Navigation drawer can be considered as a one of the one primary methods of Navigation

In Flutter, Navigation Drawer comes with the Scaffold widget. Therefore before adding a navigation drawer we need to define a Scaffold.

When we creating a sample flutter app, it comes with the default scaffold. There is an option to set a drawer like below.

```dart
            Scaffold(
              drawer: 
            )
```
#Create a basic navigation drawer

Now we already have a skeleton with the Scaffold widget. For that, we need to set Drawer widget.

To properly structuring the Drawer you need to set Header part and the below you can add some menu items. For that, you have to create a Listview and add the first child as a DrawerHeader and after that, you can add ListTile widget to show other menu items.

```dart
    drawer: Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
              DrawerHeader(
                   child: Text("Header"),
                 ),
              ListTile(
                  title: Text("Home"),
                )
        ],
      ),
  ),
```

#Navigation Drawer header image

Before adding an image you have to make an assets folder and create an images folder inside that. Then add your image to that folder.

Next inside the pubspec.yaml you need to import that asset. For that under the flutter add a assets section and image like below

```dart
 flutter:
   assets:
     - images/header.jpeg

```
The next thing needs to do is provide decoration to DrawerHeader. In there you can use set image using DecorationImage widget. Please remember to set fit type a BoxFit.cover

```dart
 drawer: Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          DrawerHeader(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage("images/header.jpeg"),
                fit: BoxFit.cover
              )
            ),
            child: Text("Header"),
          ),
          ListTile(
            title: Text("Home"),
          )
        ],
      ),
  )

```

#Navigation Drawer Sticky header
When you add drawer items inside the ListView it will scroll the all the child content when scroll. If you want to change that to keep the header part sticky and move only the below items you have to do some changes to the widget structure

```dart
 Drawer(
      child: Column(
          children: [
            Expanded(
              flex: 1,
              child: Container(
                width: MediaQuery.of(context).size.width * 0.85,
                child: DrawerHeader(
                  decoration: BoxDecoration(
                      image: DecorationImage(
                          image: AssetImage("images/header.jpeg"),
                          fit: BoxFit.cover)),
                  child: Text("Header"),
                ),
              ),
            ),
            Expanded(
              flex: 2,
              child: ListView(children: [
                ListTile(
                  title: Text("Home"),
                  onTap: () {
                    Navigator.of(context).pop();
                  },
                ),
                ListTile(
                  title: Text("Home"),
                  onTap: () {
                    Navigator.of(context).pop();
                  },
                ),
                ListTile(
                  title: Text("Home"),
                  onTap: () {
                    Navigator.of(context).pop();
                  },
                ),
                ListTile(
                  title: Text("Home"),
                  onTap: () {
                    Navigator.of(context).pop();
                  },
                ),
                ListTile(
                  title: Text("Home"),
                  onTap: () {
                    Navigator.of(context).pop();
                  },
                ),
                ListTile(
                  title: Text("Home"),
                  onTap: () {
                    Navigator.of(context).pop();
                  },
                ),
                ListTile(
                  title: Text("Home"),
                  onTap: () {
                    Navigator.of(context).pop();
                  },
                ),
                ListTile(
                  title: Text("Home"),
                  onTap: () {
                    Navigator.of(context).pop();
                  },
                )
              ]),
            )
          ],
        ),
  )
```

![Navigation Drawer Sticky header](https://mightytechno.com/wp-content/uploads/2019/11/q2-191x300.png)


#Close Navigation Drawer programmatically

It's pretty easy to close the drawer programmatically. You just need only use the pop method in Navigation class for the current context.

```dart
        ListTile(
            title: Text("Home"),
            onTap: (){
              Navigator.of(context).pop();
            },
          )

```

#Open Navigation Drawer programmatically
First, you must set a key to the scaffold to identify. You can create a new object of  GlobalKey class and set that to the scaffold key. Then using that you can access the current state of the Scaffold and open the drawer by calling openDrawer method.

You can call this method from any button and in here I added a FlatButton to the body and from there I am going to open the drawer. You can also add a custom button to AppBar and trigger like this to open a drawer.


```dart
   final GlobalKey _scaffoldKey = new GlobalKey();
```

```dart
   return Scaffold(
      key: _scaffoldKey
      ) // set key
```

```dart
     FlatButton(
              child: Text("Open Navigation"),
              onPressed: (){
                _scaffoldKey.currentState.openDrawer();
              },
            ),
```

#Navigation Drawer hamburger icon change and colour change

If you are using Appbar you can add leading Icon to replace the hamburger Icon. You can set IconButton for that and setting the colour will also change the Icon colour of that button.

But when you add a custom button it will lose the drawer open capability. But you can use the same old method to open the drawer programmatically by calling openDrawer method.


```dart
appBar: AppBar(
  leading: IconButton(
    icon: Icon(Icons.gamepad,color: Colors.yellow,),
    onPressed: (){
      _scaffoldKey.currentState.openDrawer();
    },
   ),
   title: Text(widget.title),
  ),
```

#Navigation Drawer in the right side

It pretty easy to move drawer from left to right. When you are creating a drawer in the first place, it uses drawer option in Scaffold. You just need only to change that to endDrawer and the drawer will be open from the right. Also, hamburger menu will be a move to the right.

```dart
return Scaffold(
    key: _scaffoldKey,
   endDrawer: Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: [
        DrawerHeader(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage("images/header.jpeg"),
              fit: BoxFit.cover
            )
          ),
          child: Text("Header"),
        ),
        ListTile(
          title: Text("Home"),
          onTap: (){
            Navigator.of(context).pop();
          },
        )
      ],
    ),
), 
```
![Navigation Drawer in right side](https://mightytechno.com/wp-content/uploads/2019/11/q1-191x300.png)

#Custom Navigation drawer
Drawer inside the Scaffold accepts Widget as a parameter. Therefore we can add custom widget without using Drawer widget inside the navigation.

In here I use Container as a main widget and wrap the other content inside that. Now when you test you will be able to see a full-screen drawer.

```dart
drawer: Container(
    width: MediaQuery.of(context).size.width,
    height: MediaQuery.of(context).size.height,
    color: Colors.white,
    child: ListView(
      padding: EdgeInsets.zero,
      children: [
        DrawerHeader(
          decoration: BoxDecoration(
              image: DecorationImage(
                  image: AssetImage("images/header.jpeg"),
                  fit: BoxFit.cover)),
          child: Text("Header"),
        ),
        ListTile(
          title: Text("Home"),
          onTap: () {
            Navigator.of(context).pop();
          },
        )
      ],
    ),
  ),
```
![Custom Navigation drawer](https://mightytechno.com/wp-content/uploads/2019/11/q3-191x300.png)




###Conclusion
I hope you get a better idea about navigation drawer implementation in Flutter and how to customize drawer as you need. If you have any question feel free to ask from me. 


Check the Video for More
{% youtube vmy9CLah_Lc %}

Originally published at [mightytechno](https://mightytechno.com/flutter-navigation-drawer/)

Connect with me - [Instagram](https://www.instagram.com/mighty_techno) |[Blog](https://mightytechno.com/) |[Youtube](https://www.youtube.com/channel/UCwxiHP2Ryd-aR0SWKjYguxw)