Flutter has provide a material icon button that allows you to do some operation when you will press the icon button. In this entire tutorial you will know how to implement flutter icon button with various examples.
How to create a Flutter Icon Button
You can create a flutter icon button using the IconButton() class. And the manipulation is done by the various arguments passed inside the IconButton() constructor. You will know most of them to create your beautiful icon button.
Let’s create an Icon Button.
Center(
child: Container(
height: 100,
width: 100,
color: Colors.red,
child: IconButton(
icon: Icon(Icons.home),
onPressed: () {
print("Icon Button clicked");
},
),
),
),Here inside the IconButton() I have used icon attributes for Icon and onPressed attribute to give functionality to the icon button.
Output
How to Manipulate Icon Button
In this section, you will know how to manipulate the Icon button through various attributes inside the IconButton() constructor. Let’s know each of them.
1. alignment
Using alignment you can position the icon left,right ,top ,topleft e.t.c. For example, I want to place the icon to the top right corner of the container then I will use alignmen.topRight.
Center(
child: Container(
height: 100,
width: 100,
color: Colors.red,
child: IconButton(
icon: Icon(Icons.home),
alignment: Alignment.topRight,
onPressed: () {
print("Icon Button clicked");
},
),
),
),Output
In the same way, you can use the alignment to position the icon. Some of them are.
- Alignment.center
- Alignment.centerLeft
- Alignment.centerRight
- Alignment.bottomCenter
- Alignment.bottomLeft
- Alignment.bottomRight
- Alignment.topCenter
- Alignment.topLeft
- Alignment.topRight
2. color
It’s obvious that you can change the colour of the icon button using the color argument. There is no need for more explanation on it.
color: Colors.your_color or color:Color(your_color_code)
3. constraints
It allows you to define the maximum and minimum width and height of the icon button should be. Constraints uses BoxConstraints() for that. It is useful when you are using it as a child of the expandable widget.
4. disabledColor
Suppose when you are not implementation any onPressed() method on the icon button then you can use it. It allows you to change the color of the iconbutton while there is no implementation if you click on the button or the onPressed() is null.
Center(
child: Container(
color: Colors.red,
child: IconButton(
icon: Icon(Icons.home),
alignment: Alignment.center,
autofocus: true,
disabledColor: Colors.black,
onPressed: null,
//constraints: BoxConstraints(maxHeight: 100, maxWidth: 100),
// onPressed: () {
// print("Icon Button clicked");
// },
),
),
),Output
You can see I have used the black color until the onPressed is null.
5. enableFeedback
This thing is very interesting. The enableFeedback can be set True or False. When you will set it to true then you will produce a clicking sound when you tap the button on android. And short vibration if you long press the icon button.
6. focusColor
It allows you to change the color of the icon button when you will focus on it.
7. highlightColor
If you long-press the button then the color of the button will be shown according to the highlight color. The default is grey.
8. hoverColor
Suppose you want to change the color of the button when you hover or touch over the button. This property allows you to do so. You can do so by using the hoverColor: your_color property.
9. icon
Obvious it allows you to add any icons from the material icons. Just pass an icon inside the Icon() constructor. In our example, let’s add a favourite icon to the button. Use the following line of code.
Center(
child: Container(
color: Colors.red,
child: IconButton(
icon: Icon(Icons.favorite),
color: Colors.white,
constraints: BoxConstraints(maxHeight: 100, maxWidth: 100),
onPressed: () {
print("Icon Button clicked");
},
enableFeedback: true,
hoverColor: Colors.red,
),
),
),Output
10. iconSize
If you want to change the size of the icon then use it. It accepts double values to increase or decrease the size of the icon button. For example, I want to increase the icon size to 50 then I will add the following line of code.
iconSize: 50,Output
11. onPressed
Using it you can tell the icon button to do some specific task you want. For example, I want to change the color of the icon in the button. To do so I will call setState method inside the onPressed. You can do anything like navigation from one-page e.t.c.
Run the following lines of code.
import 'package:flutter/material.dart';
class FlutterIconButton extends StatefulWidget {
const FlutterIconButton({Key? key}) : super(key: key);
@override
_FlutterIconButtonState createState() => _FlutterIconButtonState();
}
class _FlutterIconButtonState extends State {
Color color = Colors.white;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("Icon Button Tutorial")),
body: Center(
child: Container(
color: Colors.red,
child: IconButton(
icon: Icon(Icons.favorite),
color: color,
constraints: BoxConstraints(maxHeight: 100, maxWidth: 100),
onPressed: () {
setState(() {
color = Colors.black;
});
},
enableFeedback: true,
hoverColor: Colors.red,
iconSize: 50,
),
),
),
),
);
}
}
void main() {
runApp(FlutterIconButton());
}Output
12. padding
It allows you to add the padding around the button’s icon. The entire padded icon will react to input gestures.
Conclusion
Flutter IconButton is widely used by developers to add functionalities to the flutter app. I have listed out all the general manipulation you can do by the IconButton() construction. You will definitely use Icon Button in your project. I hope this entire tutorial has helped you to achieve what you want. If you have any queries then you can contact us for more help.
