Labelled Navigation Bar
Component Detail
Description
Flutter NavigationBar implementation that enforces labelled icons — no icon-only buttons. All tabs display both icon and text label at all times. Persistent back navigation is handled at the router level, never relying on swipe gestures alone.
labelled-navigation-bar
Summaries
The Labelled Navigation Bar ensures every user can immediately understand where they are in the application and how to reach key areas, without requiring icon-recognition skills. By enforcing visible text labels alongside all navigation icons, this component directly supports users with cognitive and visual accessibility needs — reducing abandonment rates and support costs while broadening the addressable user base. Compliance with accessibility standards such as WCAG lowers legal and regulatory risk. A universally legible navigation system also improves first-time user retention, translating to measurable gains in engagement and long-term user loyalty, both of which have direct revenue implications for subscription or usage-based business models.
This is a low-complexity shared component suitable for early delivery — ideally in the first sprint — as it serves as the structural foundation for all feature screens requiring tab-based navigation. Because it is shared across multiple features, any defect or design change carries a broad impact radius, and comprehensive regression testing against all consuming screens is required before merging modifications. Dependencies are minimal, so scheduling risk is low. The primary delivery risk is securing design sign-off on the label-plus-icon layout before implementation begins, since late navigation design changes can cascade across the entire application and disrupt parallel feature development timelines.
The Labelled Navigation Bar wraps Flutter's NavigationBar widget and introduces an assert-based validation layer in `validateDestinations()` that rejects any destination configuration missing a text label, making the icon-only anti-pattern a compile-time failure rather than a runtime surprise. The `LabelledNavigationBar({destinations, selectedIndex, onDestinationSelected})` constructor is consumed by the root router widget, which owns persistent back-navigation logic — keeping this component fully stateless. Selected-tab state is propagated via `onDestinationSelected` to BLoC consumers for cross-tab awareness without direct widget coupling. As a shared mobile component with no external dependencies, it should be housed in a core UI package and versioned independently so breaking changes do not silently affect all consuming feature modules.
Responsibilities
- Render bottom navigation with icon + label pairs
- Prevent label-less icon-only configurations via assert
- Expose selected-tab state to BLoC for cross-tab awareness
Interfaces
LabelledNavigationBar({destinations, selectedIndex, onDestinationSelected})
buildDestination({icon, label, route})
validateDestinations(destinations)