Hello hello hello everybody, Welcome back to another blog on Building with Flutter! Are you tired of just screens on your mobile app? Want to add some interactive or give some feedback to the user as they interact with the app? Then you are at the right place as we are gonna explore IconButton in Flutter today.

Wondering what is an IconButton? How you can use them? How you can customise them? Where can you use them? Don't worry, through this article, you will find all the answers to your questions.

This blog is part of a Flutter series called "Build with Flutter" where I will teach you from the ground up about Flutter and building user applications with it. Wanna hop on the ride? Make sure to follow Rohit T or Subscribe to my newsletter here.

Now, without further ado, Let's dive deep into a specific widget that Flutter provides us with that makes our app interactive.

What is IconButton in Flutter?

The IconButton widget is a simple yet powerful widget in Flutter, which is a material design widget that displays a graphical icon that the user can interact with by clicking or tapping.

It is highly customizable and can be used for a wide variety of purposes, such as adding navigation or triggering an action. With a vast array of icons available, it is easy to create visually appealing and intuitive interfaces.

IconButton widget in Flutter is a part of Flutter's extensive widget library and a rich set of features enables developers to create beautiful and fast apps compatible with multiple platforms using a single codebase.

Flutter comes with different types of buttons that you can use. One of them, a versatile and commonly used widget in Flutter is the IconButton. The IconButton widget is a material design widget that provides a graphical icon and responds to user taps.

It is commonly used to create interactive user interface elements such as buttons, tabs, and navigation drawers.

The IconButton widget is one of the many types of button types that Flutter provides us with. It is a material design widget that provides a graphical icon and responds to user taps based on the callback function.

An IconButton is typically used to represent an action or a command that the user can trigger by tapping on the icon. For example, an IconButton with a search icon in the appBar might be used to trigger a search function within an app, while an IconButton with a heart icon might be used to like a post or a picture. You get to decide and wire the callback function that allows the user to perform a certain action.

Since IconButton is a material design widget, it follows the guidelines and principles of material design, which is a design language developed by Google. This means that IconButton will look and behave the same way across different Android and iOS devices, as well as on the web and desktop platforms.

IconButton is also highly customizable and provides a range of properties that can be used to modify its appearance and behaviour. For example, you can change the color of the icon, set the splash color that appears when the user taps the button, and adjust the padding around the icon.

IconButton 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 IconButton and customise it using the properties.

Below is the constructor for IconButton in Flutter:

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

As you can see, a lot of properties are provided for us to utilise 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.

Styling the IconButton

As we have seen above, one of IconButton's key features is the ability to be customised 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 iconButton:

IconButton(
  icon: Icon(Icons.search),
  color: Colors.blue,
  splashColor: Colors.white,
  iconSize: 36.0,
  padding: EdgeInsets.all(8.0),
  onPressed: () {
    // Handle search button press
  },
)

Icon and onPressed are required fields to set up an icon button.

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.

Do you think the icon size is too small or large? We also 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.

This is just a gist of styling an IconButton, feel free to dive in and try different properties and configurations by yourself.

Using IconButton in Conjunction with other Widgets

IconButton in Flutter can also be used it in conjunction with or inside many other widgets.

One such use case is you can easily add a tooltip to an IconButton 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 IconButton, simply wrap the IconButton 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.

Another good example of customising 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 customised to add a badge to it.

Another commonly used styling is styling an IconButton in Flutter with animation to 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 IconButton in Flutter.

There are multiple options to choose from to customise your icon button, 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.

Properties

As mentioned above, Flutter provides us with a plethora of properties to play around with and customise the look and feel of the IconButton. Let us have a quick look at some of them:

Creating an IconButton of your own

Let us build a simple app to demonstrate how to build with IconButton of various configurations

Let us see some of the properties in action now:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'IconButton Example',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('IconButton Example'),
        ),
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              IconButton(
                icon: Icon(Icons.add),
                onPressed: () {
                  print('Add button pressed');
                },
              ),
              const SizedBox(
                width: 20,
              ),
              Tooltip(
                message: 'Delete',
                child: IconButton(
                  icon: Icon(Icons.delete),
                  onPressed: () {
                    print('Delete button pressed');
                  },
                ),
              ),
              const SizedBox(
                width: 20,
              ),
              Badge(
                  label: Text('5'),
                  child: IconButton(
                      onPressed: () {}, icon: Icon(Icons.notifications))),
              const SizedBox(
                width: 20,
              ),
              AnimatedContainer(
                duration: Duration(milliseconds: 500),
                width: 50,
                height: 50,
                decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.circular(25),
                ),
                child: IconButton(
                  icon: Icon(Icons.favorite),
                  color: Colors.white,
                  onPressed: () {
                    print('Favorite button pressed');
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

If you have made it this far, Congratulations! You've learned about IconButton and taken your first step towards building UI and apps that are interactive and functional with Flutter.

Here is a list of all the things we talked about in this article:

• Giving you a solid understanding of the IconButton Widget

• A good understanding of its properties

• How to use them to create different types of IconButton for your App in conjunction with other widgets

• Implementation of IconButton in flutter with code example.

Remember to experiment with different properties and play around with data and functions to create more interactive buttons and that fit your app's style and functionality.

And as always, keep practising and exploring different features of Flutter to improve your skills and take your mobile app development to the next level.

Closing remarks

Being a software engineer or developer is more than just code. Stay tuned for more!

Like | Comment | Share | Follow Rohit T for more!

Subscribe to my newsletter here, if you haven't yet. So you don't miss out on amazing content coming your way!

You can catch me on my socials here and drop a DM if you wanna work with me or for any opportunities. Thank you for reading! Happy Fluttering!

Do let me know how this article helped you, and what would you like me to cover next! Feel free to let me know if you think I should've covered something.