Flutter: Drawer Widget and Side Menu Usage

Drawer is a side menu structure used to show multiple pages on the same screen. It opens and closes responsively to finger gestures. It can also be closed with the back button.

Live Demo

You can try this widget in the interactive example below:

💡 If the example above doesn't load, click DartPad to run it in a new tab.

Basic Usage

Scaffold(
  appBar: AppBar(title: Text('Drawer Example')),
  drawer: Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: [
        DrawerHeader(
          decoration: BoxDecoration(color: Colors.blue),
          child: Text('Menu Title'),
        ),
        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('Content')),
)

DrawerHeader

The header area at the top of the Drawer:

DrawerHeader(
  decoration: BoxDecoration(
    color: Colors.blue,
    image: DecorationImage(
      image: NetworkImage('https://example.com/bg.jpg'),
      fit: BoxFit.cover,
    ),
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      CircleAvatar(
        radius: 30,
        backgroundImage: NetworkImage('https://example.com/avatar.jpg'),
      ),
      SizedBox(height: 10),
      Text('Username', style: TextStyle(color: Colors.white)),
      Text('[email protected]', style: TextStyle(color: Colors.white70)),
    ],
  ),
)

UserAccountsDrawerHeader

Ready-made widget for user information:

UserAccountsDrawerHeader(
  accountName: Text('Ahmet Balaman'),
  accountEmail: Text('[email protected]'),
  currentAccountPicture: CircleAvatar(
    backgroundImage: NetworkImage('https://example.com/avatar.jpg'),
  ),
  decoration: BoxDecoration(color: Colors.blue),
  otherAccountsPictures: [
    CircleAvatar(child: Text('AB')),
  ],
)

Programmatic Opening/Closing

final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

Scaffold(
  key: _scaffoldKey,
  drawer: Drawer(...),
  body: ElevatedButton(
    onPressed: () {
      _scaffoldKey.currentState?.openDrawer();
    },
    child: Text('Open Drawer'),
  ),
)

// To close
Navigator.pop(context);
// or
_scaffoldKey.currentState?.closeDrawer();

EndDrawer (Right Side)

Scaffold(
  endDrawer: Drawer(
    child: ListView(...),
  ),
  appBar: AppBar(
    actions: [
      IconButton(
        icon: Icon(Icons.menu),
        onPressed: () {
          _scaffoldKey.currentState?.openEndDrawer();
        },
      ),
    ],
  ),
)

Important Properties

Property	Description
drawer	Left side drawer
endDrawer	Right side drawer
drawerScrimColor	Background dimming color
drawerEdgeDragWidth	Swipe sensitivity
drawerEnableOpenDragGesture	Enable/disable swipe to open

Drawer Width

Drawer(
  width: 250, // Custom width
  child: ...
)

Summary

• Drawer: Left side menu
• EndDrawer: Right side menu
• DrawerHeader: Top header area
• UserAccountsDrawerHeader: For user information
• Navigator.pop(): Closes the drawer

Drawer is ideal for offering extensive navigation options in your app.