OudsTabBar class

OUDS Tab Bar design guidelines

Reference design version: 1.0.0

The OUDS Tab Bar is a reusable component for switching between top-level views or pages in an application on iOS.

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