IconButton in Flutter - UI Render Trace

Component - IconButton

The IconButton widget in Flutter is a button that shows an icon instead of text. It reacts to taps by calling a function you provide, making it useful for toolbar buttons or any clickable icon.

Widget Tree

Scaffold
├─ AppBar
│  └─ IconButton
└─ Center
   └─ Text

The Scaffold provides the basic app layout. Inside the AppBar, there is an IconButton on the left. The main body centers a Text widget. This layout shows an icon button in the top bar and text in the center.

Render Trace - 4 Steps

Step 1: Scaffold

Step 2: AppBar

Step 3: IconButton

Step 4: Center

State Change - Re-render

Trigger:User taps the IconButton

Before

IconButton is visible and waiting for tap

→

After

Callback function runs (e.g., prints message or opens menu)

Re-renders:The IconButton widget and any widgets affected by the callback (if state changes)

UI Quiz - 3 Questions

What does the IconButton widget display?

A An icon that can be tapped

B A text label

C A colored box

D An image from the gallery

Key Insight

IconButton is a simple way to add tappable icons in your app. It fits well in toolbars and menus. Remember to provide a clear onPressed callback and consider accessibility by adding tooltips or semantic labels.

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