Bottom navigation bar in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a BottomNavigationBar widget.

Flutter

BottomNavigationBar(
  items: const <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.business),
      label: [1],
    ),
  ],
)

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

A'Settings'

B'Profile'

C'Business'

D'Search'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a label that does not match the icon.

Forgetting to put quotes around the label string.

The label for the second BottomNavigationBarItem should be 'Business' to match the icon.

2fill in blank

medium

Complete the code to set the current selected index in BottomNavigationBar.

Flutter

int _selectedIndex = 0;

BottomNavigationBar(
  currentIndex: [1],
  items: const <BottomNavigationBarItem>[
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.business), label: 'Business'),
  ],
)

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

A_selectedIndex

B0

C1

DselectedIndex

Attempts:

3 left

💡 Hint

Common Mistakes

Using a hardcoded number instead of the variable.

Using a variable name that is not defined.

The currentIndex property should be set to the variable _selectedIndex to reflect the selected tab.

3fill in blank

hard

Fix the error in the onTap callback to update the selected index state.

Flutter

int _selectedIndex = 0;

void _onItemTapped(int index) {
  setState(() {
    [1] = index;
  });
}

BottomNavigationBar(
  currentIndex: _selectedIndex,
  onTap: _onItemTapped,
  items: const <BottomNavigationBarItem>[
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.business), label: 'Business'),
  ],
)

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

Athis._selectedIndex

BselectedIndex

Cindex

D_selectedIndex

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable that is not declared.

Trying to assign to the parameter 'index' instead of the state variable.

Inside setState, assign the tapped index to the _selectedIndex variable to update the UI.

4fill in blank

hard

Fill both blanks to create a BottomNavigationBar with three items and handle taps.

Flutter

int _selectedIndex = 0;

void _onItemTapped(int index) {
  setState(() {
    [1] = index;
  });
}

BottomNavigationBar(
  currentIndex: [2],
  onTap: _onItemTapped,
  items: const <BottomNavigationBarItem>[
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.business), label: 'Business'),
    BottomNavigationBarItem(icon: Icon(Icons.school), label: 'School'),
  ],
)

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

A_selectedIndex

Bindex

DselectedIndex

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names for the two blanks.

Using the parameter 'index' in currentIndex.

Both blanks should be _selectedIndex to update and reflect the selected tab index.

5fill in blank

hard

Fill all three blanks to create a BottomNavigationBar with labels, icons, and handle selection.

Flutter

int _selectedIndex = 0;

void _onItemTapped(int index) {
  setState(() {
    [1] = index;
  });
}

BottomNavigationBar(
  currentIndex: [2],
  onTap: _onItemTapped,
  items: const <BottomNavigationBarItem>[
    BottomNavigationBarItem(icon: Icon([3]), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.business), label: 'Business'),
    BottomNavigationBarItem(icon: Icon(Icons.school), label: 'School'),
  ],
)

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

A_selectedIndex

CIcons.home

DIcons.school

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong icon for the first item.

Using different variables for state update and currentIndex.

Use _selectedIndex for both state update and currentIndex, and Icons.home for the first icon.