Drawer navigation in Flutter

Introduction

A drawer navigation lets users open a hidden menu from the side of the screen. It helps keep the app clean and easy to use by hiding extra options until needed.

When you want to show many navigation options without cluttering the main screen.

When you want a menu that slides in from the side on user tap or swipe.

When you want to group app sections in one place accessible from anywhere.

When you want a common place for settings, profile, or help links.

When you want to save screen space on small mobile devices.

Syntax

Flutter

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

The drawer property of Scaffold adds the side menu.

Use DrawerHeader for a top section inside the drawer.

Examples

A simple drawer with two menu items and a header.

Flutter

Scaffold(
  drawer: Drawer(
    child: ListView(
      children: [
        DrawerHeader(child: Text('Menu')),
        ListTile(title: Text('Home')),
        ListTile(title: Text('Settings')),
      ],
    ),
  ),
  appBar: AppBar(title: Text('App')),
  body: Center(child: Text('Welcome')),
)

Using a Column instead of ListView inside the drawer.

Flutter

Scaffold(
  drawer: Drawer(
    child: Column(
      children: [
        DrawerHeader(child: Text('User Info')),
        ListTile(title: Text('Profile')),
        ListTile(title: Text('Logout')),
      ],
    ),
  ),
  appBar: AppBar(title: Text('Profile Page')),
  body: Center(child: Text('User details here')),
)

Sample App

This app shows a drawer menu with a header and two items. The drawer opens when you swipe from the left or tap the menu icon in the app bar.

Flutter

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 Example')),
        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(
                leading: Icon(Icons.home),
                title: Text('Home'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              ListTile(
                leading: Icon(Icons.settings),
                title: Text('Settings'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
            ],
          ),
        ),
        body: Center(child: Text('Swipe from left or tap top-left icon to open drawer')),
      ),
    );
  }
}

Important Notes

Always include Navigator.pop(context) in onTap to close the drawer after selection.

Drawer works best with Scaffold as its parent widget.

Use EdgeInsets.zero padding in ListView to avoid unwanted space at top.

Summary

Drawer navigation hides menu options in a side panel accessible by swipe or icon tap.

Use Scaffold with the drawer property to add a drawer.

Include a header and list items inside the drawer for a clear menu.