OudsNavigationBar class

OUDS Navigation Bar design guidelines

Reference design version: 1.0.0

The Navigation bar (aka Bottom navigation bar on Material 2) provides access to an app’s primary destinations using 3 to 5 persistent tabs. Each destination is represented by an icon and optionally a text label. Positioned at the bottom of the screen, it supports quick switching between top-level sections, following Material Design navigation patterns.

This widget is backed by the Material 3 NavigationBar (Android/Material-style bottom navigation) and expects a list of destination widgets built from OUDS items (see OudsNavigationBarItem.toNavigationDestination).

The bar can be opaque or translucent. OudsNavigationBar default appearance is opaque but, if you need a translucent blurred as specified on OUDS design side. To do this, use OudsNavigationBar with translucent parameter set to true and :

• Avoid wrapping the body in a SafeArea as the content must scroll behind the OudsNavigationBar to be visible through the blur.
• Set the Scaffold.extendBody property to true.

Example of code:

return Scaffold(
  extendBody: true,
  bottomNavigationBar: OudsNavigationBar(...),
  body: MyScrollableContent(),
);

Parameters:

• destinations: The list of OudsNavigationBarItem to display.
• translucent: If true, renders a translucent background; otherwise opaque.
• selectedIndex: The index of the initially selected item.
• onDestinationSelected: Callback triggered when a destination is tapped, returns the index.

Example usage:

Default navigation bar with 3 items:

OudsNavigationBar(
  destinations: [
    OudsNavigationBarItem(icon: 'assets/home.svg', label: 'Home'),
    OudsNavigationBarItem(icon: 'assets/search.svg', label: 'Search'),
    OudsNavigationBarItem(icon: 'assets/profile.svg', label: 'Profile'),
  ],
  selectedIndex: 0,
  translucent: true,
  onDestinationSelected: (index) {
    print('Selected item: $index');
  },
);

Navigation bar without translucency:

OudsNavigationBar(
  destinations: [
    OudsNavigationBarItem(icon: 'assets/home.svg', label: 'Home'),
    OudsNavigationBarItem(icon: 'assets/search.svg', label: 'Search'),
  ],
  selectedIndex: 0,
  translucent: false,
  onDestinationSelected: (index) {
    print('Selected item: $index');
  },
);