Bottom navigation bar in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when you tap a BottomNavigationBar item?

Given this Flutter code snippet for a BottomNavigationBar, what will be the visible result when the user taps the second item?

Flutter

BottomNavigationBar(
  currentIndex: _selectedIndex,
  onTap: (int index) {
    setState(() {
      _selectedIndex = index;
    });
  },
  items: const [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
    BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
  ],
)

A The app crashes because _selectedIndex is not defined.

B Nothing changes visually because onTap is not connected to any state update.

C All items become highlighted simultaneously.

D The second item icon and label become highlighted, and the UI updates to show the Search page content.

💡 Hint

Think about what setState does and how currentIndex controls the highlight.

Tapping an item calls onTap, which updates _selectedIndex inside setState. This triggers a rebuild, highlighting the tapped item and allowing the UI to show related content.

❓ lifecycle

intermediate

Why use setState inside onTap of BottomNavigationBar?

In Flutter, why is it important to call setState inside the onTap callback of a BottomNavigationBar?

A Because setState disables the BottomNavigationBar temporarily.

B Because setState tells Flutter to rebuild the widget with updated state, reflecting the selected tab visually.

C Because setState automatically saves the app state to disk.

D Because setState prevents the app from freezing when tapping items.

💡 Hint

Think about how Flutter knows to update the screen when data changes.

setState notifies Flutter that the widget's state changed, so it rebuilds the widget tree to show the new selected tab highlight and content.

📝 Syntax

advanced

Identify the syntax error in this BottomNavigationBar code

What is the syntax error in this BottomNavigationBar snippet?

Flutter

BottomNavigationBar(
  currentIndex: _selectedIndex,
  onTap: (index) => setState(() => _selectedIndex = index),
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
  ],
)

A Missing comma after currentIndex: _selectedIndex

B onTap callback syntax is invalid

C BottomNavigationBarItem requires a title property instead of label

D Items list should be a Map, not a List

💡 Hint

Check punctuation between parameters.

In Dart, parameters in a widget constructor must be separated by commas. The missing comma after currentIndex causes a syntax error.

❓ navigation

advanced

How to preserve state when switching tabs with BottomNavigationBar?

Which approach best preserves the state of each tab's content when switching tabs using BottomNavigationBar?

A Use IndexedStack to keep all tab widgets alive and switch visibility based on selected index.

B Use Navigator.push to open a new page for each tab selection.

C Rebuild the tab content widget every time the tab changes to refresh the UI.

D Use a single widget and change its content dynamically without preserving previous state.

💡 Hint

Think about how to keep widgets in memory but only show one at a time.

IndexedStack keeps all children alive but shows only the one at the selected index, preserving their states when switching tabs.

🔧 Debug

expert

Why does BottomNavigationBar not update highlight on tap?

Given this Flutter code, why does tapping BottomNavigationBar items not update the highlighted item?

Flutter

int _selectedIndex = 0;

Widget build(BuildContext context) {
  return Scaffold(
    bottomNavigationBar: BottomNavigationBar(
      currentIndex: _selectedIndex,
      onTap: (index) {
        _selectedIndex = index;
      },
      items: const [
        BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
        BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
      ],
    ),
  );
}

A Because BottomNavigationBar requires a key to update the selected item.

B Because currentIndex must be a final variable, not a mutable one.

C Because setState is not called after updating _selectedIndex, so UI does not rebuild.

D Because onTap callback must return a boolean to confirm selection.

💡 Hint

Think about how Flutter knows to redraw widgets when state changes.

Without calling setState, Flutter does not know the state changed and does not rebuild the widget, so the highlight does not update.

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