IconButton in Flutter
The IconButton in Flutter, a versatile and essential component of its extensive widget library, is a material design widget displaying a graphical icon responsive to user interactions like taps. Ideal for creating interactive UI elements like buttons and tabs, its customizability and vast icon range enhance interfaces, making them intuitive and visually appealing. Used widely in Flutter development, the IconButton facilitates the creation of beautiful, responsive apps compatible across multiple platforms using a single codebase, showcasing the power and flexibility of Flutter's UI toolkit.
Constructor
As we already know, Everything in Flutter is a widget, and every widget is just another object.
Now, we also know that objects are created or instantiated using something called 'Constructors'.
IconButton is no different. Flutter provides us with a constructor to create an icon button and customise it using the properties.
Below is the constructor for IconButton in Flutter:
As you can see, a lot of properties are provided for us to utilize and customise the look and feel. More importantly, All the properties provided are named arguments, So You can choose to use only the ones you want.
Note: Although all properties are named arguments, The Icon property and onPressed are two properties that need to be defined to implement an IconButton. They are required.
Using IconButton in a Flutter App
Using an IconButton in your Flutter app is quite easy:
- Import the necessary Flutter packages: To use the IconButton widget, you first need to import the relevant Flutter packages into your code. Add the following import statement to your code:
- Create an instance of the IconButton widget: Create an instance of the IconButton widget by calling the constructor and passing in the necessary parameters. The icon parameter is required and specifies the icon that will be displayed on the button.
- Customize the IconButton: IconButton provides several parameters that you can use to customize the appearance and behavior of the button. For example, you can change the size, color, and padding of the icon using the iconize, color, and padding parameters, respectively.
Styling IconButton
As we have seen above, one of IconButton's key features is the ability to be customized per your application needs. The constructor provides us with various properties to make it possible and easy.
Let us look at a sample of how you can use the various properties provided to style your icon button:
Icon and onPressed are required fields to set up an icon button in Flutter.
Another useful property of IconButton is color, which can be used to play around with the color of the icon.
In addition to the color property, we also have a property called splashColor that can be used to set the color that appears when the user taps the button.
We have a property to adjust the size of the icon. It is called iconSize. This property takes a double value that specifies the size of the icon in logical pixels.
Another commonly used property in IconButton is padding. Using this property, we can adjust the padding around the icon. This property takes an EdgeInsets object that specifies the padding on each side of the icon.
IconButton with ToolTip
IconButton in Flutter can also be used in conjunction with or inside many other widgets.
You can easily add a tooltip to an icon button by wrapping it with a Tooltip widget. The Tooltip widget provides a simple way to add a tooltip that displays when the user hovers over the button.
To add a tooltip to an icon button, simply wrap the icon button with a Tooltip widget and set the message property to the text you want to display in the tooltip.
Using tooltips with IconButtons is a great way to provide additional information or context to your users without cluttering up your user interface.
Note
IconButton with Badge
Another good example of customizing your IconButton in conjunction with other widgets is using it with Badge.
The work here is very simple; the IconButton can be wrapped inside a badge widget and customized to add a badge to it.
IconButton with Animation
Styling an icon button in Flutter with animation can add a touch of interactivity and polish to your user interface. Fortunately, Flutter provides a wide range of animation widgets and classes that can be used to animate the properties of an icon button in Flutter.
There are multiple options to choose from to customize your icon button in Flutter, But One of the most commonly used animation widgets in Flutter is the AnimatedContainer widget. The AnimatedContainer widget provides a simple and efficient way to animate the properties of a container widget, such as the IconButton in Flutter.
Note: You need to use Animation widgets in a Stateful Widget.
In simple terms, Using animation in conjunction with IconButton can allow you to animate and give feedback of some sort to the user upon interaction.
Properties
As mentioned above, Flutter provides us with a plethora of properties to play around with and customise the look and feel of the icon button. Let us have a quick look at some of them:
| Property | Description |
|---|---|
| icon | Property used to set the icon to display within the button |
| onPressed | Property used to set the function to call when the button is pressed |
| color | Property used to set the color of the button icon |
| disabledColor | Property used to set the color of the button icon when the button is disabled |
| padding | Property used to set the amount of padding to apply to the button |
| alignment | Property used to set the alignment of the button within its container |
| tooltip | Property used to set the tooltip to display when the button is hovered over |
| splashColor | Property used to set the color of the ink splash effect when the button is pressed |
| highlightColor | Property used to set the color of the ink highlight effect when the button is pressed |
| hoverColor | Property used to set the color of the button icon when the button is hovered over |
| focusColor | Property used to set the color of the button icon when the button is in focus |
| iconize | Property used to set the size of the button icon |
| enableFeedback | Property used to enable haptic feedback when the button is pressed |
| splashRadius | Property used to set the radius of the ink splash effect |
| constraints | Property used to set the constraints to apply to the button |
| visualDensity | Property used to set the visual density to apply to the button |
Example App
Let us build a simple app to demonstrate how to build with IconButton of various configurations
In our ExampleApp, We have folder called 'lib'. The 'lib' folder consists of the main.dart file.
This is the file through which any flutter application is called and executed. This is where we are gonna write the code today.
Let us see some of the properties in action now:
Below is the main.dart file code:
In this example, we've created four IconButtons in the center of the screen. The first IconButton has the add icon and a default onPressed function that prints a message to the console when the button is pressed.
The second IconButton has the delete icon and is wrapped with a Tooltip widget that displays a tooltip with the message 'Delete' when the button is hovered over. The onPressed function for this button also prints a message to the console.
The third IconButton has the notifications icon and is wrapped with a Badge widget to display a badge with a badge label on the top right corner of the button.
The fourth IconButton has the favorite icon and is wrapped with an AnimatedContainer widget that animates the size and color of the container when the button is pressed. The onPressed function for this button also prints a message to the console.
The IconButtons will look something like this:
While we implemented IconButton now in multiple ways, these are not the only ways you can implement them, there are many other ways you can configure them and use them as per your application needs.
Conclusion
- IconButton is a versatile widget that allows developers to add icons to their app with ease.
- IconButton is a simple yet powerful widget in Flutter that allows developers to create interactive buttons, toggles, and other UI elements that require user input.
- IconButton in Flutter offers a wide range of customization options, including size, color, padding, and more, making it easy to create visually appealing and intuitive interfaces.
- IconButton in Flutter can be used for various purposes, such as navigation, triggering an action, or changing the state of an application.
- Developers can choose from a vast array of icons available in Flutter or use their custom icons to create unique and distinctive interfaces.
- It is easy to implement and use, even for beginner developers, and can greatly enhance the user experience of an application.
- The onPressed property can be used to specify a function to run when the button is pressed.
- The Tooltip widget can be used to display a tooltip when the button is hovered over.
- The Badge package can be used to display a badge on the button with a number or text.
- Animations can be added to the button using the AnimatedContainer widget.