NavigationRail class Null safety
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.
_selectedIndex
is updated by the onDestinationSelected
callback.
flutter create --sample=material.NavigationRail.1 mysample
flutter create --sample=material.NavigationRail.2 mysample
See also:
- Scaffold, which can display the navigation rail within a Row of the Scaffold.body slot.
- NavigationRailDestination, which is used as a model to create tappable destinations in the navigation rail.
- BottomNavigationBar, which is a similar navigation widget that's laid out horizontally.
- material.io/components/navigation-rail/
- m3.material.io/components/navigation-rail
- Inheritance
-
- Object
- DiagnosticableTree
- Widget
- StatefulWidget
- NavigationRail
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.
- indicatorColor → Color?
-
Overrides the default value of NavigationRail's selection indicator color,
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.
read-onlyinherited
- 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.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
Static Methods
-
extendedAnimation(
BuildContext context) → Animation< double> - Returns the animation that controls the NavigationRail.extended state.