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.cn/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.
link

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.
link

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:

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

See also:

Inheritance

Constructors

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.
const

Properties

backgroundColor Color?
Sets the color of the Material that holds all of the Drawer's contents.
final
child Widget?
The widget below this widget in the tree.
final
clipBehavior Clip?
The content will be clipped (or not) according to this option.
final
elevation double?
The z-coordinate at which to place this drawer relative to its parent.
final
hashCode int
The hash code for this object.
no setterinherited
key Key?
Controls how one widget replaces another widget in the tree.
finalinherited
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.
final
shadowColor Color?
The color used to paint a drop shadow under the drawer's Material, which reflects the drawer's elevation.
final
shape ShapeBorder?
The shape of the drawer.
final
surfaceTintColor Color?
The color used as a surface tint overlay on the drawer's background color, which reflects the drawer's elevation.
final
width double?
The width of the drawer.
final

Methods

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

Operators

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