IconButton in Flutter - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the IconButton widget in Flutter?

The IconButton widget creates a clickable button that displays an icon. It is used to add interactive icons that respond to user taps.

beginner

Which property of IconButton defines the icon shown inside the button?

The icon property defines the icon widget displayed inside the IconButton. Usually, it is an Icon widget.

beginner

How do you handle a tap event on an IconButton?

You provide a function to the onPressed property. This function runs when the user taps the button.

intermediate

What happens if you set onPressed to null in an IconButton?

The button becomes disabled. It shows a faded icon and does not respond to taps.

intermediate

How can you change the size and color of the icon inside an IconButton?

You can set the iconSize property to change the icon size, and set the color property inside the Icon widget to change its color.

Which property must you provide to make an IconButton respond to taps?

A onTap

B onPressed

C icon

D child

The onPressed property is the callback function triggered when the button is tapped.

What type of widget is usually passed to the icon property of IconButton?

A Image

B Text

C Container

D Icon

The icon property typically takes an Icon widget to display a material design icon.

If onPressed is set to null, what is the behavior of the IconButton?

A Button is disabled and not clickable

B Button is enabled and clickable

C Button shows a loading spinner

D Button changes color on tap

Setting onPressed to null disables the button, making it unclickable and visually faded.

How do you increase the size of the icon inside an IconButton?

A Set <code>iconSize</code> property

B Wrap icon in a <code>SizedBox</code>

C Set <code>size</code> property on <code>IconButton</code>

D Use <code>fontSize</code> property

The iconSize property directly controls the size of the icon inside the IconButton.

Which widget would you use to create a tappable icon button in Flutter?

A TextButton

B FlatButton

C IconButton

D GestureDetector

IconButton is designed specifically for clickable icons.

Explain how to create an IconButton that prints a message when tapped.

Remember to use the <code>onPressed</code> property to handle taps.

Describe how to disable an IconButton and how it looks when disabled.

Think about what happens when <code>onPressed</code> is null.

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