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.

Practice

1. What is the main purpose of using TabBar in Flutter tab navigation?

easy

A. To store the content of each tab

B. To control the animation speed between tabs

C. To display the tabs that users can tap to switch views

D. To handle user authentication

Solution

1. Step 1: Understand the role of TabBar

   TabBar is the widget that shows the clickable tabs at the top of the screen.

2. Step 2: Differentiate from other widgets

   TabBarView shows the content, and DefaultTabController manages the state, but TabBar is what users tap.

3. Final Answer:

   To display the tabs that users can tap to switch views -> Option C

4. Quick Check:

   TabBar shows tabs = A [OK]

Hint: TabBar shows tabs users tap to switch [OK]

Common Mistakes:

• Confusing TabBar with TabBarView
• Thinking TabBar stores content
• Mixing TabBar with controller roles

2. Which of the following is the correct way to create a tab with an icon and text in Flutter?

easy

A. TabBar(icon: Icon(Icons.home), label: 'Home')

B. Tab(icon: Icon(Icons.home), text: 'Home')

C. TabView(icon: Icon(Icons.home), text: 'Home')

D. Tab(icon: 'home', text: Icon('Home'))

Solution

1. Step 1: Recall Tab widget syntax

   The Tab widget accepts named parameters icon and text for icon and label.

2. Step 2: Check each option

   Tab(icon: Icon(Icons.home), text: 'Home') uses correct syntax. TabBar(icon: Icon(Icons.home), label: 'Home') wrongly uses TabBar instead of Tab. TabView(icon: Icon(Icons.home), text: 'Home') uses TabView which is incorrect. Tab(icon: 'home', text: Icon('Home')) swaps icon and text types.

3. Final Answer:

   Tab(icon: Icon(Icons.home), text: 'Home') -> Option B

4. Quick Check:

   Tab with icon and text = B [OK]

Hint: Use Tab widget with icon and text named parameters [OK]

Common Mistakes:

• Using TabBar instead of Tab for tabs
• Passing wrong types to icon or text
• Confusing TabView with Tab

3. What will be displayed when the following Flutter code runs?

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

medium

A. App crashes due to missing controller

B. Tabs labeled 'One' and 'Two' but no content shown below

C. Only one tab labeled 'One' with 'Page One' content

D. Two tabs labeled 'One' and 'Two' with corresponding pages showing 'Page One' and 'Page Two'

Solution

1. Step 1: Analyze DefaultTabController usage

   The controller manages two tabs as length is 2, matching tabs and views count.

2. Step 2: Match tabs and views

   Tabs 'One' and 'Two' correspond to TabBarView children showing 'Page One' and 'Page Two'.

3. Final Answer:

   Two tabs labeled 'One' and 'Two' with corresponding pages showing 'Page One' and 'Page Two' -> Option D

4. Quick Check:

   Tabs and views match = A [OK]

Hint: Tabs and views count must match for correct display [OK]

Common Mistakes:

• Mismatching tabs and views length
• Forgetting DefaultTabController
• Expecting content without TabBarView

4. Identify the error in this Flutter tab navigation code snippet:

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(
        tabs: [Tab(text: 'A'), Tab(text: 'B')],
      ),
    ),
    body: TabBarView(
      children: [
        Center(child: Text('Page A')),
        Center(child: Text('Page B')),
        Center(child: Text('Page C')),
      ],
    ),
  ),
)

medium

A. The number of tabs does not match the length in DefaultTabController

B. TabBarView has fewer children than tabs

C. Tabs should not have text property

D. DefaultTabController length should be 2

Solution

1. Step 1: Compare length and tabs count

   DefaultTabController length is 3, but TabBar has only 2 tabs.

2. Step 2: Check TabBarView children count

   TabBarView has 3 children, matching controller length but not tabs count.

3. Final Answer:

   The number of tabs does not match the length in DefaultTabController -> Option A

4. Quick Check:

   Tabs count must match controller length = C [OK]

Hint: Tabs count must equal controller length [OK]

Common Mistakes:

• Mismatching tabs and controller length
• Ignoring TabBarView children count
• Thinking tabs can't have text

5. You want to create a Flutter app with 3 tabs: Home, Search, and Profile. Each tab should show an icon and text. How do you correctly set up the tabs and their views to ensure smooth navigation?

hard

A. Use DefaultTabController(length: 3), TabBar with 3 Tab widgets each having icon and text, and TabBarView with 3 matching children widgets

B. Use DefaultTabController(length: 2), TabBar with 3 tabs, and TabBarView with 3 children

C. Use TabBar only with 3 tabs, no controller or TabBarView needed

D. Use DefaultTabController(length: 3), TabBar with 2 tabs, and TabBarView with 3 children

Solution

1. Step 1: Set DefaultTabController length to 3

   Since there are 3 tabs, the controller length must be 3 to manage state properly.

2. Step 2: Create TabBar with 3 tabs each having icon and text

   Each tab should use the Tab widget with icon and text properties for clarity.

3. Step 3: Provide TabBarView with 3 children widgets

   Each child corresponds to a tab's content, matching the controller length and tabs count.

4. Final Answer:

   Use DefaultTabController(length: 3), TabBar with 3 Tab widgets each having icon and text, and TabBarView with 3 matching children widgets -> Option A

5. Quick Check:

   Matching length, tabs, and views = D [OK]

Hint: Match controller length, tabs, and views count [OK]

Common Mistakes:

• Mismatching length and tabs count
• Omitting TabBarView for content
• Not using icons with text as required