Flutter - Using IconButton Examples

This tutorial shows you how to use IconButton in Flutter.

In Flutter IconButton is a widget that prints a picture (icon) on top of Material widget. As a button, you can define a function that will be executed when the button is pressed. It's also possible to customize the look and touch effects for the button.

For this tutoial, we are going to create a simple button for toggling Bluetooth, starting from the most basic usage, then add some customizations.

IconButton is available to use by importing 'package:flutter/material.dart'. Most likely, you've already imported that library. To create an IconButton, just call the constructor. There are two required parameters: icon and onPressed. icon is the icon to be displayed, it must be a Widget, usually an Icon. onPressed is a callback function called when the button is tapped.

First, start with the most basic example which only uses those two required parameters.

  import 'package:flutter/material.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatefulWidget {
    @override
    _MyAppState createState() => _MyAppState();
  }
  
  class _MyAppState extends State<MyApp> {
    bool _isBluetoothOn = false;
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Welcome to Flutter',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter IconButon Tutorial by Woolha.com'),
          ),
          body: Center(
            child: IconButton(
              icon: Icon(Icons.bluetooth),
              onPressed: () {
                setState(() {
                 _isBluetoothOn = !_isBluetoothOn;
                });
              },
            ),
          ),
        ),
      );
    }
  }

Below is the icon from the above code:

Flutter - Icon Button - Basic

Adjusting Icon Size

With the above code, the icon looks very small. To set te icon size, pass iconSize parameter. The default value, if you don't pass it, is 24.0.

  IconButton(
    icon: Icon(Icons.bluetooth),
    iconSize: 48,
    onPressed: () {
      setState(() {
        _isBluetoothOn = !_isBluetoothOn;
      });
    },
  ),

Here's the result where the icon looks bigger.

Flutter - Icon Button - Size

Changing Colors

The icon color can be changed using color parameter. You can also set the colors when the button is pressed, disabled, etc., read construtctor parameters section.

  IconButton(
    icon: Icon(Icons.bluetooth),
    color: Colors.grey,
    highlightColor: Colors.red,
    hoverColor: Colors.green,
    focusColor: Colors.purple,
    splashColor: Colors.yellow,
    disabledColor: Colors.amber,
    iconSize: 48,
    onPressed: () {
      setState(() {
        _isBluetoothOn = !_isBluetoothOn;
      });
    },
  ),

When you press the button, it should look like this.

Flutter - Icon Button - Color

You can't set the background color as it's designed to be displayed on top of the background of its parent widget. To overcome that limitation, you can use Ink widget as the parent of the IconButton.

  child: Ink(
    decoration: const ShapeDecoration(
      color: Colors.blue,
      shape: CircleBorder(),
    ),
    child: IconButton(
      icon: Icon(Icons.bluetooth),
      iconSize: 48,
      color: Colors.white,
      onPressed: () {
        setState(() {
          _isBluetoothOn = !_isBluetoothOn;
        });
      },
    ),

The code above generates the following output.

Flutter - Icon Button - Ink

Adding Text

If you need to add hint about the icon, you can pass tooltip parameter which will be shown when the user long presses the button.

  IconButton(
    icon: Icon(Icons.bluetooth),
    iconSize: 48,
    tooltip: 'Toggle Bluetooth',
    onPressed: () {
      setState(() {
        _isBluetoothOn = !_isBluetoothOn;
      });
    },
  ),

Here's the result when the button is being long pressed.

Flutter - Icon Button - Tooltip

If necessary, you can also place the text outside the IconButton.

  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      IconButton(
        icon: Icon(Icons.bluetooth),
        color: Colors.grey,
        iconSize: 48,
        tooltip: 'Toggle Bluetooth',
        onPressed: () {
          setState(() {
            _isBluetoothOn = !_isBluetoothOn;
          });
        },
      ),
      Text('Is Bluetooth On : $_isBluetoothOn')
    ],
  )

Below is the output.

Flutter - Icon Button - Text

IconButton Constructor Parameters

Below is the list of parameters you can use for customizing IconButton.

Name Type Description
key Key The widget key, used to control if it's should be replaced.
iconSize double The size of the icon.
visualDensity BisualDensity How compact is the icon button layout.
padding EdgeInsetsGeometry Padding around the icon.
alignment AlignmentGeometry How the icon is positioned withint the button. Defaults to Alignment.center.
icon Widget The icon the be displayed (required).
color Color Color for the icon.
focusColor Color The color for the button's icon when it has the input focus.
hoverColor Color The color for the button's icon when a pointer is hovering over it..
splashColor Color Primary color of the button when pressed, represented as a circular overlay that appears above the highlightColor overlay.
highlightColor Color Secondary color of the button when pressed, represented as a solid color that is overlaid over the button color.
disabledColor Color The icon color if it's disabled (if onPressed is null).
onPressed VoidCallback The callback that is called when the button is tapped.
focusNode FocusNode -
bool autofocus -
tooltip String Text that describes the button.
enableFeedback bool Whether detected gestures should provide acoustic and/or haptic feedback.