Icon Button in Flutter

Create Free Backend With Appwrite

Introduction

IconButton is a type of button in Flutter that displays an icon instead of text. In this section, you will learn how to use the IconButton widget effectively, with real-world examples.

Example 1: Simple IconButton

In this example below, you will learn to create a simple IconButton with a default icon.

IconButton(
  onPressed: () {},
  icon: Icon(Icons.home),
)
Run Online

Example 2: IconButton with Custom Color

In this example below, you will learn to create an IconButton with a custom color for the icon.

IconButton(
  onPressed: () {},
  icon: Icon(Icons.send),
  color: Colors.purple,
)
Run Online

Example 3: IconButton with Size Customization

In this example below, you will learn to create an IconButton with a custom size for the icon.

IconButton(
  onPressed: () {},
  icon: Icon(Icons.alarm),
  iconSize: 30,
)
Run Online

Example 4: IconButton with Tooltip

In this example below, you will learn to create an IconButton with tooltip. Tooltip provide additional information on hover or long press.

IconButton(
  onPressed: () {},
  icon: Icon(Icons.info),
  tooltip: 'More Info',
)
Run Online

Example 5: Disabled IconButton

In this example below, you will learn to create a disabled button using the IconButton widget.

IconButton(
  icon: Icon(Icons.block),
  onPressed: null,
)
Run Online

Challenge

Create an IconButton that changes the color of the icon when pressed.