In apps that employ Material Design, there are two primary options fornavigation: tabs and drawers. When there is insufficient space to support tabs,Drawers provide a handy alternative.

In Flutter, we can use the DrawerWidget in combination with a Scaffoldto create a layout with a Material Design Drawer.

Directions

• Create a Scaffold
• Add a drawer
• Populate the drawer with items
• Close the drawer programmatically

1. Create a Scaffold

In order to add a Drawer to our app, we’ll need to wrap it in aScaffoldWidget. The Scaffold Widget provides a consistent visual structure to apps thatfollow the Material Design Guidelines. It also supports special Material Designcomponents, such as Drawers, AppBars, and SnackBars.

In this case, we’ll want to create a Scaffold with a drawer:

Scaffold(
  drawer: // We'll add our Drawer here in the next step!
);

2. Add a drawer

We can now add a drawer to our Scaffold. A drawer could be any Widget, butit’s often best to use the Drawer widget from thematerial library,which adheres to the Material Design spec.

Scaffold(
  drawer: Drawer(
    child: // We'll populate the Drawer in the next step!
  )
);

3. Populate the drawer with items

Now that we have a Drawer in place, we can add content to it. In this example,we will use a ListView.While we could use a Column Widget, ListView is handy in this situationbecause it will allow users to scroll through the drawer if the content takes upmore space than the screen supports.

We will populate the ListView with aDrawerHeaderand two ListTileWidgets. For more information on working with Lists, please see thelist recipes.

Drawer(
  // Add a ListView to the drawer. This ensures the user can scroll
  // through the options in the Drawer if there isn't enough vertical
  // space to fit everything.
  child: ListView(
    // Important: Remove any padding from the ListView.
    padding: EdgeInsets.zero,
    children: <Widget>[
      DrawerHeader(
        child: Text('Drawer Header'),
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
      ),
      ListTile(
        title: Text('Item 1'),
        onTap: () {
          // Update the state of the app
          // ...
        },
      ),
      ListTile(
        title: Text('Item 2'),
        onTap: () {
          // Update the state of the app
          // ...
        },
      ),
    ],
  ),
);

4. Close the drawer programmatically

After a user taps on an item, we often want to close the drawer. How can weachieve this? Using the Navigator!

When a user opens the Drawer, Flutter adds the drawer to the navigationstack under the hood. Therefore, to close the drawer, we can callNavigator.pop(context).

ListTile(
  title: Text('Item 1'),
  onTap: () {
    // Update the state of the app
    // ...
    // Then close the drawer
    Navigator.pop(context);
  },
),

Complete example

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  final appTitle = 'Drawer Demo';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}
class MyHomePage extends StatelessWidget {
  final String title;
  MyHomePage({Key key, this.title}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Center(child: Text('My Page!')),
      drawer: Drawer(
        // Add a ListView to the drawer. This ensures the user can scroll
        // through the options in the Drawer if there isn't enough vertical
        // space to fit everything.
        child: ListView(
          // Important: Remove any padding from the ListView.
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text('Drawer Header'),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              title: Text('Item 1'),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('Item 2'),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}