DrawerModifier class

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

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.

{@tool snippet} 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.

Scaffold(
  appBar: AppBar(
    title: const Text('Drawer Demo'),
  ),
  drawer: Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: const <Widget>[
        DrawerHeader(
          decoration: BoxDecoration(
            color: Colors.blue,
          ),
          child: Text(
            'Drawer Header',
            style: TextStyle(
              color: Colors.white,
              fontSize: 24,
            ),
          ),
        ),
        ListTile(
          leading: Icon(Icons.message),
          title: Text('Messages'),
        ),
        ListTile(
          leading: Icon(Icons.account_circle),
          title: Text('Profile'),
        ),
        ListTile(
          leading: Icon(Icons.settings),
          title: Text('Settings'),
        ),
      ],
    ),
  ),
)

{@end-tool}

An open drawer may be closed with a swipe to close gesture, pressing the 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: Icon(Icons.change_history),
  title: 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

Inheritance

• Object
• DiagnosticableTree
• Widget
• StatelessWidget
• SingleChildStatelessModifier
• DrawerModifier

Available extensions

• ModifierTransformer

Constructors

DrawerModifier({Key? key, Widget? child, Key? modifierKey, Color? backgroundColor, double? elevation, ShapeBorder? shape, double? width, String? semanticLabel})

Creates a Material Design drawer.

const

Properties

backgroundColor → Color?

Sets the color of the Material that holds all of the Drawer's contents.

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 setter, inherited

key → Key?

Controls how one widget replaces another widget in the tree.

final, inherited

modifierKey → Key?

The actual key of the widget, which Modifier wrapped

final, inherited

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

semanticLabel → String?

The semantic label of the dialog used by accessibility frameworks to announce screen transitions when the drawer is opened and closed.

final

shape → ShapeBorder?

The shape of the drawer.

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.

inherited

buildWithChild(BuildContext context, Widget? child) → Widget

A build method that receives an extra child parameter.

override

createElement() → SingleChildStatelessElement

Create a SingleChildStatelessElement

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