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.