IconButton in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

IconButton Tap Behavior

What will happen when the user taps this IconButton in a Flutter app?

Flutter

IconButton(
  icon: Icon(Icons.favorite),
  onPressed: () {
    print('Icon tapped');
  },
)

A The icon changes color automatically when tapped.

B The app crashes because IconButton requires a child widget.

C Nothing happens because onPressed is not set.

D The message 'Icon tapped' is printed in the console each time the icon is tapped.

💡 Hint

Check what the onPressed callback does.

The onPressed callback runs when the IconButton is tapped. Here, it prints a message to the console.

📝 Syntax

intermediate

Correct IconButton Syntax

Which option shows the correct way to create an IconButton with a tooltip and a disabled state?

A IconButton(icon: Icon(Icons.add), tooltip: 'Add', onPressed: null)

B IconButton(icon: Icon(Icons.add), tooltip: 'Add', onPressed: () => null)

C IconButton(icon: Icon(Icons.add), tooltip: 'Add', onPressed: {})

D IconButton(icon: Icon(Icons.add), tooltip: 'Add')

💡 Hint

To disable an IconButton, onPressed must be null.

Setting onPressed to null disables the IconButton. The tooltip shows on long press or hover.

❓ lifecycle

advanced

IconButton State and Rebuilds

If an IconButton's icon color depends on a boolean state variable 'isActive', which code snippet correctly updates the icon color when 'isActive' changes?

A IconButton(icon: Icon(Icons.star, color: isActive ? Colors.yellow : Colors.grey), onPressed: () { setState(() { isActive = !isActive; }); })

B IconButton(icon: Icon(Icons.star, color: Colors.yellow), onPressed: () { isActive = !isActive; })

C IconButton(icon: Icon(Icons.star), onPressed: () { setState(() { isActive = !isActive; }); })

D IconButton(icon: Icon(Icons.star, color: isActive ? Colors.yellow : Colors.grey), onPressed: () { isActive = !isActive; })

💡 Hint

Remember to call setState to update UI in StatefulWidget.

Only option A calls setState to update the UI when isActive changes, so the icon color updates correctly.

❓ navigation

advanced

IconButton Triggering Navigation

Which IconButton code correctly navigates to a new screen named 'DetailsScreen' when tapped?

A IconButton(icon: Icon(Icons.navigate_next), onPressed: () { Navigator.pushNamed(context, 'DetailsScreen'); })

B IconButton(icon: Icon(Icons.navigate_next), onPressed: () { Navigator.pop(context); })

C IconButton(icon: Icon(Icons.navigate_next), onPressed: () { Navigator.push(context, MaterialPageRoute(builder: (context) => DetailsScreen())); })

D IconButton(icon: Icon(Icons.navigate_next), onPressed: () { Navigator.push(context, DetailsScreen()); })

💡 Hint

Navigator.push requires a BuildContext and a MaterialPageRoute.

Option C correctly uses Navigator.push with a MaterialPageRoute to navigate to DetailsScreen.

🔧 Debug

expert

Why Does This IconButton Not Respond?

Given this IconButton code, why does tapping the icon not trigger any action?

Flutter

IconButton(
  icon: Icon(Icons.send),
  onPressed: null,
  splashColor: Colors.red,
  disabledColor: Colors.grey,
  color: Colors.blue,
  onLongPress: null,
  tooltip: 'Send message',
  enableFeedback: false,
  mouseCursor: SystemMouseCursors.click,
  autofocus: false,
  focusNode: null,
)

A Because onPressed is an empty function, so no action occurs.

B Because the 'onPressed' property is set to null, disabling the button.

C Because splashColor is set, it blocks the tap event.

D Because onLongPress is null, the button is disabled.

💡 Hint

Check if the button is enabled or disabled by properties.

The onPressed property set to null disables the IconButton, so taps do nothing.

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