How to Create Tab Navigation in Flutter: Simple Guide

To create tab navigation in Flutter, use DefaultTabController to manage tabs, TabBar for the tab headers, and TabBarView for the tab content. Wrap these widgets inside a Scaffold to build a simple tabbed interface.

Syntax

The basic syntax for tab navigation in Flutter involves three main widgets:

• DefaultTabController: Manages the state and index of the tabs.
• TabBar: Displays the tabs at the top, usually inside the AppBar.
• TabBarView: Shows the content for each tab.

These widgets work together to create a smooth tab navigation experience.

dart

DefaultTabController(
  length: 3, // number of tabs
  child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(
        tabs: [
          Tab(text: 'Tab 1'),
          Tab(text: 'Tab 2'),
          Tab(text: 'Tab 3'),
        ],
      ),
      title: Text('Tabs Example'),
    ),
    body: TabBarView(
      children: [
        Center(child: Text('Content 1')),
        Center(child: Text('Content 2')),
        Center(child: Text('Content 3')),
      ],
    ),
  ),
)

Output

A screen with an app bar titled 'Tabs Example' and three tabs labeled 'Tab 1', 'Tab 2', and 'Tab 3'. Selecting each tab changes the content below to 'Content 1', 'Content 2', or 'Content 3' respectively.

Example

This example shows a complete Flutter app with tab navigation using DefaultTabController, TabBar, and TabBarView. It demonstrates how to switch between three tabs with different content.

dart

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('Flutter Tab Navigation'),
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.home), text: 'Home'),
                Tab(icon: Icon(Icons.star), text: 'Favorites'),
                Tab(icon: Icon(Icons.settings), text: 'Settings'),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text('Home Content')),
              Center(child: Text('Favorites Content')),
              Center(child: Text('Settings Content')),
            ],
          ),
        ),
      ),
    );
  }
}

Output

An app with a top app bar titled 'Flutter Tab Navigation' and three tabs with icons and labels: Home, Favorites, and Settings. Tapping each tab changes the main content area to show 'Home Content', 'Favorites Content', or 'Settings Content'.

Common Pitfalls

Common mistakes when creating tab navigation in Flutter include:

• Not wrapping the widgets inside DefaultTabController, which manages tab state.
• Mismatch between the number of tabs in TabBar and the children in TabBarView, causing runtime errors.
• Placing TabBar outside the AppBar without proper layout, leading to UI issues.

Always ensure the length in DefaultTabController matches the number of tabs and views.

dart

/* Wrong: length mismatch causes error */
DefaultTabController(
  length: 2, // but 3 tabs below
  child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(
        tabs: [Tab(text: 'One'), Tab(text: 'Two'), Tab(text: 'Three')],
      ),
    ),
    body: TabBarView(
      children: [
        Center(child: Text('One')),
        Center(child: Text('Two')),
      ],
    ),
  ),
);

/* Right: length matches tabs and views */
DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(
        tabs: [Tab(text: 'One'), Tab(text: 'Two'), Tab(text: 'Three')],
      ),
    ),
    body: TabBarView(
      children: [
        Center(child: Text('One')),
        Center(child: Text('Two')),
        Center(child: Text('Three')),
      ],
    ),
  ),
);

Quick Reference

Tab Navigation Cheat Sheet:

• DefaultTabController(length: n): Wraps your widget tree to manage tab state.
• TabBar(tabs: [...]): Displays the tabs, usually inside AppBar.bottom.
• TabBarView(children: [...]): Shows the content for each tab.
• Ensure length matches the number of tabs and views.
• Use Tab(icon: Icon(...), text: 'Label') for tabs with icons and text.

Key Takeaways

Use DefaultTabController to manage tab state and length.

TabBar shows the tabs; TabBarView shows the content for each tab.

The number of tabs and TabBarView children must match exactly.

Place TabBar inside AppBar's bottom property for standard layout.

Use icons and text in tabs for better user experience.