Drawer class Null safety
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.
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'),
),
],
),
),
)
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
Constructors
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
- elevation → double?
-
The z-coordinate at which to place this drawer relative to its parent.
final
- hashCode → int
- The hash code for this object.
- key → Key?
-
Controls how one widget replaces another widget in the tree.
finalinherited
- runtimeType → Type
-
A representation of the runtime type of the object.
read-onlyinherited
- 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.
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.protected">@protectedinherited -
debugFillProperties(
DiagnosticPropertiesBuilder properties) → void -
Add additional properties associated with the node.
inherited
-
noSuchMethod(
Invocation invocation) → dynamic -
Invoked when a non-existent 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.
nonVirtual">@nonVirtualinherited