Icons represent many motifs and serve many purposes. Therefore, in flutter too, the icon button helps us to accomplish many tasks. Now it depends on what we need to accomplish with the icon button.
For an example, we can think of any IconButton that represents directions or locations. It can navigate to another page, or opens up a drawer.
Simply by touching the icon button, we can make the state change from off to on. Therefore, we can use that onPressed callback in our advantage.
As usual, the icon button is a material design widget. As a consequence we need to have MaterialApp widget as one of its ancestors. And, moreover, as a picture printed on a Material widget, an icon button reacts to touches by changing its color.
We use Icon buttons in the AppBar.actions field, but we can use it in many other places as well.
Any Icon button has an onPressed callback and to make it respond we should not make it null.
If we make the callback null, then the button will be disabled and will not react to touch.
Another important thing to remember, any icon button needs to be of minimum pixels in size, regardless of the actual iconSize. We need that to satisfy the touch target size requirements in the Material Design specification.
How do you change the color of the IconButton in flutter?
Before we want to dig deep into this question, let’s see two icon buttons in one ListView widget.
The first one is wrapped by an Ink widget to give it a background color.
Ink(
decoration: const ShapeDecoration(
color: Colors.redAccent,
shape: CircleBorder(),
),
child: IconButton(
icon: const Icon(
Icons.directions_transit,
),
tooltip: 'Good, bad and ugly',
iconSize: 50,
onPressed: () {},
),
),The second IconButton, although is not wrapped by any widget to add color, still can use its own various color parameters to display color, or even change its color.
Let’s see the code snippet of the second icon button.
IconButton(
icon: const Icon(Icons.h_mobiledata_outlined),
tooltip: 'Hover and change color to green!',
color: Colors.grey,
highlightColor: Colors.red,
hoverColor: Colors.green,
focusColor: Colors.purple,
splashColor: Colors.yellow,
disabledColor: Colors.amber,
iconSize: 48,
onPressed: () {
setState(() {
_isPressed = !_isPressed;
});
},
),Now, let’s see the first image.
According to the code that the second icon button follows, it has a hoverColor parameter that changes to green.
Let’s test and see whether it works or not.
As we can see, the color changes to green, and also it has a tooltip parameter, that displays on the screen.
Flutter allows us to give user’s a rich experience so that a mobile application looks good,
How do you add text to icon button on flutter?
To add text to icon button, we can take various steps. One of the most common steps that we use is tooltip parameter.
However, if we go through the full code snippet of the above two icon buttons, we can find one interesting parameter that each icon button possesses.
The onPressed parameter.
How this parameter comes to our help?
In many ways.
Let’s take a simple test.
Suppose we have a simple Boolean message that comes False by default.
Now through the onPressed parameter we can change its state and make it True. Even we can grab that change in one Text widget.
However, without going through the full code we cannot understand how we can achieve that feat.
import 'package:flutter/material.dart';
class IconExample extends StatelessWidget {
const IconExample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Iconbutton Example',
home: IconButtonExample(),
);
}
}
Color colorWhite = Colors.white;
class IconButtonExample extends StatefulWidget {
const IconButtonExample({Key? key}) : super(key: key);
@override
_IconButtonExampleState createState() => _IconButtonExampleState();
}
class _IconButtonExampleState extends State<IconButtonExample> {
bool _isPressed = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('IconButton Example'),
),
body: ListView(
children: <Widget>[
Ink(
decoration: const ShapeDecoration(
color: Colors.redAccent,
shape: CircleBorder(),
),
child: IconButton(
icon: const Icon(
Icons.directions_transit,
),
tooltip: 'Good, bad and ugly',
iconSize: 50,
onPressed: () {},
),
),
const SizedBox(
height: 20,
),
IconButton(
icon: const Icon(Icons.h_mobiledata_outlined),
tooltip: 'Hover and change color to green!',
color: Colors.grey,
highlightColor: Colors.red,
hoverColor: Colors.green,
focusColor: Colors.purple,
splashColor: Colors.yellow,
disabledColor: Colors.amber,
iconSize: 48,
onPressed: () {
setState(() {
_isPressed = !_isPressed;
});
},
),
const SizedBox(
height: 20,
),
Text(
'It is pressed : $_isPressed',
style: const TextStyle(
fontSize: 30,
),
),
],
),
);
}
}
// the full code snippetNow, we can take a look and feel that each icon buttons are parts of Material designs, moreover, both have MaterialApp as one of its ancestors.
Firstly, we can tap the second icon and it changes its color to red. It happens because of its highlightColor property.
Now, we’ve added the Boolean value and to change its state, we can use the Text widget.
As a result, before pressing the second button, the message is like the following image.
However it changes its state once we press the second icon button.
Accordingly, the message below also changes.
To sum up, we can conclude that, icon buttons in flutter are very handy tools. They serve various purposes.
In addition we can use them to change the state also.
Leave a Reply