NavigationRail class

A material widget that is meant to be displayed at the left or right of an app to navigate between a small number of views, typically between three and five.

A navigation rail is usually used as the first or last element of a Row which defines the app's Scaffold body.

The appearance of all of the NavigationRails within an app can be specified with NavigationRailTheme. The default values for null theme properties are based on the Theme's ThemeData.textTheme, ThemeData.iconTheme, and ThemeData.colorScheme. The navigation rail is meant for layouts with wide viewports, such as a desktop web or tablet landscape layout. For smaller layouts, like mobile portrait, a BottomNavigationBar should be used instead.

Adaptive layouts can build different instances of the Scaffold in order to have a navigation rail for more horizontal layouts and a bottom navigation bar for more vertical layouts. See for an example.

This example shows a NavigationRail used within a Scaffold with 3 NavigationRailDestinations. The main content is separated by a divider (although elevation on the navigation rail can be used instead). The _selectedIndex is updated by the onDestinationSelected callback.
To create a local project with this code sample, run:
flutter create --sample=material.NavigationRail.1 mysample

See also:



Creates a material design navigation rail. [...]


backgroundColor Color
Sets the color of the Container that holds all of the NavigationRail's contents. [...]
destinations List<NavigationRailDestination>
Defines the appearance of the button items that are arrayed within the navigation rail. [...]
elevation double
The rail's elevation or z-coordinate. [...]
extended bool
Indicates that the NavigationRail should be in the extended state. [...]
groupAlignment double
The vertical alignment for the group of destinations within the rail. [...]
labelType NavigationRailLabelType
Defines the layout and behavior of the labels for the default, unextended NavigationRail. [...]
leading Widget
The leading widget in the rail that is placed above the destinations. [...]
minExtendedWidth double
The final width when the animation is complete for setting extended to true. [...]
minWidth double
The smallest possible width for the rail regardless of the destination's icon or label size. [...]
onDestinationSelected ValueChanged<int>
Called when one of the destinations is selected. [...]
selectedIconTheme IconThemeData
The visual properties of the icon in the selected destination. [...]
selectedIndex int
The index into destinations for the current selected NavigationRailDestination.
selectedLabelTextStyle TextStyle
The TextStyle of a destination's label when it is selected. [...]
trailing Widget
The trailing widget in the rail that is placed below the destinations. [...]
unselectedIconTheme IconThemeData
The visual properties of the icon in the unselected destination. [...]
unselectedLabelTextStyle TextStyle
The TextStyle of a destination's label when it is unselected. [...]
hashCode int
The hash code for this object.
@nonVirtual, read-only, inherited
key Key
Controls how one widget replaces another widget in the tree.
final, inherited
runtimeType Type
A representation of the runtime type of the object.
read-only, inherited


createState() → _NavigationRailState
Creates the mutable state for this widget at a given location in the tree. [...]
createElement() StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
@protected, inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent 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:}) String
Returns 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.
@nonVirtual, inherited

Static Methods

extendedAnimation(BuildContext context) Animation<double>
Returns the animation that controls the NavigationRail.extended state. [...]