IconButton in Flutter

Introduction

An IconButton lets users tap on an icon to do something. It's like a button but shows a picture instead of text.

When you want a small clickable icon in your app, like a trash can to delete something.

To add a button with a symbol in a toolbar or app bar.

When you want a simple button that only shows an image, not words.

To make your app easier to use with clear, familiar icons.

When you want to save space but still have a clickable action.

Syntax

Flutter

IconButton(
  icon: Icon(Icons.example_icon),
  onPressed: () {
    // action to do when tapped
  },
  tooltip: 'Description',
  color: Colors.colorName,
  iconSize: 24.0,
)

The icon property is required and shows the icon image.

The onPressed property is a function that runs when the button is tapped. If it is null, the button is disabled.

Examples

A simple heart icon button that prints a message when tapped.

Flutter

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

A red delete icon button with a tooltip and bigger size.

Flutter

IconButton(
  icon: Icon(Icons.delete),
  color: Colors.red,
  iconSize: 30.0,
  onPressed: () {
    print('Delete tapped');
  },
  tooltip: 'Delete item',
)

Sample App

This app shows a blue thumb-up icon button in the center. When you tap it, it prints a message in the debug console.

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('IconButton Example')),
        body: Center(
          child: IconButton(
            icon: const Icon(Icons.thumb_up),
            color: Colors.blue,
            iconSize: 40.0,
            tooltip: 'Like',
            onPressed: () {
              debugPrint('Thumb up pressed');
            },
          ),
        ),
      ),
    );
  }
}

Important Notes

Always provide a tooltip for accessibility so screen readers can describe the button.

If onPressed is null, the button looks disabled and cannot be tapped.

You can customize the icon size and color to fit your app's style.

Summary

IconButton is a button that shows an icon instead of text.

Use icon to set the icon and onPressed for the tap action.

Adding a tooltip helps users understand the button's purpose.

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