Bottom navigation bar in Flutter - Mini App: Build & Ship

Build: Home Screen with Bottom Navigation

This screen shows a bottom navigation bar with three tabs: Home, Search, and Profile. Tapping each tab changes the main content area to show the selected page name.

Target UI

┌─────────────────────────────┐
│                             │
│          Home Page           │
│                             │
│                             │
│                             │
│                             │
│                             │
├────────────┬────────────┬────────────┤
│   Home     │   Search   │  Profile   │
│  (icon)    │  (icon)    │  (icon)    │
└────────────┴────────────┴────────────┘

Add a BottomNavigationBar with three items: Home, Search, Profile

Show the selected tab's name in the center of the screen

Highlight the selected tab icon and label

Switch content when tapping different tabs

Starter Code

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;

  // TODO: Add list of page titles

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Bottom Navigation Demo'),
      ),
      body: Center(
        // TODO: Show selected page title here
      ),
      bottomNavigationBar: 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',
          ),
        ],
      ),
    );
  }
}

Task 1

Task 2

Solution

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;

  static const List<String> _pageTitles = ['Home Page', 'Search Page', 'Profile Page'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Bottom Navigation Demo'),
      ),
      body: Center(
        child: Text(
          _pageTitles[_selectedIndex],
          style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
        ),
      ),
      bottomNavigationBar: 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',
          ),
        ],
      ),
    );
  }
}

We added a list _pageTitles to hold the names of the pages for each tab. In the body of the Scaffold, we show the title of the currently selected tab using _selectedIndex. The BottomNavigationBar updates _selectedIndex when a tab is tapped, and the UI updates to show the correct page name. The selected tab is highlighted automatically by Flutter.

Final Result

Completed Screen

┌─────────────────────────────┐
│                             │
│          Home Page           │
│                             │
│                             │
│                             │
│                             │
│                             │
├────────────┬────────────┬────────────┤
│   Home     │   Search   │  Profile   │
│  (icon)    │  (icon)    │  (icon)    │
└────────────┴────────────┴────────────┘

Tapping 'Search' tab changes center text to 'Search Page' and highlights Search icon

Tapping 'Profile' tab changes center text to 'Profile Page' and highlights Profile icon

Tapping 'Home' tab returns center text to 'Home Page' and highlights Home icon

Stretch Goal

Add icons that change color when selected and unselected with custom colors

💡 Hint

Use the 'selectedItemColor' and 'unselectedItemColor' properties of BottomNavigationBar

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