Bottom navigation bar in Flutter - Build, Publish & Deploy

Build & Publish - Bottom navigation bar

Performance Impact

The bottom navigation bar is a common UI pattern that allows users to switch between top-level views quickly. It usually stays visible on screen, so it affects rendering performance continuously.

To maintain smooth 60fps animations, the navigation bar should be lightweight. Avoid complex animations or heavy widgets inside it. Flutter's built-in BottomNavigationBar widget is optimized for performance.

Memory usage is generally low for the bar itself, but switching tabs may load different screens. Keep each screen efficient to avoid memory spikes that can cause app slowdowns or crashes.

Battery impact is minimal if the bar is static. Avoid continuous animations or frequent rebuilds triggered by the navigation bar.

Optimization Tips

• Use Flutter's native BottomNavigationBar widget for best performance and platform consistency.
• Cache the state of each tab screen to avoid rebuilding widgets unnecessarily when switching tabs.
• Keep icons and labels simple and use vector assets or Flutter icons to reduce load time.
• Minimize rebuilds by managing state efficiently, for example with IndexedStack to keep inactive tabs alive without rebuilding.
• Avoid heavy animations inside the navigation bar; if needed, keep them subtle and low cost.

App Size and Startup Time Impact

The bottom navigation bar itself adds minimal size to the app bundle since it uses Flutter's built-in widgets and icons.

However, the screens linked to each tab can increase app size depending on their complexity and assets.

Startup time is mostly unaffected by the navigation bar, but preloading all tab screens at launch can increase startup time. Consider lazy loading screens when first accessed.

iOS vs Android Differences

On Android, the bottom navigation bar follows Material Design guidelines with shifting or fixed labels and ripple touch effects.

On iOS, bottom navigation is often called a tab bar and follows Cupertino design with different icon sizes and highlight styles.

Flutter provides BottomNavigationBar for Material and CupertinoTabBar for iOS style. Use platform checks to show the correct style for a native feel.

Navigation behavior differs slightly: iOS tabs keep state by default, Android may rebuild tabs unless managed.

Store Review Guidelines

• Ensure the bottom navigation bar is accessible: use semantic labels for icons and support screen readers.
• Follow platform design guidelines: Material Design for Android, Human Interface Guidelines for iOS.
• Do not use misleading icons or labels that confuse users.
• Ensure touch targets are at least 44x44 points for iOS and 48x48 dp for Android for easy tapping.
• Test navigation flow to avoid dead ends or confusing back navigation, which can cause app rejection.

Self-Check Question

Your app takes 5 seconds to load this screen with a bottom navigation bar. What is likely wrong?

• Loading all tab screens at startup instead of lazy loading increases startup time.
• Heavy widgets or large images inside the navigation bar or tabs cause slow rendering.
• Inefficient state management causes unnecessary rebuilds when switching tabs.
• Using custom animations or complex layouts in the navigation bar without optimization.

Key Result

Use Flutter's built-in BottomNavigationBar or CupertinoTabBar for efficient, platform-consistent navigation. Optimize tab screen loading and state management to keep UI smooth at 60fps and minimize startup delays.

Practice

1. What is the main purpose of a BottomNavigationBar in a Flutter app?

easy

A. To let users switch between main sections of the app easily

B. To display a list of items vertically

C. To show a popup menu on tap

D. To create a floating action button

Solution

1. Step 1: Understand the role of BottomNavigationBar

   The BottomNavigationBar widget is designed to help users navigate between main app sections by showing tabs at the bottom.

2. Step 2: Compare with other UI elements

   Options B, C, and D describe different widgets or behaviors not related to bottom navigation bars.

3. Final Answer:

   To let users switch between main sections of the app easily -> Option A

4. Quick Check:

   BottomNavigationBar purpose = navigation tabs [OK]

Hint: BottomNavigationBar is for main section switching [OK]

Common Mistakes:

• Confusing BottomNavigationBar with popup menus
• Thinking it creates floating buttons
• Assuming it displays vertical lists

2. Which of the following is the correct way to declare a BottomNavigationBar with two items in Flutter?

easy

A. BottomNavigationBar(buttons: [IconButton(icon: Icon(Icons.home)), IconButton(icon: Icon(Icons.search))])

B. BottomNavigationBar(children: [Icon(Icons.home), Icon(Icons.search)])

C. BottomNavigationBar(tabs: [Tab(icon: Icon(Icons.home)), Tab(icon: Icon(Icons.search))])

D. BottomNavigationBar(items: [BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'), BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search')])

Solution

1. Step 1: Check the correct property for items

   The BottomNavigationBar uses the items property with a list of BottomNavigationBarItem widgets.

2. Step 2: Verify the syntax of items

   BottomNavigationBar(items: [BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'), BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search')]) correctly uses items with BottomNavigationBarItem including icon and label.

3. Final Answer:

   BottomNavigationBar(items: [BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'), BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search')]) -> Option D

4. Quick Check:

   Use items with BottomNavigationBarItem [OK]

Hint: Use items with BottomNavigationBarItem for tabs [OK]

Common Mistakes:

• Using children instead of items
• Using tabs or buttons properties which don't exist
• Omitting label in BottomNavigationBarItem

3. Given this Flutter code snippet, what will be the value of _selectedIndex after tapping the second tab?

int _selectedIndex = 0;

BottomNavigationBar(
  currentIndex: _selectedIndex,
  onTap: (int index) {
    _selectedIndex = index;
  },
  items: const [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
  ],
)

medium

A. 1

B. 0

C. 2

D. -1

Solution

1. Step 1: Understand onTap behavior

   The onTap callback receives the tapped tab's index and assigns it to _selectedIndex.

2. Step 2: Identify tapped tab index

   The second tab has index 1 (indexing starts at 0), so _selectedIndex becomes 1.

3. Final Answer:

   1 -> Option A

4. Quick Check:

   Tapped tab index = _selectedIndex = 1 [OK]

Hint: Tabs index start at 0; second tab is index 1 [OK]

Common Mistakes:

• Assuming index starts at 1
• Not updating _selectedIndex on tap
• Confusing currentIndex with tapped index

4. What is wrong with this Flutter BottomNavigationBar code snippet?

int _selectedIndex = 0;

BottomNavigationBar(
  items: const [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
  ],
  onTap: (int index) {
    _selectedIndex = index;
  },
)

medium

A. BottomNavigationBarItem requires a title property

B. Missing currentIndex property to reflect selected tab

C. onTap callback should return a value

D. Using const keyword inside items list

Solution

1. Step 1: Check required properties for BottomNavigationBar

   The currentIndex property is needed to tell the widget which tab is active.

2. Step 2: Identify missing currentIndex usage

   Without currentIndex, the UI won't update to show the selected tab visually.

3. Final Answer:

   Missing currentIndex property to reflect selected tab -> Option B

4. Quick Check:

   currentIndex must be set for selected tab highlight [OK]

Hint: Always set currentIndex to show active tab [OK]

Common Mistakes:

• Forgetting currentIndex causes no visual update
• Thinking onTap must return a value
• Using deprecated title instead of label

5. You want to create a BottomNavigationBar with three tabs: Home, Search, and Profile. When a tab is tapped, the main content should update to show a different widget for each tab. Which approach correctly manages the state and updates the UI?

hard

A. Use a StatefulWidget but do not update _selectedIndex; just rebuild widgets conditionally

B. Use a StatelessWidget and update _selectedIndex variable directly inside onTap without setState

C. Use a StatefulWidget with an int _selectedIndex state; update _selectedIndex in onTap; use _selectedIndex to show different widgets in build method

D. Use a StatefulWidget and update _selectedIndex in onTap but do not call setState

Solution

1. Step 1: Understand state management for BottomNavigationBar

   To update UI on tab tap, you must store selected tab index in state and update it properly.

2. Step 2: Use StatefulWidget and setState to update UI

   Use a StatefulWidget with an int _selectedIndex state; update _selectedIndex in onTap; use _selectedIndex to show different widgets in build method correctly uses StatefulWidget, updates _selectedIndex inside onTap, and calls setState to rebuild UI with new content.

3. Final Answer:

   Use a StatefulWidget with an int _selectedIndex state; update _selectedIndex in onTap; use _selectedIndex to show different widgets in build method -> Option C

4. Quick Check:

   StatefulWidget + setState + _selectedIndex update = correct [OK]

Hint: Use StatefulWidget and setState to update selected tab [OK]

Common Mistakes:

• Using StatelessWidget and expecting UI to update
• Not calling setState after changing _selectedIndex
• Updating _selectedIndex without rebuilding UI