[Feedback Requested] Cross-platform Adaptation for Bottom Navigation Bars (Tab Bars)

[leighajarett]

What is a navigation bar?

A navigation bar offers a persistent and convenient way to switch between primary destinations in an app. It is pinned to the bottom of the screen, and usually provides access to 3-5 destinations. Each destination is represented by an icon and optional text label.

Platform differences

On the latest version of Android, app bars follow the design guidelines defined in Material 3. On iOS, an equivalent component is defined in Apple’s Human Interface Guidelines called tab bars.

	Navigation Bar in M3	Tab bar in HIG
Container height	80 (108 with pill-shaped device navigation, higher on devices with virtual buttons)	49 (83 with device navigation)
Container color	Color: Surface container Elevation: Level 2	No content under: #F7F7F7, 80% Content under: Transparent with blur effect
Label Typography	Roboto, medium, 12	San Francisco, medium 11
Icons	Library: Material Symbols Size: 24X24	Library: SF Symbols Size: varies, most frequently 25x25. See documentation for details.
Layout	The exact padding and margins can be found in the M3 navigation bar design specs.	The exact padding and margins can be found in the Sketch design files from here.
Tab item click animation	Material design 3 uses an animated selection indicator	HIGs doesn't use an animation

The Flutter framework has two different widgets for displaying bottom navigation bars:

• NavigationBar, which implements the specification defined by Material Design 3.
• BottomNavigationBar, which implements the specification defined by older versions Material Design.
• CupertinoTabBar, which follows the look & feel of the iOS default tab bars.

Adaptation recommendation

If you're using the default Material styling for your navigation bar on Android, we recommend that the following properties also feel native on iOS.

• Animations
• Font styling (if using system fonts throughout your application)
• Container size
• Container styling

Rationale and exception

Matching iOS styling can help your Flutter app feel more natural to iOS users. However, many developers chose to implement more custom tab bars, that feature customized animations and / or custom icons. For example, the Twitter mobile app:

Developers can find customized navigation bas on pub.dev, for example in the custom_navigation_bar_package.

Example code

All the properties listed above are not currently able to be modified directly from Material's NavigationBar widget. Therefore, we recommend adapting to platform-specific navigation bars.

To implement platform-specific navigation bars, you can use Flutter’s NavigationBar widget on Android and the CupertinoTabBar widget on iOS. Below is a code snippet you can adapt to show a platform-specific navigation bars.

// Create a common object to store the items. This item should have a string (label) and a corresponding Icon.
// In this example, we adapt the Icon based on the platform.
// This common object is helpful since CupertinoTabBar and NavigationBar require different data types.
final Map<String, Icon> _navigationItems = {
    'Menu': Platform.isIOS ? Icon(CupertinoIcons.house_fill) : Icon(Icons.home),
    'Order': Icon(Icons.adaptive.share),
  };

...

Scaffold(
        body: _currentWidget,
        bottomNavigationBar: Platform.isIOS
                ? CupertinoTabBar(
                    currentIndex: _currentIndex,
                    onTap: (index) {
                      setState(() => _currentIndex = index);
                      _loadScreen();
                    },
                    // Map the common entries to the BottomNavigationBarItem type required by the CupertinoTabBar.
                    items: _navigationItems.entries
                        .map<BottomNavigationBarItem>(
                            (entry) => BottomNavigationBarItem(
                                  icon: entry.value,
                                  label: entry.key,
                                ))
                        .toList(),
                  )
                : NavigationBar(
                    selectedIndex: _currentIndex,
                    onDestinationSelected: (index) {
                      setState(() => _currentIndex = index);
                      _loadScreen();
                    },
                    // Map the common entries to the NavigationDestination type required by the NavigationBar.
                    destinations: _navigationItems.entries
                        .map<Widget>((entry) => NavigationDestination(
                              icon: entry.value,
                              label: entry.key,
                            ))
                        .toList(),
                  ));

[bernaferrari]

I haven't used iOS for a while, so correct me if I'm wrong, but isn't their AppBar more often than not (like on App Store app) translucent to the content behind while Material usually is not?

[bernaferrari]

This one is smaller:

[leighajarett]

Right so you would take the 80 and add it to whatever your os navigation bar is.

[bernaferrari]

Yeah, just wanted to mention "it is not always fixed". I've seen people in iOS using fixed values (and it works fine there). But on Android they don't.

[leighajarett]

I tried to add that in to make it more clear, what do you think? Would you reword?

[bernaferrari]

It is better. I would probably do:
80 (108 with pill-shaped device navigation, higher on devices with virtual buttons)
But either way is fine. I just wanted you to know because on iOS you can really hard-code 83 and not worry. On Android you can never do this.
Thanks!

[InMatrix]

Hi @leighajarett, I tried the suggestion in this guide to adapt Veggie Seasons' bottom navigation bar. While it's not hard to make it work, I found a few issues.

First, it's difficult to share _navigationItems.entries between CupertinoTabBar.items and NavigationBar.destinations. The technical issue here is that these two parameters expect different types of objects as their respective value. And the UX issue is that the icon styles are quite different between iOS and Material, so I need to switch the icons too. Here's the code I ended up with.

Second, a very minor issue – the recommendation above the code snippet is to use CupertinoNavigationBar on iOS, which is a different widget from CupertinoTabBar.

Last, the initial recommendation gives me the impression that I should try to customize the Material NavigationBar, but then the code example is about switching to CupertinoTabBar. Maybe you wanted to describe two separate options depending on how much brand-driven customization is done in the app?

[leighajarett]

Thanks Tao!

1. Yes I am aware of this issue, that is why I mapped the data to the proper type in the code sample. I also did adapt the icons - did you see the first object?

2. I updated, thanks for the catch!

3. I was trying to give the impression that the listed properties should feel native, but since we don't have access to edit those properties directly in the Material widget I swapped to Cupertino. I can try and make that more clear!

[leighajarett]

I have added some inline comments to make 1 more clear, and rephrased to address 3. If you have other suggestions please let me know!

[InMatrix]

Thank you for your clarification. I've updated my code to use the shared item list. Here's the commit: InMatrix/veggieseasons_adaptive@1f5dc2a.