IconButton in Flutter - Mini App: Build & Ship

Build: IconButton Demo

This screen shows an IconButton that changes a text message when pressed.

Target UI

---------------------
| IconButton Demo   |
|-------------------|
| [IconButton]      |
|                   |
| Message:          |
|                   |
|                   |
---------------------

Add an IconButton with a heart icon.

When the IconButton is pressed, update the text below to say 'You pressed the heart!'.

The initial text should say 'Press the icon'.

Use a Scaffold with an AppBar titled 'IconButton Demo'.

Center the IconButton and text vertically and horizontally.

Starter Code

Flutter

import 'package:flutter/material.dart';

class IconButtonDemo extends StatefulWidget {
  @override
  State<IconButtonDemo> createState() => _IconButtonDemoState();
}

class _IconButtonDemoState extends State<IconButtonDemo> {
  String message = 'Press the icon';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('IconButton Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // TODO: Add IconButton here
            // TODO: Add Text widget here to show message
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';

class IconButtonDemo extends StatefulWidget {
  @override
  State<IconButtonDemo> createState() => _IconButtonDemoState();
}

class _IconButtonDemoState extends State<IconButtonDemo> {
  String message = 'Press the icon';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('IconButton Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            IconButton(
              icon: Icon(Icons.favorite),
              color: Colors.red,
              iconSize: 48.0,
              onPressed: () {
                setState(() {
                  message = 'You pressed the heart!';
                });
              },
              tooltip: 'Favorite',
            ),
            SizedBox(height: 16),
            Text(
              message,
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

We use a StatefulWidget to keep track of the message text. The IconButton shows a heart icon in red color and a bigger size for visibility. When the user taps the IconButton, the onPressed callback runs, updating the message state to 'You pressed the heart!'. The Text widget below shows the current message. The UI is centered vertically and horizontally using Center and Column with mainAxisSize.min to keep content compact.

Final Result

Completed Screen

---------------------
| IconButton Demo   |
|-------------------|
|       ♥           |
|                   |
| You pressed the   |
| heart!            |
|                   |
---------------------

When the user taps the heart icon, the text below changes from 'Press the icon' to 'You pressed the heart!'.

Stretch Goal

Add a second IconButton with a star icon that resets the message to 'Press the icon' when pressed.

💡 Hint

Add another IconButton next to the heart icon inside a Row widget. Use setState to reset the message.

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