NavigationView class

A navigation control that provides top-level navigation for your app.

The NavigationView adapts to a variety of screen sizes and supports multiple display modes: left, top, compact, and minimal. It automatically switches between these modes based on the available width when using PaneDisplayMode.auto.

NavigationView Preview

{@tool snippet} This example shows a basic navigation view with left navigation:

int selectedIndex = 0;

NavigationView(
  appBar: NavigationAppBar(
    title: Text('My App'),
  ),
  pane: NavigationPane(
    selected: selectedIndex,
    onChanged: (index) => setState(() => selectedIndex = index),
    items: [
      PaneItem(
        icon: Icon(FluentIcons.home),
        title: Text('Home'),
        body: HomePage(),
      ),
      PaneItem(
        icon: Icon(FluentIcons.settings),
        title: Text('Settings'),
        body: SettingsPage(),
      ),
    ],
  ),
)

{@end-tool}

Display modes

The navigation pane can be displayed in different modes using NavigationPane.displayMode:

PaneDisplayMode.auto - Automatically adapts based on window width
PaneDisplayMode.expanded - Expanded pane with icons and labels
PaneDisplayMode.compact - Collapsed pane showing only icons
PaneDisplayMode.minimal - Hidden pane with hamburger menu
PaneDisplayMode.top - Horizontal navigation at the top

Adaptive behavior

When using PaneDisplayMode.auto:

Width >= 1008px: Open mode (expanded pane)
Width 641-1007px: Compact mode (icons only)
Width <= 640px: Minimal mode (hamburger menu)

Router integration

For apps using go_router or similar routers, use paneBodyBuilder to integrate with your routing system:

{@tool snippet}

NavigationView(
  pane: NavigationPane(
    selected: _calculateSelectedIndex(context),
    items: _buildPaneItems(),
  ),
  paneBodyBuilder: (item, body) {
    // Return your router's body widget
    return body ?? const SizedBox.shrink();
  },
)

{@end-tool}

Constructors

NavigationView({Key? key, Widget? titleBar, NavigationPane? pane, Widget? content, Clip clipBehavior = Clip.antiAlias, ShapeBorder? contentShape, VoidCallback? onOpenSearch, AnimatedSwitcherTransitionBuilder? transitionBuilder, NavigationContentBuilder? paneBodyBuilder, ValueChanged<PaneDisplayMode>? onDisplayModeChanged}): Creates a navigation view.
const

Properties

clipBehavior → Clip: Controls how to clip.
final
content → Widget?: The content of the pane.
final
contentShape → ShapeBorder?: How the body content should be clipped
final
hashCode → int: The hash code for this object.
no setterinherited
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
onDisplayModeChanged → ValueChanged<PaneDisplayMode>?: Called when the display mode changes.
final
onOpenSearch → VoidCallback?: Called when the search button is tapped.
final
pane → NavigationPane?: The navigation pane, that can be displayed either on the left, on the top, or above the body.
final
paneBodyBuilder → NavigationContentBuilder?: Can be used to override the widget that is built from the PaneItem.body. Only used if pane is provided. If nothing is selected, body will be null.
final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
titleBar → Widget?: final
transitionBuilder → AnimatedSwitcherTransitionBuilder?: The transition builder.
final

Methods

createElement() → StatefulElement: Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<NavigationView>: 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.
override
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

dataOf(BuildContext context) → NavigationViewContext: Get useful info about the current navigation view.
maybeOf(BuildContext context) → NavigationViewState?: Gets the closest NavigationViewState ancestor, if any.
of(BuildContext context) → NavigationViewState: Gets the current navigation view state.