Tab navigation in Flutter

Introduction

Tab navigation helps users switch between different sections of an app quickly. It keeps the app organized and easy to use.

When your app has multiple main sections like Home, Search, and Profile.

When you want users to switch views without leaving the current screen.

When you want to show different content categories side by side.

When you want a simple way to organize app features at the bottom or top.

Syntax

Flutter

DefaultTabController(
  length: number_of_tabs,
  child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(
        tabs: [
          Tab(icon: Icon(Icons.icon1)),
          Tab(text: 'Tab 2'),
          // more tabs
        ],
      ),
    ),
    body: TabBarView(
      children: [
        WidgetForTab1(),
        WidgetForTab2(),
        // more widgets
      ],
    ),
  ),
)

DefaultTabController manages the state of the tabs automatically.

TabBar shows the tabs, and TabBarView shows the content for each tab.

Examples

A simple tab navigation with two tabs labeled Home and Settings.

Flutter

DefaultTabController(
  length: 2,
  child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(
        tabs: [
          Tab(text: 'Home'),
          Tab(text: 'Settings'),
        ],
      ),
    ),
    body: TabBarView(
      children: [
        Center(child: Text('Home Page')),
        Center(child: Text('Settings Page')),
      ],
    ),
  ),
)

Tabs with icons only, showing big icons as content for each tab.

Flutter

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      title: Text('My App'),
      bottom: TabBar(
        tabs: [
          Tab(icon: Icon(Icons.home)),
          Tab(icon: Icon(Icons.search)),
          Tab(icon: Icon(Icons.person)),
        ],
      ),
    ),
    body: TabBarView(
      children: [
        Icon(Icons.home, size: 100),
        Icon(Icons.search, size: 100),
        Icon(Icons.person, size: 100),
      ],
    ),
  ),
)

Sample App

This app shows a top tab bar with three tabs: Home, Search, and Profile. Each tab shows a simple text message in the center.

Flutter

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: Text('Tab Navigation Example'),
            bottom: TabBar(
              tabs: [
                Tab(text: 'Home'),
                Tab(text: 'Search'),
                Tab(text: 'Profile'),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text('Welcome to Home')), 
              Center(child: Text('Search something')), 
              Center(child: Text('Your Profile')),
            ],
          ),
        ),
      ),
    );
  }
}

Important Notes

Always set the length in DefaultTabController to match the number of tabs.

You can use text, icons, or both inside Tab widgets.

TabBar usually goes inside the AppBar for a clean look.

Summary

Tab navigation lets users switch between app sections easily.

Use DefaultTabController, TabBar, and TabBarView together.

Tabs can have text, icons, or both for clear navigation.