Drawer class

A Material Design panel that slides in horizontally from the edge of a Scaffold to show navigation links in an application.

There is a Material 3 version of this component, NavigationDrawer, that's preferred for applications that are configured for Material 3 (see ThemeData.useMaterial3).

Drawers are typically used with the Scaffold.drawer property. The child of the drawer is usually a ListView whose first child is a DrawerHeader that displays status information about the current user. The remaining drawer children are often constructed with ListTiles, often concluding with an AboutListTile.

The AppBar automatically displays an appropriate IconButton to show the Drawer when a Drawer is available in the Scaffold. The Scaffold automatically handles the edge-swipe gesture to show the drawer.

Updating to NavigationDrawer

There is a Material 3 version of this component, NavigationDrawer, that's preferred for applications that are configured for Material 3 (see ThemeData.useMaterial3). The NavigationDrawer widget's visual are a little bit different, see the Material 3 spec at m3.material.io/components/navigation-drawer/overview for more details. While the Drawer widget can have only one child, the NavigationDrawer widget can have a list of widgets, which typically contains NavigationDrawerDestination widgets and/or customized widgets like headlines and dividers.

An open drawer may be closed with a swipe to close gesture, pressing the escape key, by tapping the scrim, or by calling pop route function such as Navigator.pop. For example a drawer item might close the drawer when tapped:

ListTile(
  leading: const Icon(Icons.change_history),
  title: const Text('Change history'),
  onTap: () {
    // change app state...
    Navigator.pop(context); // close the drawer
  },
);

See also:

• Scaffold.drawer, where one specifies a Drawer so that it can be shown.
• Scaffold.of, to obtain the current ScaffoldState, which manages the display and animation of the drawer.
• ScaffoldState.openDrawer, which displays its Drawer, if any.
• material.io/design/components/navigation-drawer.html