Tab navigation in Flutter - Mini App: Build & Ship

Build: Simple Tab Navigation

A screen with bottom tab navigation to switch between Home, Search, and Profile pages.

Target UI

┌─────────────────────────────┐
│          App Bar            │
├─────────────────────────────┤
│                             │
│        [Content Area]        │
│                             │
├─────────────────────────────┤
│ Home | Search | Profile     │
└─────────────────────────────┘

Use a BottomNavigationBar with three tabs: Home, Search, Profile

Display a different centered text for each tab: 'Home Screen', 'Search Screen', 'Profile Screen'

Switch content when tapping different tabs

Highlight the selected tab icon and label

Use StatefulWidget to manage tab state

Starter Code

Flutter

import 'package:flutter/material.dart';

class TabNavigationScreen extends StatefulWidget {
  @override
  State<TabNavigationScreen> createState() => _TabNavigationScreenState();
}

class _TabNavigationScreenState extends State<TabNavigationScreen> {
  int _selectedIndex = 0;

  // TODO: Add list of widget pages here

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Tab Navigation'),
      ),
      body: Center(
        // TODO: Show selected page content here
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        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';

class TabNavigationScreen extends StatefulWidget {
  @override
  State<TabNavigationScreen> createState() => _TabNavigationScreenState();
}

class _TabNavigationScreenState extends State<TabNavigationScreen> {
  int _selectedIndex = 0;

  static const List<Widget> _pages = <Widget>[
    Center(child: Text('Home Screen', style: TextStyle(fontSize: 24))),
    Center(child: Text('Search Screen', style: TextStyle(fontSize: 24))),
    Center(child: Text('Profile Screen', style: TextStyle(fontSize: 24))),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Simple Tab Navigation'),
      ),
      body: _pages[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

This solution uses a StatefulWidget to keep track of the selected tab index with _selectedIndex. We define a static list _pages containing three Center widgets each showing the text for Home, Search, and Profile screens.

The BottomNavigationBar has three items with icons and labels. When a tab is tapped, _onItemTapped updates the selected index and rebuilds the UI.

The body of the Scaffold shows the widget from _pages matching the selected index, so the content changes accordingly.

This creates a simple tab navigation experience familiar in many apps.

Final Result

Completed Screen

┌─────────────────────────────┐
│      Simple Tab Navigation   │
├─────────────────────────────┤
│                             │
│        Home Screen           │
│                             │
├─────────────────────────────┤
│ Home* | Search | Profile    │
└─────────────────────────────┘

Tapping 'Search' tab changes center text to 'Search Screen' and highlights Search tab

Tapping 'Profile' tab changes center text to 'Profile Screen' and highlights Profile tab

Tapping 'Home' tab returns to 'Home Screen' and highlights Home tab

Stretch Goal

Add icons that change color when selected and add a simple fade animation when switching tabs.

💡 Hint

Use BottomNavigationBar's selectedItemColor property for color change and AnimatedSwitcher widget to animate the body content.