Bottom navigation bar in Flutter - Deep Dive

Overview - Bottom navigation bar

What is it?

A bottom navigation bar is a user interface element placed at the bottom of a mobile app screen. It allows users to quickly switch between different main sections or pages of the app by tapping icons or labels. This bar usually shows 3 to 5 options and stays visible as users navigate.

Why it matters

Without a bottom navigation bar, users might get lost or take longer to find important parts of an app. It helps organize the app’s main features clearly and makes switching between them fast and easy. This improves user experience and keeps people engaged with the app.

Where it fits

Before learning about bottom navigation bars, you should understand basic Flutter widgets and how navigation works in Flutter apps. After this, you can learn about more advanced navigation patterns like drawer menus, tabs, or nested navigation stacks.

Mental Model

Core Idea

A bottom navigation bar is like a simple menu fixed at the bottom of the screen that lets users jump between main app sections with one tap.

Think of it like...

Imagine a TV remote with buttons for different channels. Each button instantly takes you to a favorite channel without scrolling through a long list. The bottom navigation bar works the same way for app pages.

┌─────────────────────────────┐
│                             │
│         App Content          │
│                             │
├────────────┬────────────┬────────────┤
│  Home Icon │ Search Icon│ Profile Icon│
│  Home      │ Search     │ Profile    │
└────────────┴────────────┴────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding basic navigation

Concept: Learn how Flutter moves between screens using simple navigation.

In Flutter, you can move from one screen to another using Navigator.push and Navigator.pop. This lets you open new pages and go back. But switching between main sections repeatedly needs a better way.

Result

You can open new pages and return, but switching main sections feels slow and clunky.

Understanding basic navigation shows why a bottom navigation bar is needed for quick switching.

2

Foundation

Introducing BottomNavigationBar widget

Concept: Flutter provides a built-in widget called BottomNavigationBar to create bottom bars easily.

BottomNavigationBar lets you define multiple items with icons and labels. It handles taps and highlights the selected item. You place it in the Scaffold widget’s bottomNavigationBar property.

Result

You see a bar at the bottom with tappable icons that highlight when selected.

Knowing this widget exists simplifies adding bottom navigation without building from scratch.

3

Intermediate

Managing selected tab state

🤔Before reading on: do you think the BottomNavigationBar remembers the selected tab automatically or do you need to manage it yourself? Commit to your answer.

Concept: You must keep track of which tab is selected using state to update the UI correctly.

Use a StatefulWidget with an integer variable to store the current index. When a user taps a tab, update this index with setState. Pass this index to BottomNavigationBar’s currentIndex property.

Result

The selected tab highlights correctly and changes when tapped.

Understanding state management here is key to making the navigation bar interactive and responsive.

4

Intermediate

Switching displayed content by tab

🤔Before reading on: do you think you should create separate pages for each tab or reuse one page with different content? Commit to your answer.

Concept: Display different widgets for each tab by switching content based on the selected index.

Create a list of widgets, each representing a page. In the build method, show the widget at the current index. This changes the main content when the user taps a tab.

Result

The main screen content changes instantly as different tabs are selected.

Knowing how to link tab selection to content display completes the navigation experience.

5

Intermediate

Customizing appearance and behavior

Concept: You can change colors, icon sizes, labels, and behavior of the BottomNavigationBar to fit your app’s style.

Use properties like selectedItemColor, unselectedItemColor, type (fixed or shifting), and iconSize. You can also hide labels or show them always. This helps match your app’s design.

Result

The bottom bar looks and behaves exactly as you want, improving user experience.

Customization lets your app feel unique and polished, not generic.

6

Advanced

Handling navigation with nested navigators

🤔Before reading on: do you think each tab can have its own navigation stack or all tabs share one? Commit to your answer.

Concept: Each tab can have its own navigation history using nested Navigators, so users can go back within a tab without losing tab state.

Wrap each tab’s content in a Navigator widget with its own key. This lets users navigate inside tabs independently. Switching tabs preserves each tab’s navigation stack.

Result

Users can drill down in one tab, switch tabs, and return to the previous tab exactly where they left off.

Understanding nested navigation is crucial for complex apps with deep navigation inside tabs.

7

Expert

Performance and state preservation tricks

🤔Before reading on: do you think Flutter rebuilds all tab pages every time you switch tabs? Commit to your answer.

Concept: Use IndexedStack or keep-alive mixins to preserve state and avoid rebuilding pages unnecessarily.

Wrap tab pages in an IndexedStack to keep them alive and only show the selected one. Alternatively, use AutomaticKeepAliveClientMixin in tab widgets to keep their state. This improves performance and user experience.

Result

Switching tabs is smooth, and user input or scroll position is preserved.

Knowing how to preserve state prevents frustrating user experiences and improves app efficiency.

Under the Hood

The BottomNavigationBar widget builds a row of buttons fixed at the bottom of the Scaffold. It listens for taps and updates the selected index. Flutter’s widget tree rebuilds the UI based on this index. When nested navigators are used, each tab manages its own navigation stack internally, isolated from others.

Why designed this way?

Mobile apps need quick access to main sections without complex menus. Placing navigation at the bottom is ergonomic for thumbs. Flutter’s design separates UI (widgets) from state, so developers control navigation state explicitly for flexibility and performance.

┌─────────────────────────────┐
│        Scaffold             │
│ ┌─────────────────────────┐ │
│ │       Body Content       │ │
│ │  (changes by tab index)  │ │
│ └─────────────────────────┘ │
│ ┌─────────────────────────┐ │
│ │ BottomNavigationBar      │ │
│ │ - Items (icons + labels) │ │
│ │ - currentIndex           │ │
│ │ - onTap callback         │ │
│ └─────────────────────────┘ │
└─────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does BottomNavigationBar automatically keep each tab’s navigation history? Commit yes or no.

Common Belief: BottomNavigationBar automatically remembers navigation history for each tab.

Reality: By default, BottomNavigationBar does not preserve navigation stacks; you must implement nested navigators to keep history per tab.

Why it matters: Without nested navigators, users lose their place when switching tabs, causing frustration and poor UX.

Quick: Can you put more than 5 items in BottomNavigationBar without issues? Commit yes or no.

Common Belief: You can add as many items as you want to BottomNavigationBar without problems.

Reality: BottomNavigationBar supports only up to 5 items; more items cause layout issues and poor usability.

Why it matters: Adding too many items makes the bar cluttered and hard to use, hurting app navigation.

Quick: Does BottomNavigationBar automatically manage the selected tab state? Commit yes or no.

Common Belief: BottomNavigationBar manages the selected tab state internally without developer code.

Reality: Developers must manage the selected tab state explicitly using StatefulWidgets and update currentIndex.

Why it matters: Assuming automatic state management leads to non-responsive UI and bugs.

Quick: Is BottomNavigationBar the only way to do bottom navigation in Flutter? Commit yes or no.

Common Belief: BottomNavigationBar is the only widget to create bottom navigation in Flutter.

Reality: Flutter offers other options like NavigationBar (Material 3), custom widgets, or third-party packages for bottom navigation.

Why it matters: Knowing alternatives helps choose the best tool for your app’s design and requirements.

Expert Zone

1

Using IndexedStack preserves widget states but can increase memory usage if many tabs hold heavy widgets.

2

Nested navigators require careful management of navigator keys to avoid conflicts and unexpected behavior.

3

The shifting type BottomNavigationBar animates item colors and sizes, but only works well with 3 to 5 items.

When NOT to use

Avoid BottomNavigationBar for apps with more than 5 main sections or when deep hierarchical navigation is needed; consider drawer menus or side navigation instead.

Production Patterns

In production, apps often combine BottomNavigationBar with nested navigators to maintain independent navigation stacks per tab, use IndexedStack for state preservation, and customize colors and animations to match brand identity.

Connections

Tab Bar (iOS)

Similar UI pattern for switching main app sections, but designed for iOS style.

Understanding BottomNavigationBar helps grasp cross-platform navigation patterns and platform-specific design differences.

State Management

Bottom navigation requires managing selected tab state, linking UI and app logic.

Knowing state management principles is essential to build responsive navigation bars that update correctly.

Human Factors and Ergonomics

Bottom navigation placement is based on ease of thumb reach and user comfort.

App design benefits from understanding how humans physically interact with devices, improving usability.

Common Pitfalls

#1 Tabs do not update visually when tapped.

Wrong approach:

BottomNavigationBar(
items: items,
currentIndex: 0,
onTap: (index) {
// no setState called
},
)

Correct approach:

int _currentIndex = 0;

BottomNavigationBar(
items: items,
currentIndex: _currentIndex,
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
)

Root cause:

Not updating the state variable inside setState prevents Flutter from rebuilding the widget with the new selected index.

#2 Losing navigation history when switching tabs.

Wrong approach:

Switching tabs by replacing the entire body widget without nested navigators or state preservation.

Correct approach:

Use nested Navigators with unique keys for each tab or wrap tab pages in an IndexedStack to keep their state.

Root cause:

Replacing widgets without preserving state causes Flutter to rebuild pages from scratch, losing navigation history.

#3 Adding too many items to BottomNavigationBar.

Wrong approach:

BottomNavigationBar(
items: [item1, item2, item3, item4, item5, item6],
currentIndex: 0,
onTap: ...
)

Correct approach:

Limit BottomNavigationBar items to 3-5 or use alternative navigation patterns like drawer menus for more options.

Root cause:

BottomNavigationBar is designed for a small number of items; exceeding this breaks layout and usability.

Key Takeaways

A bottom navigation bar provides quick access to main app sections with a fixed menu at the screen bottom.

Flutter’s BottomNavigationBar widget requires explicit state management to track and update the selected tab.

To preserve navigation history per tab, nested navigators or IndexedStack should be used.

Customization of colors, labels, and behavior helps match the app’s style and improve user experience.

Understanding the limits and alternatives of bottom navigation ensures you choose the best navigation pattern for your app.