Tab navigation in Flutter - UI Render Trace

Component - Tab navigation

This UI component shows how to switch between different pages using tabs at the bottom of the screen. Each tab displays a different content area when selected, making it easy to organize app sections.

Widget Tree

Scaffold
├── AppBar
├── body: TabBarView
│   └── children: [HomePage, SearchPage, ProfilePage]
└── bottomNavigationBar: TabBar

The Scaffold provides the basic app layout with a top AppBar. The body contains a TabBarView that shows the content for the selected tab. The bottomNavigationBar holds the TabBar with three tabs: Home, Search, and Profile.

Render Trace - 3 Steps

Step 1: Scaffold

Step 2: TabBar

Step 3: TabBarView

State Change - Re-render

Trigger:User taps on the 'Search' tab in the bottom TabBar.

Before

Selected tab is 'Home', so HomePage content is visible.

→

After

Selected tab changes to 'Search', so SearchPage content is visible.

Re-renders:The TabBarView updates to show SearchPage. The TabBar updates to highlight the 'Search' tab.

UI Quiz - 3 Questions

What happens when the user taps a different tab in the TabBar?

A The AppBar title changes automatically.

B The app closes and restarts.

C The content in the TabBarView changes to match the selected tab.

D Nothing happens; tabs are not interactive.

Key Insight

Tab navigation helps users switch between different app sections quickly. Using TabBar and TabBarView together keeps the UI organized and responsive. Always place TabBar in the bottomNavigationBar for easy access and use TabBarView to show the matching content.

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