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.