StyledNavigationBar

The app’s floating bottom navigation: a pill (stadium) bar that hovers above the content with an optional FAB beside it. Source: styled_navigation_bar.dart.

StyledNavigationBar(
  destinations: [
    NavDestination(
      activeIcon: Icon(Symbols.home_filled),
      inactiveIcon: Icon(Symbols.home),
      label: 'Home',
      isActive: tab == 0,
      onTap: () => switchTab(0),
    ),
    // …
  ],
  fab: StyledFloatingActionButton(
    icon: AshIcon(AshIcons.conversation),
    label: 'Talk',
    onPressed: startSession,
  ),
)

StyledNavigationBar

Parameter	Type	Notes
`destinations`	`List<NavDestination>`	required — spread evenly across the pill
`fab`	`Widget?`	Rendered in a `Row` beside the bar (8 px gap), typically a StyledFloatingActionButton

Anatomy: 64 px tall, stadium shape, surfaceBg fill with a 3 px inside surfaceElevated stroke, strong drop shadow (black-54, blur 12), 24 px outer padding, bottom SafeArea. Callers own show/hide animation — the bar itself doesn’t animate visibility.

NavDestination

Parameter	Type	Notes
`activeIcon` / `inactiveIcon`	`Widget`	required — swapped by state, tinted via `IconTheme` (24 px)
`label`	`String`	required — `buttonSmall`, single line
`isActive`	`bool`	required — `contrastStrong` when active, `contrastWeak` when not
`showBadge`	`bool`	default `false` — 9 px `badgeRed` dot on the icon
`onTap`	`VoidCallback`	required — fires after`HapticFeedback.selectionClick()`

Tokens consumed

surfaceBg, surfaceElevated, contrastStrong, contrastWeak, badgeRed; typography buttonSmall.

Real usage

lib/widgets/navigation/navigation_shell.dart — the app’s main shell renders the bar under an IndexedStack of tabs and passes the session FAB.

Getting Started

Craft and Foundations

Brand

Design System

For Agents

StyledNavigationBar