Why Bottom navigation bar in Flutter? - Purpose & Use Cases

The Big Idea

Discover how a simple bar at the bottom can make your app feel smooth and easy to use!

The Scenario

Imagine you want to let users switch between different main sections of your app, like Home, Search, and Profile. Without a bottom navigation bar, you might add buttons scattered around or use complicated menus that confuse users.

The Problem

Manually managing navigation with separate buttons or menus can be slow to build and hard to keep consistent. Users might get lost, and your code becomes messy and error-prone when handling which screen to show.

The Solution

The Bottom navigation bar gives you a simple, clear way to let users switch between main app areas. It handles the look, the taps, and the active state for you, making your app easier to use and your code cleaner.

Before vs After

✗ Before

ElevatedButton(onPressed: () { setState(() { currentPage = 'home'; }); }, child: Text('Home'))

✓ After

BottomNavigationBar(items: [...], currentIndex: currentIndex, onTap: onTap)

What It Enables

It enables smooth, intuitive navigation across your app's main sections with minimal code and great user experience.

Real Life Example

Think of apps like Instagram or Spotify where you tap icons at the bottom to jump between Feed, Search, and Your Library instantly.

Key Takeaways

Bottom navigation bars simplify switching between main app screens.

They improve user experience by providing clear, consistent navigation.

They reduce your code complexity by managing navigation states for you.

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