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.