×
×

Spread the love

In flutter, IconButton acts just like FlatButton or RaisedButton but with an icon instead of a regular button. In this example tutorial, we will learn how to use an IconButton widget in flutter and its properties in detail.

Flutter IconButton

Iconbutton in flutter is nothing but an icon that acts as a button and reacts to touch by the user. Generally, we will use icon buttons in app bar as actions. We can also use them in places where they are well suited. For example, the favorite and bookmark icons in many applications are nothing but icon buttons. The IconButton has onPressed callback to handle the touch by the user. If we set this property to null the icon button will be disabled.

Also read: Flutter FloatingActionButton Example

Flutter IconButton Example

IconButton(
            icon: Icon(Icons.play_arrow),
            onPressed: () {

            },
          ),

Output:

flutter iconbutton

How To Create An IconButton In flutter ?

We can create an iconbutton in flutter by calling its constructor. Just provide the constructor with the required properties. The icon button has two required properties icon and onPressed callback. The icon will be Icon widget and onPressed callback will handle the touch interaction.

Flutter IconButton Constructor:

IconButton(
{Key key, 
double iconSize: 24.0, 
VisualDensity visualDensity, 
EdgeInsetsGeometry padding: const EdgeInsets.all(8.0), AlignmentGeometry alignment: Alignment.center, 
double splashRadius, 
@required Widget icon, 
Color color, 
Color focusColor, 
Color hoverColor, 
Color highlightColor, 
Color splashColor, 
Color disabledColor, 
@required VoidCallback onPressed, 
MouseCursor mouseCursor: SystemMouseCursors.click, 
FocusNode focusNode, 
bool autofocus: false, 
String tooltip, 
bool enableFeedback: true, 
BoxConstraints constraints
}
) 

Flutter IconButton Properties

We can style the IconButton widget by changing color, splashColor, etc. Let’s see the properties that help us to style the IconButton.

  • iconSize
  • color
  • splashColor
  • splashRadius
  • highlightColor
  • disabledColor
  • tooltip

IconButton iconSize

We will use iconSize property to define the size of the icon inside the button.

Container(
          padding: EdgeInsets.all(20),
          alignment: Alignment.center,
          height: 50,
          child:IconButton(
              icon: Icon(Icons.play_arrow),
              iconSize: 50,
              onPressed: () {

              },
          ),
        )

Output:

flutter iconbutton size

IconButton color

We will use this Property when we want to change the color of the IconButton. If we use color property in child widget then it will override the color property of IconButton.

Note: Color applied to individual widgets/elements will override the color property of IconButton.

Let’s see the output by defining color to IconButton but not the child(Icon).

Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  height: 50,
                ),
                IconButton(
                  icon: Icon(Icons.play_arrow),
                  color: Colors.green,
                  iconSize: 50,
                  onPressed: () {

                  },
                )
              ]
        ),

Output:

flutter iconbutton color

Now let’s see what will happen if we apply color to the child widget. In this case, the child is an icon widget.

Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  height: 50,
                ),
                IconButton(
                  icon: Icon(
                    Icons.play_arrow, 
                    color: Colors.deepOrange,
                  ),
                  color: Colors.green,
                  iconSize: 50,                
                  onPressed: () {

                  },
                )
              ]
        ),

Output:

flutter iconbutton child color

IconButton splashColor

We will use splashColor property to apply color which appears when we tap the IconButton. When the user taps the IconButton the splashColor starts filling the button slowly. It fades out when the user releases the button.

Note: To see the effects of splashColor, splashRadius, etc, we should wrap the IconButton inside a material widget. I’m using the column widget in the examples.

Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  height: 50,
                ),
                IconButton(
                  icon: Icon(Icons.play_arrow),
                  color: Colors.green,
                  iconSize: 50,
                  splashRadius: 40,
                  splashColor: Colors.deepOrange,               
                  onPressed: () {

                  },
                )
              ]
        ),

Output:

flutter iconbutton splash color

IconButton splashRadius

We will use splashRadius property to define what extent the splashColor should fill.

Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  height: 50,
                ),
                IconButton(
                  icon: Icon(Icons.play_arrow),
                  color: Colors.green,
                  iconSize: 50,
                  splashRadius: 40,
                  splashColor: Colors.deepOrange,               
                  onPressed: () {

                  },
                )
              ]
        ),

Output:

flutter iconbutton splash radius

IconButton highlightColor

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

Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  height: 50,
                ),
                IconButton(
                  icon: Icon(Icons.play_arrow),
                  color: Colors.green,
                  iconSize: 50,
                  splashRadius: 40,
                  highlightColor: Colors.deepOrange,
                  onPressed: () {

                  },
                )
              ]
        ),

IconButton disabledColor

We will use disabledColor property to define the color to be displayed when the button is disabled. I’m disabling the button by setting onPressed to null.

Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  height: 50,
                ),
                IconButton(
                  icon: Icon(Icons.play_arrow),
                  color: Colors.green,
                  iconSize: 50,
                  splashRadius: 40,
                  disabledColor: Colors.grey,
                  onPressed: null,
                )
              ]
        ),

Output:

flutter iconbutton disabled color

IconButton tooltip

We will use this property to display a text that describes the action that will occur when the button is pressed.

Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  height: 50,
                ),
                IconButton(
                  icon: Icon(Icons.play_arrow),
                  color: Colors.green,
                  iconSize: 50,
                  splashRadius: 40,
                  disabledColor: Colors.grey,
                  onPressed: () {},
                  tooltip: "Play",
                )
              ]
        ),

Output:

flutter iconbutton tooltip

Applying BackgroundColor to Flutter IconButton

There is no property to apply background color to IconButton. We can do it by wrapping the IconButton inside the Ink widget and applying decoration to the Ink widget.

Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  height: 50,
                ),
                Ink(
                    child:IconButton(
                      icon: Icon(Icons.play_arrow),
                      color: Colors.white,
                      iconSize: 50,
                      splashRadius: 40,
                      disabledColor: Colors.grey,
                      onPressed: () {},
                      tooltip: "Play",
                    ),
                  decoration: ShapeDecoration(
                    color: Colors.grey,
                    shape: CircleBorder()
                  ),
                )
              ]
        ),

Output:

flutter iconbutton background using ink

To change the background shape to a rectangle just replace the CircleBorder() in the above code snippet with RoundedRectangleBorder()

Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  height: 50,
                ),
                Ink(
                    child:IconButton(
                      icon: Icon(Icons.play_arrow),
                      color: Colors.white,
                      iconSize: 50,
                      splashRadius: 40,
                      disabledColor: Colors.grey,
                      onPressed: () {},
                      tooltip: "Play",
                    ),
                  decoration: ShapeDecoration(
                    color: Colors.grey,
                    shape: OutlineInputBorder()
                  ),
                )
              ]
        ),

Output:

flutter iconbutton background shape

To apply more shapes please refer shaping raised button section of flutter raisedButton widget example to learn about more shapes.

That brings an end to flutter IconButton example. See you in the next article with some other flutter widget. Have a great day!!

Do share, subscribe, and like my Facebook page if you find this post helpful. Thank you!!

Reference: Flutter Official Documentation


Spread the love

AUTHOR

Naresh Pradeep

Hey there! I am the founder of CodesInsider and android developer.I love to code and build apps.


Related Posts

Leave a Reply

Your email address will not be published.