How to Create Drawer Navigation in Flutter: Simple Guide

To create drawer navigation in Flutter, use the Drawer widget inside a Scaffold and provide menu items inside it. Open the drawer by tapping the menu icon automatically added by AppBar when a drawer is present.

Syntax

The main parts to create drawer navigation are:

• Scaffold: The basic layout widget that holds the drawer.
• Drawer: The side panel widget that slides in from the left.
• ListView: Used inside the drawer to list clickable menu items.
• AppBar: Automatically shows a menu icon to open the drawer.

dart

Scaffold(
  appBar: AppBar(title: Text('Title')),
  drawer: Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: [
        DrawerHeader(child: Text('Header')),
        ListTile(title: Text('Item 1'), onTap: () {}),
        ListTile(title: Text('Item 2'), onTap: () {}),
      ],
    ),
  ),
  body: Center(child: Text('Main content')),
)

Output

A screen with an app bar and a hamburger menu icon that opens a side drawer with header and two items.

Example

This example shows a complete Flutter app with drawer navigation. The drawer has a header and two clickable items that close the drawer when tapped.

dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Drawer Navigation')),
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: [
              DrawerHeader(
                decoration: BoxDecoration(color: Colors.blue),
                child: Text('Menu', style: TextStyle(color: Colors.white, fontSize: 24)),
              ),
              ListTile(
                title: Text('Home'),
                onTap: () {
                  Navigator.pop(context); // Close drawer
                },
              ),
              ListTile(
                title: Text('Settings'),
                onTap: () {
                  Navigator.pop(context); // Close drawer
                },
              ),
            ],
          ),
        ),
        body: Center(child: Text('Welcome to the app!')),
      ),
    );
  }
}

Output

App with a top app bar and hamburger menu icon. Tapping the icon slides in a drawer from the left with a blue header and two menu items. Tapping an item closes the drawer.

Common Pitfalls

Common mistakes when creating drawer navigation include:

• Not placing the Drawer inside the Scaffold, so the drawer won't open.
• Forgetting to close the drawer after tapping a menu item, which can confuse users.
• Using Navigator.pop(context) incorrectly or not at all to close the drawer.
• Not setting padding: EdgeInsets.zero on the drawer's ListView, causing unwanted top padding.

dart

Wrong:
Scaffold(
  appBar: AppBar(title: Text('No Drawer')),
  body: Center(child: Text('No drawer here')),
)

Right:
Scaffold(
  appBar: AppBar(title: Text('With Drawer')),
  drawer: Drawer(child: ListView(padding: EdgeInsets.zero, children: [])),
  body: Center(child: Text('Drawer available')),
)

Quick Reference

Tips for smooth drawer navigation:

• Always use Scaffold to hold your drawer.
• Use DrawerHeader for a nice header area.
• Close the drawer on item tap with Navigator.pop(context).
• Use ListTile for clickable menu items.
• Test drawer on different screen sizes for responsiveness.

Key Takeaways

Use the Drawer widget inside Scaffold to create drawer navigation.

AppBar automatically shows a menu icon to open the drawer when Drawer is present.

Close the drawer on menu item tap using Navigator.pop(context) to improve user experience.

Use DrawerHeader and ListTile widgets to build a clear and accessible menu.

Set ListView padding to EdgeInsets.zero inside Drawer to avoid unwanted spacing.