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'.

Practice

1. What does the IconButton widget primarily display in a Flutter app?

easy

A. A text label with a button

B. An icon that acts as a button

C. A container with an image

D. A button with a background color

Solution

1. Step 1: Understand IconButton purpose

   The IconButton widget is designed to show an icon that users can tap like a button.

2. Step 2: Compare with other widgets

   Unlike TextButton or ElevatedButton, IconButton shows an icon, not text or colored background.

3. Final Answer:

   An icon that acts as a button -> Option B

4. Quick Check:

   IconButton shows icon = A [OK]

Hint: IconButton always shows an icon, not text [OK]

Common Mistakes:

• Thinking IconButton shows text
• Confusing IconButton with ElevatedButton
• Assuming IconButton has a background color

2. Which of the following is the correct way to create an IconButton with a tap action that prints 'Clicked'?

easy

A. IconButton(icon: Icon(Icons.add), onPressed: () { print('Clicked'); })

B. IconButton(icon: Icon(Icons.add), onTap: () { print('Clicked'); })

C. IconButton(icon: Icon(Icons.add), onClick: () => print('Clicked'))

D. IconButton(icon: Icon(Icons.add), onPressed: print('Clicked'))

Solution

1. Step 1: Identify correct callback property

   The IconButton uses onPressed for tap actions, not onTap or onClick.

2. Step 2: Check syntax for callback function

   The callback must be a function, so () { print('Clicked'); } is correct. Passing print('Clicked') directly calls it immediately, which is wrong.

3. Final Answer:

   IconButton(icon: Icon(Icons.add), onPressed: () { print('Clicked'); }) -> Option A

4. Quick Check:

   Use onPressed with a function callback [OK]

Hint: Use onPressed with a function, not onTap or onClick [OK]

Common Mistakes:

• Using onTap or onClick instead of onPressed
• Calling print directly instead of wrapping in a function
• Missing parentheses for Icon constructor

3. What will happen when the following IconButton is tapped?

IconButton(
  icon: Icon(Icons.volume_up),
  onPressed: null,
)

medium

A. The button is disabled and does not respond to taps

B. The button prints 'volume_up' to the console

C. The button shows a tooltip on tap

D. The button triggers an error

Solution

1. Step 1: Understand onPressed null behavior

   Setting onPressed to null disables the IconButton, making it unclickable.

2. Step 2: Check for other effects

   No print or tooltip is defined, so no output or tooltip appears. No error occurs because null disables the button safely.

3. Final Answer:

   The button is disabled and does not respond to taps -> Option A

4. Quick Check:

   onPressed null disables button [OK]

Hint: onPressed null disables IconButton tap [OK]

Common Mistakes:

• Expecting onPressed null to print or show tooltip
• Thinking button triggers error when disabled
• Confusing onPressed null with empty function

4. Identify the error in this IconButton code:

IconButton(
  icon: Icon(Icons.search),
  onPressed: print('Search pressed'),
)

medium

A. Icon constructor is missing parentheses

B. Icons.search is not a valid icon

C. onPressed should be a function, not a function call

D. IconButton requires a tooltip property

Solution

1. Step 1: Analyze onPressed assignment

   The code calls print('Search pressed') immediately and assigns its result (void) to onPressed, which is wrong.

2. Step 2: Correct onPressed usage

   onPressed must be a function, so it should be () { print('Search pressed'); } or () => print('Search pressed').

3. Final Answer:

   onPressed should be a function, not a function call -> Option C

4. Quick Check:

   onPressed needs a function, not direct call [OK]

Hint: Wrap print in a function for onPressed [OK]

Common Mistakes:

• Calling print directly instead of wrapping in a function
• Forgetting parentheses on Icon constructor
• Thinking tooltip is mandatory

5. You want to create an IconButton that shows a tooltip 'Add item' and prints 'Added' when tapped. Which code snippet correctly does this?

hard

A. IconButton(icon: Icon(Icons.add), label: 'Add item', onPressed: print('Added'))

B. IconButton(icon: Icon(Icons.add), hint: 'Add item', onPressed: () { print('Added'); })

C. IconButton(icon: Icon(Icons.add), tooltip: 'Add item', onTap: () => print('Added'))

D. IconButton(icon: Icon(Icons.add), tooltip: 'Add item', onPressed: () => print('Added'))

Solution

1. Step 1: Use correct tooltip property

   The property to show a tooltip on IconButton is tooltip, not hint or label.

2. Step 2: Use correct tap callback

   The tap callback must be assigned to onPressed as a function, not onTap or a direct call.

3. Step 3: Verify syntax correctness

   IconButton(icon: Icon(Icons.add), tooltip: 'Add item', onPressed: () => print('Added')) uses tooltip and onPressed with a function, so it is correct.

4. Final Answer:

   IconButton(icon: Icon(Icons.add), tooltip: 'Add item', onPressed: () => print('Added')) -> Option D

5. Quick Check:

   tooltip + onPressed function = A [OK]

Hint: Use tooltip for hint and onPressed for tap [OK]

Common Mistakes:

• Using hint or label instead of tooltip
• Using onTap instead of onPressed
• Calling print directly instead of wrapping in function