IconButton in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create an IconButton with a home icon.

Flutter

IconButton(icon: Icon(Icons.[1]), onPressed: () {})

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

Asettings

Bhome

Cstar

Dalarm

Attempts:

3 left

💡 Hint

Common Mistakes

Using an icon name that does not exist in the Icons class.

Forgetting to wrap the icon name inside Icon().

The Icons.home shows a home icon on the button.

2fill in blank

medium

Complete the code to add a tooltip to the IconButton.

Flutter

IconButton(icon: Icon(Icons.add), tooltip: [1], onPressed: () {})

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

Aicon

Bclick

C'Add item'

Dbutton

Attempts:

3 left

💡 Hint

Common Mistakes

Using a generic word like 'icon' that doesn't describe the action.

Leaving the tooltip empty or missing.

The tooltip property shows a helpful text when the user long-presses or hovers over the button.

3fill in blank

hard

Fix the error in the IconButton code by completing the onPressed callback.

Flutter

IconButton(icon: Icon(Icons.delete), onPressed: [1])

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

A() => print('Deleted')

Bnull

Cprint('Deleted')

DonPressed()

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a direct function call instead of a function.

Setting onPressed to null disables the button.

The onPressed property requires a function. Using () => print('Deleted') defines a function that runs when pressed.

4fill in blank

hard

Fill both blanks to create an IconButton with a blue color and a print action.

Flutter

IconButton(icon: Icon(Icons.send, color: [1]), onPressed: [2])

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

AColors.blue

B() => print('Sent')

CColors.red

D() => print('Clicked')

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong color constant.

Passing a print statement directly instead of a function.

Use Colors.blue to color the icon blue and an anonymous function () => print('Sent') for the onPressed action.

5fill in blank

hard

Fill all three blanks to create an IconButton with a green icon, a tooltip, and a print action.

Flutter

IconButton(icon: Icon(Icons.check, color: [1]), tooltip: [2], onPressed: [3])

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

AColors.green

B'Confirm'

C() => print('Confirmed')

DColors.orange

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong color or tooltip text.

Passing onPressed as a direct call instead of a function.

The icon color is set to green, the tooltip says 'Confirm', and the onPressed runs a function printing 'Confirmed'.