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.