Drawer class - material library

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.

link

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

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
  },
);

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, int wrapWidth = 65}) → 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