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:

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.

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.

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.

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.

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.

IconButton Constructor Parameters

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