NavigationRail class

A Material Design 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.
link

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

This sample shows the creation of NavigationRail widget used within a Scaffold with 3 NavigationRailDestinations, as described in: https://m3.material.io/components/navigation-rail/overview
link

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

See also:

Inheritance

Constructors

Creates a Material Design navigation rail.
const

Properties

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

Methods

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

Static Methods

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