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