How to add a navigation drawer in Flutter?

Navigation drawers are used when you have more than 5 levels of navigation hierarchy or to navigate between unrelated destinations in an app. Navigation drawers can be accessed by tapping on an icon at the top left corner of the app bar

Contents

1. How to create a simple Navigation Drawer

2. Add User Accounts Drawer Header and Navigation Items

3. Create a navigation drawer opening from the right side

4. Change the icon of the navigation drawer

5. Interactive Example

Simple Navigation Drawer

To create a simple navigation drawer, you just need to add a Drawer() widget to the drawer property of a Scaffold. An example code is shown below. The icon to open the drawer will come as default on the left side of the app bar. Click the icon and the drawer will open from the left side. To close the drawer, you just need to click anywhere outside the drawer.

User Account Drawer Header and Navigation Items

To create a user account header and menu items. Add a list view as the child of Drawer() widget. To add user account header, use UserAccountsDrawerHeader() widget. Here we have given properties like currentAccountPicture, accountName, and accountEmail. There several other properties too which can be given like otherAccountsPictures. For menu items, we have used a ListTile() widget with title and an icon.

Navigation Drawer from right side

This is just simple to do. Just give Drawer() widget for endDrawer property instead of drawer property. The code is shown below

Change icon of navigation drawer

To change the icon of the navigation drawer, give an iconButton() as the leading property of the app bar. Then open the drawer programmatically as shown in the code below.