NavigationRail class

A standard navigation rail component for sidebar-style navigation.

Provides a compact vertical navigation bar (rail) typically used on the side of a screen. It can be configured with or without labels, support multiple alignment modes, and manage its own selection state. Navigation items are defined through the children and footer properties.

Features:

  • Supports both vertical and horizontal orientations
  • Configurable alignment (start, center, end)
  • Flexible label display modes (always, never, selected)
  • Optional header and footer sections
  • Built-in expansion and collapse animations
  • Customizable background, surface effects, and constraints

Example:

NavigationRail(
  selectedKey: ValueKey('home'),
  onSelected: (key) => setState(() => selectedKey = key),
  children: [
    NavigationItem(
      key: ValueKey('home'),
      icon: Icon(Icons.home),
      label: Text('Home'),
    ),
    NavigationItem(
      key: ValueKey('search'),
      icon: Icon(Icons.search),
      label: Text('Search'),
    ),
  ],
)
Inheritance
Available extensions

Constructors

Creates a NavigationRail with the specified configuration and items.
const

Properties

alignment → NavigationRailAlignment
Alignment of navigation items along the main axis.
final
asBuilder → NeverWidgetBuilder

Available on Widget, provided by the WidgetExtension extension

Converts this widget to a builder function.
no setter
backgroundColor → Color?
Background color of the navigation rail.
final
base → TextModifier

Available on Widget, provided by the TextExtension extension

Applies base (default) font size.
no setter
black → TextModifier

Available on Widget, provided by the TextExtension extension

Applies black font weight (900).
no setter
blockQuote → TextModifier

Available on Widget, provided by the TextExtension extension

Applies block quote style with left border.
no setter
bold → TextModifier

Available on Widget, provided by the TextExtension extension

Applies bold font weight (700).
no setter
children → List<Widget>
List of navigation items to display.
final
collapsedSize → double?
Cross-axis size when the rail is collapsed.
final
constraints → BoxConstraints?
Constraints for the navigation rail container.
final
direction → Axis
Layout direction (horizontal or vertical).
final
ellipsis → TextModifier

Available on Widget, provided by the TextExtension extension

Applies ellipsis overflow to text.
no setter
expanded → bool
Whether the rail is in its expanded state.
final
expandedSize → double?
Cross-axis size when the rail is expanded.
final
extraBold → TextModifier

Available on Widget, provided by the TextExtension extension

Applies extra-bold font weight (800).
no setter
extraLight → TextModifier

Available on Widget, provided by the TextExtension extension

Applies extra-light font weight (200).
no setter
firstP → TextModifier

Available on Widget, provided by the TextExtension extension

Applies paragraph style for the first paragraph (no top spacing).
no setter
Optional footer widget displayed at the end of the rail.
final
foreground → TextModifier

Available on Widget, provided by the TextExtension extension

Applies standard foreground color.
no setter
h1 → TextModifier

Available on Widget, provided by the TextExtension extension

Applies heading 1 style.
no setter
h2 → TextModifier

Available on Widget, provided by the TextExtension extension

Applies heading 2 style with bottom border.
no setter
h3 → TextModifier

Available on Widget, provided by the TextExtension extension

Applies heading 3 style.
no setter
h4 → TextModifier

Available on Widget, provided by the TextExtension extension

Applies heading 4 style.
no setter
hashCode → int
The hash code for this object.
no setterinherited
Optional header widget displayed at the start of the rail.
final
iconDestructiveForeground → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with destructive foreground color.
no setter
iconLarge → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with large size theme.
no setter
iconMedium → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with medium size theme.
no setter
iconMutedForeground → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with muted foreground color.
no setter
iconPrimary → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with primary color.
no setter
iconPrimaryForeground → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with primary foreground color.
no setter
iconSecondary → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with secondary color.
no setter
iconSecondaryForeground → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with secondary foreground color.
no setter
iconSmall → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with small size theme.
no setter
iconX2Large → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with extra-extra large size theme.
no setter
iconX2Small → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with extra-extra small size theme.
no setter
iconX3Large → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with extra-extra-extra large size theme.
no setter
iconX3Small → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with extra-extra-extra small size theme.
no setter
iconX4Large → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with extra-extra-extra-extra large size theme.
no setter
iconX4Small → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with extra-extra-extra-extra small size theme.
no setter
iconXLarge → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with extra large size theme.
no setter
iconXSmall → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with extra small size theme.
no setter
inlineCode → TextModifier

Available on Widget, provided by the TextExtension extension

Applies inline code style with background and padding.
no setter
italic → TextModifier

Available on Widget, provided by the TextExtension extension

Applies italic font style.
no setter
keepCrossAxisSize → bool
Whether to maintain intrinsic size along the cross axis.
final
keepMainAxisSize → bool
Whether to maintain intrinsic size along the main axis.
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
labelPosition → NavigationLabelPosition
Position of labels relative to icons.
final
labelSize → NavigationLabelSize
Size variant for labels.
final
labelType → NavigationLabelType
Type of label display behavior.
final
large → TextModifier

Available on Widget, provided by the TextExtension extension

Applies large font size.
no setter
lead → TextModifier

Available on Widget, provided by the TextExtension extension

Applies lead paragraph style with muted color.
no setter
li → TextModifier

Available on Widget, provided by the TextExtension extension

Applies list item style with bullet point.
no setter
light → TextModifier

Available on Widget, provided by the TextExtension extension

Applies light font weight (300).
no setter
medium → TextModifier

Available on Widget, provided by the TextExtension extension

Applies medium font weight (500).
no setter
modify → TextModifier

Available on Widget, provided by the TextExtension extension

Applies primary foreground color modifier.
no setter
mono → TextModifier

Available on Widget, provided by the TextExtension extension

Applies monospace font family.
no setter
muted → TextModifier

Available on Widget, provided by the TextExtension extension

Applies muted foreground color.
no setter
normal → TextModifier

Available on Widget, provided by the TextExtension extension

Applies normal font weight (400).
no setter
onSelected → ValueChanged<Key?>?
Callback when an item is selected.
final
p → TextModifier

Available on Widget, provided by the TextExtension extension

Applies paragraph style with top spacing.
no setter
padding → EdgeInsetsGeometry?
Internal padding of the navigation rail.
final
primaryForeground → TextModifier

Available on Widget, provided by the TextExtension extension

Applies primary foreground color.
no setter
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
sans → TextModifier

Available on Widget, provided by the TextExtension extension

Applies sans-serif font family.
no setter
secondaryForeground → TextModifier

Available on Widget, provided by the TextExtension extension

Applies secondary foreground color.
no setter
selectedKey → Key?
Currently selected item key.
final
semiBold → TextModifier

Available on Widget, provided by the TextExtension extension

Applies semi-bold font weight (600).
no setter
singleLine → TextModifier

Available on Widget, provided by the TextExtension extension

Constrains text to a single line without wrapping.
no setter
small → TextModifier

Available on Widget, provided by the TextExtension extension

Applies small font size.
no setter
spacing → double?
Spacing between navigation items.
final
surfaceBlur → double?
Surface blur effect for the background.
final
surfaceOpacity → double?
Surface opacity effect for the background.
final
textCenter → TextModifier

Available on Widget, provided by the TextExtension extension

Centers text horizontally.
no setter
textEnd → TextModifier

Available on Widget, provided by the TextExtension extension

Aligns text to the end (right in LTR, left in RTL).
no setter
textJustify → TextModifier

Available on Widget, provided by the TextExtension extension

Justifies text alignment.
no setter
textLarge → TextModifier

Available on Widget, provided by the TextExtension extension

Applies large text style.
no setter
textLeft → TextModifier

Available on Widget, provided by the TextExtension extension

Left-aligns text.
no setter
textMuted → TextModifier

Available on Widget, provided by the TextExtension extension

Applies muted text style with muted color.
no setter
textRight → TextModifier

Available on Widget, provided by the TextExtension extension

Right-aligns text.
no setter
textSmall → TextModifier

Available on Widget, provided by the TextExtension extension

Applies small text style.
no setter
textStart → TextModifier

Available on Widget, provided by the TextExtension extension

Aligns text to the start (left in LTR, right in RTL).
no setter
thin → TextModifier

Available on Widget, provided by the TextExtension extension

Applies thin font weight (100).
no setter
underline → TextModifier

Available on Widget, provided by the TextExtension extension

Applies underline text decoration.
no setter
x2Large → TextModifier

Available on Widget, provided by the TextExtension extension

Applies 2x large font size.
no setter
x3Large → TextModifier

Available on Widget, provided by the TextExtension extension

Applies 3x large font size.
no setter
x4Large → TextModifier

Available on Widget, provided by the TextExtension extension

Applies 4x large font size.
no setter
x5Large → TextModifier

Available on Widget, provided by the TextExtension extension

Applies 5x large font size.
no setter
x6Large → TextModifier

Available on Widget, provided by the TextExtension extension

Applies 6x large font size.
no setter
x7Large → TextModifier

Available on Widget, provided by the TextExtension extension

Applies 7x large font size.
no setter
x8Large → TextModifier

Available on Widget, provided by the TextExtension extension

Applies 8x large font size.
no setter
x9Large → TextModifier

Available on Widget, provided by the TextExtension extension

Applies 9x large font size.
no setter
xLarge → TextModifier

Available on Widget, provided by the TextExtension extension

Applies extra-large font size.
no setter
xSmall → TextModifier

Available on Widget, provided by the TextExtension extension

Applies extra-small font size.
no setter

Methods

asSkeleton({bool enabled = true, bool leaf = false, Widget? replacement, bool unite = false, AsyncSnapshot? snapshot}) → Widget

Available on Widget, provided by the SkeletonExtension extension

Converts the widget to a skeleton with advanced configuration options.
asSkeletonSliver({bool enabled = true}) → Widget

Available on Widget, provided by the SkeletonExtension extension

Converts the widget to a skeleton suitable for sliver layouts.
center({Key? key}) → Widget

Available on Widget, provided by the WidgetExtension extension

Centers this widget horizontally and vertically.
clip({Clip clipBehavior = Clip.hardEdge}) → Widget

Available on Widget, provided by the WidgetExtension extension

Clips this widget to a rectangle.
clipOval({Clip clipBehavior = Clip.antiAlias}) → Widget

Available on Widget, provided by the WidgetExtension extension

Clips this widget to an oval shape.
clipPath({Clip clipBehavior = Clip.antiAlias, required CustomClipper<Path> clipper}) → Widget

Available on Widget, provided by the WidgetExtension extension

Clips this widget to a custom path.
clipRRect({BorderRadiusGeometry borderRadius = BorderRadius.zero, Clip clipBehavior = Clip.antiAlias}) → Widget

Available on Widget, provided by the WidgetExtension extension

Clips this widget to a rounded rectangle.
constrained({double? minWidth, double? maxWidth, double? minHeight, double? maxHeight, double? width, double? height}) → Widget

Available on Widget, provided by the WidgetExtension extension

Wraps this widget in a ConstrainedBox with specified constraints.
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
excludeSkeleton({bool exclude = true}) → Widget

Available on Widget, provided by the SkeletonExtension extension

Controls whether the widget should be preserved in skeleton mode.
expanded({int flex = 1}) → Widget

Available on Widget, provided by the WidgetExtension extension

Makes this widget expanded within a Flex parent (Row/Column).
ignoreSkeleton() → Widget

Available on Widget, provided by the SkeletonExtension extension

Excludes the widget from skeleton effects in its parent skeleton context.
intrinsic({double? stepWidth, double? stepHeight}) → Widget

Available on Widget, provided by the WidgetExtension extension

Sizes this widget to both intrinsic width and height.
intrinsicHeight() → Widget

Available on Widget, provided by the WidgetExtension extension

Sizes this widget to its intrinsic height.
intrinsicWidth({double? stepWidth, double? stepHeight}) → Widget

Available on Widget, provided by the WidgetExtension extension

Sizes this widget to its intrinsic width.
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
positioned({Key? key, double? left, double? top, double? right, double? bottom}) → Widget

Available on Widget, provided by the WidgetExtension extension

Positions this widget absolutely within a Stack.
sized({double? width, double? height, double? size}) → Widget

Available on Widget, provided by the WidgetExtension extension

Wraps this widget in a SizedBox with specified dimensions.
then(InlineSpan span) → Widget

Available on Widget, provided by the TextExtension extension

Appends an inline span to the current text widget.
thenButton({required VoidCallback onPressed, required Widget child}) → Widget

Available on Widget, provided by the TextExtension extension

Appends a button widget to the current text widget.
thenInlineCode(String text) → Widget

Available on Widget, provided by the TextExtension extension

Appends inline code to the current text widget.
thenText(String text) → Widget

Available on Widget, provided by the TextExtension extension

Appends a text span to the current text widget.
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
transform({Key? key, required Matrix4 transform}) → Widget

Available on Widget, provided by the WidgetExtension extension

Applies a transformation matrix to this widget.
withAlign(AlignmentGeometry alignment) → Widget

Available on Widget, provided by the WidgetExtension extension

Aligns this widget within its parent.
withOpacity(double opacity) → Widget

Available on Widget, provided by the WidgetExtension extension

Applies opacity to this widget.
withPadding({double? top, double? bottom, double? left, double? right, double? horizontal, double? vertical, double? all, EdgeInsetsGeometry? padding}) → Widget

Available on Widget, provided by the WidgetExtension extension

Wraps this widget in a Padding widget.

Operators

operator ==(Object other) → bool
The equality operator.
inherited