OudsTabBar class

OUDS Tab Bar design guidelines

Reference design version: 1.0.0

The Tab bar is a system navigation component positioned at the bottom of the screen. It allows users to switch between the primary sections of an app. Each tab is represented by an icon, optionally paired with a label, and maintains persistent visibility across top-level destinations.

This widget is backed by Cupertino's CupertinoTabBar (iOS-style bottom tab bar) and expects a list of BottomNavigationBarItem built from OUDS destinations (see OudsNavigationBarItem.toBottomNavigationBarItem).

The bar can be opaque or translucent. OudsTabBar default appearance is opaque. If you need a translucent blurred background as specified by OUDS design:

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

Example of code:

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

Parameters:

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

Example usage:

Default tab bar with 3 items:

OudsTabBar(
  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');
  },
);

Tab bar without translucency:

OudsTabBar(
  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');
  },
);