IconButton Widget in Flutter | Androidmonks

IconButton Widget in Flutter | Androidmonks

IconButton is a pretty useful widget in Flutter. An IconButton is a picture printed on a Material Widget. The main need for an Icon Button is to give it a material design feel. It creates nothing more than a Button with Icon in it. It, however, calls the Ink() widget to give it a splash feel.

In this tutorial, we will look at all the properties of the IconButton Widget in Flutter and understand where to use the IconButton Widget.

YOU ARE YOUR BOSS
I agree to have my personal information transfered to MailChimp ( more information )
Join over 5.000 visitors who are receiving our free content and learn how to program with Android. The growth of Android is estimated to reach a whooping 83% by 2020. Hop on the train and start making money!
We hate spam. Your email address will not be sold or shared with anyone else.

IconButton – Basics

In order to make use of the IconButton widget in the flutter App. Use the below widget definition.

IconButton()

As a sample template to create the Flutter, below is the complete code of the main.dart file

import 'package:flutter/material.dart';

void main()
{
  runApp(MaterialApp(
    title:'Androidmonks',
    home: Scaffold(
      body: Scaffold(appBar: AppBar(
        title: Text("Androidmonks"),),
        body: IconButton(),
      ),
    ),
  ));
}

IconButton Widget – Properties

icon

The important attribute of the widget is the icon attribute. The attribute takes in the value of an Icon() which can store the icons. The primary attribute of the Widget is to create an IconButton to let the user click on it.

You can define the icon attribute using the code given below,

IconButton(
  icon: Icon(Icons.settings),
)

This creates the app which looks like,

Using icon attribute in IconButton widget
Using icon attribute in IconButton widget

color

Color attribute lets the developer control the color of the IconButton.It takes the Colors class as its value.

IconButton(
  icon: Icon(Icons.settings),
  color: Colors.cyan,
)

This makes the IconButton look like,

IconButton color attribute
IconButton color attribute

disabledColor

The problem with the color attribute is that, unless the onPressed() callback present, it is in the disabled state only. It becomes important to create a disabled color also. Using the attribute disabledColor which takes in a Color class, you can do the following,

IconButton(
  icon: Icon(Icons.create_new_folder),
  color: Colors.cyan,
  disabledColor: Colors.pinkAccent,
)

Unless the onPressed() is used, the color will remain as pink.

IconButton disbaledColor attribute
IconButton disbaledColor attribute

highlightColor

HighlightColor represents the secondary color of the Button when it is pressed. The highlightColor represents what the IconButton color is apart from the color attribute.

IconButton(
  icon: Icon(Icons.create_new_folder),
  color: Colors.cyan,
  highlightColor: Colors.lightGreen,
  onPressed: (){},
)
HighlightColor in IconButton
HighlightColor in IconButton

 

onPressed

Callback that gets fired whenever the user clicks on the IconButton. You can perform any event inside the onPressed method. Check the example code below.

IconButton(
  icon: Icon(Icons.create_new_folder),
  color: Colors.cyan,
  highlightColor: Colors.lightGreen,
  onPressed: (){
    print("IconButton is clicked");
  },
)

Creates the Callback like,

onPressed callback in IconButton
onPressed callback in IconButton

Padding

Padding allows some amount of space to be given to the Icon with respect to the boundaries of the IconButton. You can provide an EdgeInsetGeometry class as its value.

IconButton(
  icon: Icon(Icons.create_new_folder),
  color: Colors.cyan,
  highlightColor: Colors.lightGreen,
  padding: EdgeInsets.all(40.0),
)
Padding attribute in IconButton
Padding attribute in IconButton

toolTip

ToolTip attribute lets you create a simple Text to come up on the UI when you hover over the IconButton. You can create a ToolTip like below,

IconButton(
    icon: Icon(Icons.create_new_folder),
    color: Colors.cyan,
    highlightColor: Colors.lightGreen,
    padding: EdgeInsets.all(40.0),
    tooltip: "Sample Folder",
    onPressed: (){},
  ),
)

It directly takes in a String Value as its parameter. The application looks like,

ToolTip option in IconButton
ToolTip option in IconButton

splashColor

The splash overlay has a center point that matches the hit point of the user touch event. The splash overlay will expand to fill the button area if the touch is held for long enough time. If the splash color has transparency then the highlight and button color will show through.

To give a splash Color make use of the same Color class as given below.

SplashEffect in IconButton
SplashEffect in IconButton

alignment

Aligns the Icon inside the Boundary. It takes in the Alignment class as its value. The value should be a combination of Top, Bottom, Left, Right, Center.

Check the code below for better understanding,

IconButton(
  icon: Icon(Icons.create_new_folder),
  color: Colors.cyan,
  alignment: Alignment.topLeft,
)
TopLeft alignment
TopLeft alignment

 

If BottomRight is used,

IconButton(
  icon: Icon(Icons.create_new_folder),
  color: Colors.cyan,
  alignment: Alignment.bottomRight,
),
BottomRight Alignment
BottomRight Alignment

 

IconButton Widget – Wrapup

Once all the IconButton attributes are understood, its time to play around with it and create the material design IconButton.

IconButton is primarily used inside a ListView a ParentWidget to create better dynamics to the Application.

Drop in any comments you have in the comment section below.

“Happy Coding”

Also Read  TextView in Android - Android Studio With Example

Leave a Comment

Your email address will not be published. Required fields are marked *