NavigationRail class Null safety

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.

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.

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.

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 the adaptive_scaffold.dart sample 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. [...]
hashCode int
The hash code for this object. [...]
@nonVirtual, read-only, inherited
indicatorColor Color?
Overrides the default value of NavigationRail's selection indicator color, when useIndicator is true.
key Key?
Controls how one widget replaces another widget in the tree. [...]
final, inherited
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. [...]
runtimeType Type
A representation of the runtime type of the object.
read-only, inherited
selectedIconTheme IconThemeData?
The visual properties of the icon in the selected destination. [...]
selectedIndex int?
The index into destinations for the current selected NavigationRailDestination or null if no destination is selected.
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. [...]
useIndicator bool?
If true, adds a rounded NavigationIndicator behind the selected destination's icon. [...]


createElement() StatefulElement
Creates a StatefulElement to manage this widget's location in the tree. [...]
createState() State<NavigationRail>
Creates the mutable state for this widget at a given 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
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. [...]