ResponsiveNavigation class

An adaptive navigation widget that automatically switches between:

  • Bottom navigation on mobile/watch (fully customizable via bottomNavBuilder)
  • NavigationRail on tablet/small desktop
  • Sidebar drawer on desktop/large desktop

Features

  • Full bottom nav UI control via bottomNavBuilder
  • Sidebar footer via sidebarFooter (e.g., profile card below nav items)
  • Per-destination sidebar visibility via NavDestination.showInSidebar
  • Embeddable — no internal Scaffold, works in any container
  • Nested navigation ready — sidebar stays fixed while body navigates

Usage

ResponsiveNavigation(
  destinations: [
    NavDestination(icon: Icons.home, label: 'Home'),
    NavDestination(icon: Icons.search, label: 'Search'),
    NavDestination(icon: Icons.person, label: 'Profile', showInSidebar: false),
  ],
  selectedIndex: _index,
  onChanged: (i) => setState(() => _index = i),
  body: Navigator(...),  // Nested navigation works!
  sidebarFooter: ProfileCard(),  // Shows below sidebar items
  bottomNavBuilder: (context, destinations, selected, onChanged) {
    return MyCustomBottomBar(...);  // Full UI control
  },
)
Inheritance

Constructors

ResponsiveNavigation({Key? key, required List<NavDestination> destinations, required int selectedIndex, required ValueChanged<int> onChanged, required Widget body, BottomNavBuilder? bottomNavBuilder, Widget? sidebarFooter, Widget? sidebarHeader, bool showLabels = true, double drawerWidth = 280.0, bool railExtended = false, Color? backgroundColor, Color? selectedColor, Color? unselectedColor, double elevation = 0.0, ScreenType railBreakpoint = ScreenType.mobile, ScreenType sidebarBreakpoint = ScreenType.smallDesktop})
Creates a ResponsiveNavigation.
const

Properties

backgroundColor → Color?
Background color for the navigation. If null, uses theme defaults.
final
body → Widget
The main content body. Supports nested Navigator for persistent sidebar.
final
bottomNavBuilder → BottomNavBuilder?
Optional builder for a fully custom bottom navigation bar. If null, a default NavigationBar (Material 3) is used.
final
destinations → List<NavDestination>
The navigation destinations.
final
drawerWidth → double
The width of the sidebar drawer on desktop. Default: 280.0.
final
elevation → double
Elevation for the navigation surface. Default: 0.0.
final
hashCode → int
The hash code for this object.
no setterinherited
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
onChanged → ValueChanged<int>
Called when a destination is selected.
final
railBreakpoint → ScreenType
The ScreenType at which to switch from bottom nav to rail. Default: ScreenType.mobile (rail starts at tablet).
final
railExtended → bool
Whether the NavigationRail is extended (shows labels inline). Default: false.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
selectedColor → Color?
Color for selected items. If null, uses theme primary color.
final
selectedIndex → int
The currently selected index.
final
showLabels → bool
Whether the NavigationRail labels are always shown. Default: true.
final
sidebarBreakpoint → ScreenType
The ScreenType at which to switch from rail to full sidebar. Default: ScreenType.smallDesktop (sidebar starts at desktop).
final
sidebarFooter → Widget?
Optional widget placed below the sidebar navigation items. Only visible in sidebar mode (desktop/large desktop). Perfect for profile cards, settings shortcuts, etc.
final
sidebarHeader → Widget?
Optional header widget above sidebar items. Only visible in sidebar mode.
final
unselectedColor → Color?
Color for unselected items. If null, uses theme defaults.
final

Methods

build(BuildContext context) → Widget
Describes the part of the user interface represented by this widget.
override
createElement() → StatelessElement
Creates a StatelessElement to manage this widget's location in the tree.
inherited
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