Tab navigation in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a TabBar with three tabs.

Flutter

TabBar(tabs: [Tab(text: 'Home'), Tab(text: 'Search'), Tab(text: [1])])

Drag options to blanks, or click blank then click option'

A'Settings'

B'Profile'

C'Messages'

D'Notifications'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a tab label that doesn't match the app design.

The third tab should be labeled 'Profile' to complete the TabBar with three tabs.

2fill in blank

medium

Complete the code to set up a DefaultTabController with 3 tabs.

Flutter

DefaultTabController(length: [1], child: Scaffold())

Drag options to blanks, or click blank then click option'

A2

B1

C4

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Setting length to a number different from the actual tabs count.

The length must be 3 to match the number of tabs in the TabBar.

3fill in blank

hard

Fix the error in the TabBarView children list to match the number of tabs.

Flutter

TabBarView(children: [Center(child: Text('Home')), Center(child: Text('Search')), Center(child: Text([1]))])

Drag options to blanks, or click blank then click option'

A'Profile Page'

B'Settings Page'

C'Messages Page'

D'Notifications Page'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a page content that does not match the tab label.

The third child must correspond to the third tab, which is 'Profile'.

4fill in blank

hard

Fill both blanks to create a TabBar inside the AppBar with three tabs.

Flutter

AppBar(title: Text('My App'), bottom: [1](tabs: [[2]]))

Drag options to blanks, or click blank then click option'

ATabBar

BTab(text: 'Home'), Tab(text: 'Search'), Tab(text: 'Profile')

CBottomNavigationBar

DTabView

Attempts:

3 left

💡 Hint

Common Mistakes

Using BottomNavigationBar instead of TabBar inside AppBar.

The AppBar's bottom property should be a TabBar widget with the list of Tab widgets.

5fill in blank

hard

Fill the blanks to complete a DefaultTabController with Scaffold, AppBar, and TabBarView.

Flutter

DefaultTabController(length: [1], child: Scaffold(appBar: AppBar(title: Text('Tabs')), body: [2](children: [Center(child: Text('Home')), Center(child: Text('Search')), Center(child: Text('Profile'))])))

Drag options to blanks, or click blank then click option'

A3

BTabBarView

CTabBar

DContainer

Attempts:

3 left

💡 Hint

Common Mistakes

Using TabBar instead of TabBarView for body content.

Length is 3 for three tabs, body uses TabBarView to show pages.

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