0
0
Fluttermobile~20 mins

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

Choose your learning style9 modes available
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