IconButton class

A material design icon button.

An icon button is a picture printed on a Material widget that reacts to touches by filling with color (ink).

Icon buttons are commonly used in the AppBar.actions field, but they can be used in many other places as well.

If the onPressed callback is null, then the button will be disabled and will not react to touch.

Requires one of its ancestors to be a Material widget.

The hit region of an icon button will, if possible, be at least kMinInteractiveDimension pixels in size, regardless of the actual iconSize, to satisfy the touch target size requirements in the Material Design specification. The alignment controls how the icon itself is positioned within the hit region.

This sample shows an IconButton that uses the Material icon "volume_up" to increase the volume.

double _volume = 0.0;

// ...

Widget build(BuildContext context) {
  return Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      IconButton(
        icon: Icon(Icons.volume_up),
        tooltip: 'Increase volume by 10',
        onPressed: () {
          setState(() {
            _volume += 10;
          });
        },
      ),
      Text('Volume : $_volume')
    ],
  );
}

To create a sample project with this code snippet, run:
flutter create --sample=material.IconButton.1 mysample

// Flutter code sample for IconButton

// This sample shows an `IconButton` that uses the Material icon "volume_up" to
// increase the volume.
//
// ![](https://flutter.github.io/assets-for-api-docs/assets/material/icon_button.png)

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

double _volume = 0.0;

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        IconButton(
          icon: Icon(Icons.volume_up),
          tooltip: 'Increase volume by 10',
          onPressed: () {
            setState(() {
              _volume += 10;
            });
          },
        ),
        Text('Volume : $_volume')
      ],
    );
  }
}

Adding a filled background

Icon buttons don't support specifying a background color or other background decoration because typically the icon is just displayed on top of the parent widget's background. Icon buttons that appear in AppBar.actions are an example of this.

It's easy enough to create an icon button with a filled background using the Ink widget. The Ink widget renders a decoration on the underlying Material along with the splash and highlight InkResponse contributed by descendant widgets.

In this sample the icon button's background color is defined with an Ink widget whose child is an IconButton. The icon button's filled background is a light shade of blue, it's a filled circle, and it's as big as the button is.

Widget build(BuildContext context) {
  return Material(
    color: Colors.white,
    child: Center(
      child: Ink(
        decoration: const ShapeDecoration(
          color: Colors.lightBlue,
          shape: CircleBorder(),
        ),
        child: IconButton(
          icon: Icon(Icons.android),
          color: Colors.white,
          onPressed: () {},
        ),
      ),
    ),
  );
}

To create a sample project with this code snippet, run:
flutter create --sample=material.IconButton.2 mysample

// Flutter code sample for IconButton

// In this sample the icon button's background color is defined with an [Ink]
// widget whose child is an [IconButton]. The icon button's filled background
// is a light shade of blue, it's a filled circle, and it's as big as the
// button is.
//
// ![](https://flutter.github.io/assets-for-api-docs/assets/material/icon_button_background.png)

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: MyStatelessWidget(),
      ),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.white,
      child: Center(
        child: Ink(
          decoration: const ShapeDecoration(
            color: Colors.lightBlue,
            shape: CircleBorder(),
          ),
          child: IconButton(
            icon: Icon(Icons.android),
            color: Colors.white,
            onPressed: () {},
          ),
        ),
      ),
    );
  }
}

Constructors

IconButton({Key key, double iconSize: 24.0, EdgeInsetsGeometry padding: const EdgeInsets.all(8.0), AlignmentGeometry alignment: Alignment.center, @required Widget icon, Color color, Color focusColor, Color hoverColor, Color highlightColor, Color splashColor, Color disabledColor, @required VoidCallback onPressed, FocusNode focusNode, bool autofocus: false String tooltip, bool enableFeedback: true }): Creates an icon button. [...]
const

Properties

alignment → AlignmentGeometry: Defines how the icon is positioned within the IconButton. [...]
final
autofocus → bool: True if this widget will be selected as the initial focus when no other node in its scope is currently focused. [...]
final
color → Color: The color to use for the icon inside the button, if the icon is enabled. Defaults to leaving this up to the icon widget. [...]
final
disabledColor → Color: The color to use for the icon inside the button, if the icon is disabled. Defaults to the ThemeData.disabledColor of the current Theme. [...]
final
enableFeedback → bool: Whether detected gestures should provide acoustic and/or haptic feedback. [...]
final
focusColor → Color: The color for the button's icon when it has the input focus. [...]
final
focusNode → FocusNode: An optional focus node to use as the focus node for this widget. [...]
final
highlightColor → Color: The secondary color of the button when the button is in the down (pressed) state. The highlight color is represented as a solid color that is overlaid over the button color (if any). If the highlight color has transparency, the button color will show through. The highlight fades in quickly as the button is held down. [...]
final
hoverColor → Color: The color for the button's icon when a pointer is hovering over it. [...]
final
icon → Widget: The icon to display inside the button. [...]
final
iconSize → double: The size of the icon inside the button. [...]
final
onPressed → VoidCallback: The callback that is called when the button is tapped or otherwise activated. [...]
final
padding → EdgeInsetsGeometry: The padding around the button's icon. The entire padded icon will react to input gestures. [...]
final
splashColor → Color: The primary color of the button when the button is in the down (pressed) state. The splash is represented as a circular overlay that appears above the highlightColor overlay. The splash overlay has a center point that matches the hit point of the user touch event. The splash overlay will expand to fill the button area if the touch is held for long enough time. If the splash color has transparency then the highlight and button color will show through. [...]
final
tooltip → String: Text that describes the action that will occur when the button is pressed. [...]
final
hashCode → int: The hash code for this object. [...]
read-only, inherited
key → Key: Controls how one widget replaces another widget in the tree. [...]
final, inherited
runtimeType → Type: A representation of the runtime type of the object.
read-only, inherited

Methods

build(BuildContext context) → Widget: Describes the part of the user interface represented by this widget. [...]
override
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node. [...]
override
createElement() → StatelessElement: Creates a StatelessElement to manage this widget's location in the tree. [...]
inherited
debugDescribeChildren() → List<DiagnosticsNode>: Returns a list of DiagnosticsNode objects describing this node's children. [...]
@protected, inherited
noSuchMethod(Invocation invocation) → dynamic: Invoked when a non-existent method or property is accessed. [...]
inherited
toDiagnosticsNode({String name, DiagnosticsTreeStyle style }) → DiagnosticsNode: Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep. [...]
inherited
toString({DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String: Returns a string representation of this object.
inherited
toStringDeep({String prefixLineOne: '', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String: Returns a string representation of this node and its descendants. [...]
inherited
toStringShallow({String joiner: ', ', DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String: Returns a one-line detailed description of the object. [...]
inherited
toStringShort() → String: A short, textual description of this widget.
inherited

Operators

operator ==(dynamic other) → bool: The equality operator. [...]
inherited