Flutter Icon Button
Flutter Icon Button

Flutter Icon Button : The Complete Implementation

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

Flutter Icon Button
Flutter Icon Button

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

Aligning icon button to the top right of the container
Aligning icon button to the top right of the container

In the same way, you can use the alignment to position the icon. Some of them are.

  1. Alignment.center
  2. Alignment.centerLeft
  3. Alignment.centerRight
  4. Alignment.bottomCenter
  5. Alignment.bottomLeft
  6. Alignment.bottomRight
  7. Alignment.topCenter
  8. Alignment.topLeft
  9. 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)

Changing the color of the icon button
Changing the color of the icon button

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

Change the color of the iconbutton when onpressed is not used
Change the color of the iconbutton when onpressed is not used

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

Adding the icon for the Icon Button
Adding the icon for the Icon Button

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

Increasing the size of the icon
Increasing the size of the icon

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

Changing the color of the icon when onpressed is clicked
Changing the color of the icon when onpressed is clicked

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.

Code The Best
Hi, I am CodeTheBest. Here you will learn the best coding tutorials on the latest technologies like a flutter, react js, python, Julia, and many more in a single place.