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
.
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. |