Tab navigation in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this Flutter TabBar code?

Consider this Flutter widget with a TabBar and TabBarView. What will the user see when the app runs?

Flutter

DefaultTabController(
  length: 2,
  child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(
        tabs: [
          Tab(icon: Icon(Icons.home)),
          Tab(icon: Icon(Icons.settings)),
        ],
      ),
      title: Text('Tabs Example'),
    ),
    body: TabBarView(
      children: [
        Center(child: Text('Home Page')),
        Center(child: Text('Settings Page')),
      ],
    ),
  ),
)

A The app shows an AppBar with two tabs: Home and Settings icons. Tapping each tab switches the main content between 'Home Page' and 'Settings Page' text.

B The app shows two tabs but tapping them does not change the content; the body stays empty.

C The app shows tabs but the icons are missing and only text labels appear.

D The app crashes because TabBarView children count does not match TabBar tabs count.

💡 Hint

Check how many tabs and TabBarView children are defined and what widgets they contain.

The DefaultTabController manages the tab selection. The TabBar shows two tabs with icons. The TabBarView has two children widgets matching the tabs. Tapping a tab switches the displayed child widget accordingly.

❓ lifecycle

intermediate

What happens when switching tabs in this Flutter app?

Given this Flutter code with TabBarView and stateful children, what lifecycle behavior occurs when switching tabs?

Flutter

DefaultTabController(
  length: 2,
  child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(tabs: [Tab(text: 'A'), Tab(text: 'B')]),
    ),
    body: TabBarView(
      children: [
        StatefulWidgetA(),
        StatefulWidgetB(),
      ],
    ),
  ),
)

class StatefulWidgetA extends StatefulWidget {
  @override
  State<StatefulWidgetA> createState() => _StatefulWidgetAState();
}

class _StatefulWidgetAState extends State<StatefulWidgetA> {
  @override
  void initState() {
    super.initState();
    print('A initState');
  }
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Widget A'));
  }
}

A Switching tabs disposes the previous tab widget and recreates it fresh with initState.

B Switching tabs causes initState to run again for the tab being shown each time.

C Both StatefulWidgetA and StatefulWidgetB initState run once at app start; switching tabs does not recreate them.

D Only the first tab's initState runs; the second tab's initState never runs.

💡 Hint

Think about how TabBarView keeps its children alive by default.

TabBarView keeps all its children alive in memory by default, so each child's initState runs once when first created. Switching tabs only changes visibility, not widget recreation.

❓ navigation

advanced

Which option correctly updates the selected tab programmatically?

You want to switch to the second tab in a DefaultTabController from code (not user tap). Which code snippet does this correctly?

Flutter

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

A DefaultTabController.of(context)?.animateTo(1);

B TabController.of(context).index = 1;

C DefaultTabController.of(context).setIndex(1);

D TabBarController.of(context)?.animateToIndex(1);

💡 Hint

Look for the official method to animate tab changes on DefaultTabController.

DefaultTabController.of(context) returns the TabController. The animateTo(index) method changes the selected tab with animation. Other options use incorrect method names or classes.

📝 Syntax

advanced

What error does this Flutter TabBar code produce?

Analyze this Flutter code snippet. What error will it cause?

Flutter

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

A The app shows two tabs but tapping the second tab does nothing.

B The app runs fine but only shows the first tab and page.

C The app crashes with a null pointer exception.

D Flutter throws an assertion error because TabBar tabs count (1) does not match TabBarView children count (2).

💡 Hint

Check the number of tabs vs the number of TabBarView children.

TabBar and TabBarView must have the same number of tabs and children. Mismatch causes an assertion error at runtime.

🔧 Debug

expert

Why does this Flutter TabBarView not update when tapping tabs?

Given this Flutter code, tapping tabs does not change the displayed page. What is the cause?

Flutter

class MyTabs extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          tabs: [Tab(text: 'A'), Tab(text: 'B')],
        ),
        title: Text('Tabs'),
      ),
      body: TabBarView(
        children: [
          Center(child: Text('Page A')),
          Center(child: Text('Page B')),
        ],
      ),
    );
  }
}

A The TabBar tabs list is empty, so no tabs appear to tap.

B No DefaultTabController is provided, so TabBar and TabBarView have no controller to sync tabs and pages.

C The TabBarView children are not wrapped in StatefulWidgets, so they don't update.

D The Scaffold is missing a body property, so TabBarView is not shown.

💡 Hint

Check if a controller is managing the tabs.

TabBar and TabBarView need a TabController to coordinate tab selection and page display. Without DefaultTabController or a custom controller, tapping tabs does nothing.

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