NavigationSidebar class

A full-width navigation sidebar component for comprehensive navigation.

Provides an expanded navigation interface designed for sidebar layouts with full-width items and extensive labeling support. Unlike NavigationRail, the sidebar is optimized for detailed navigation with prominent labels, descriptions, and expanded interactive areas.

The sidebar always displays labels and typically occupies a dedicated sidebar area in layouts. Items are arranged vertically with generous spacing and padding to create a comfortable navigation experience. Supports badges, icons, and detailed labeling for complex navigation hierarchies.

Integrates with responsive layout systems and can be combined with collapsible containers or drawer systems for adaptive navigation experiences across different screen sizes and device types.

Example:

NavigationSidebar(
  backgroundColor: Colors.grey.shade50,
  labelType: NavigationLabelType.all,
  selectedKey: ValueKey('dashboard'),
  onSelected: (key) => _navigateToPage(key),
  children: [
    NavigationItem(
      key: ValueKey('dashboard'),
      icon: Icon(Icons.dashboard),
      label: Text('Dashboard'),
      badge: Badge(child: Text('New')),
    ),
    NavigationItem(
      key: ValueKey('analytics'),
      icon: Icon(Icons.analytics),
      label: Text('Analytics'),
    ),
    NavigationItem(
      key: ValueKey('settings'),
      icon: Icon(Icons.settings),
      label: Text('Settings'),
    ),
  ],
)
Inheritance
Available extensions

Constructors

Creates a NavigationSidebar with the specified configuration and items.
const

Properties

asBuilder → NeverWidgetBuilder

Available on Widget, provided by the WidgetExtension extension

Converts this widget to a builder function.
no setter
backgroundColor → Color?
Background color for the navigation sidebar surface.
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 in the sidebar.
final
constraints → BoxConstraints?
Size constraints for the navigation sidebar container.
final
ellipsis → TextModifier

Available on Widget, provided by the TextExtension extension

Applies ellipsis overflow to text.
no setter
expanded → bool
Whether the sidebar should expand to fill available width.
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 fixed footer items displayed after the scrollable content.
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 fixed header items displayed before the scrollable content.
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 within items.
final
labelSize → NavigationLabelSize
Size variant for label text and item dimensions.
final
labelType → NavigationLabelType
Label display behavior for navigation items.
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 invoked when a navigation 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 applied within the navigation sidebar.
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?
Key of the currently selected navigation item.
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?
Blur intensity for surface background effects.
final
surfaceOpacity → double?
Opacity level for surface background effects.
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<NavigationSidebar>
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