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.

This example shows how to create a Scaffold that contains an AppBar and a Drawer. A user taps the "menu" icon in the AppBar to open the Drawer. The Drawer displays four items: A header and three menu items. The Drawer displays the four items using a ListView, which allows the user to scroll through the items if need be.

To create a local project with this code sample, run:
flutter create --sample=material.Drawer.1 mysample

This example shows how to migrate the above Drawer to a NavigationDrawer.

To create a local project with this code sample, run:
flutter create --sample=material.Drawer.2 mysample

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:

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

See also:



Drawer({Key? key, Color? backgroundColor, double? elevation, Color? shadowColor, Color? surfaceTintColor, ShapeBorder? shape, double? width, Widget? child, String? semanticLabel, Clip? clipBehavior})
Creates a Material Design drawer.


backgroundColor Color?
Sets the color of the Material that holds all of the Drawer's contents.
child Widget?
The widget below this widget in the tree.
clipBehavior Clip?
The content will be clipped (or not) according to this option.
elevation double?
The z-coordinate at which to place this drawer relative to its parent.
hashCode int
The hash code for this object.
no setterinherited
key Key?
Controls how one widget replaces another widget in the tree.
runtimeType Type
A representation of the runtime type of the object.
no setterinherited
semanticLabel String?
The semantic label of the drawer used by accessibility frameworks to announce screen transitions when the drawer is opened and closed.
shadowColor Color?
The color used to paint a drop shadow under the drawer's Material, which reflects the drawer's elevation.
shape ShapeBorder?
The shape of the drawer.
surfaceTintColor Color?
The color used as a surface tint overlay on the drawer's background color, which reflects the drawer's elevation.
width double?
The width of the drawer.


build(BuildContext context) Widget
Describes the part of the user interface represented by this widget.
createElement() StatelessElement
Creates a StatelessElement to manage this widget's location in the tree.
debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) String
A string representation of this object.
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a string representation of this node and its descendants.
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a one-line detailed description of the object.
toStringShort() String
A short, textual description of this widget.


operator ==(Object other) bool
The equality operator.