Add-Customize Icon Button Border in Flutter | Easy Guide 2023

3 min read

The Icon Button widget in Flutter is one of the most used widgets. It allows users to take some action such as searching or editing the item. But after adding the default Icon buttons, sometimes you might need to add or customize the border of the Icon buttons. So in this tutorial, we will see how to add and customize the Icon button border in Flutter.

Here are different versions of the icon button border:

Here’s what we’ll cover:

• How to add an icon button border in Flutter
• How to add icon button border radius or rounded border
• Changing icon button border color

How to add an icon button border in Flutter

First of all, let us tell you that there is no straightforward way to add the icon button border color so the idea is not to use the Icon Button widget at all and use the combination of Material and InkWell widget. You create the IconButton looking like a widget and then add the border color.

Steps to add icon button border in Flutter:

1. Replace the IconButton widget with the Material widget.
2. Inside the Material widget, set type to MaterialType.transparency and add the Ink widget as a child.
3. Inside the Ink widget, add the decoration property and assign the Boxdecoration with border parameter set to Border.all(width: 5).
4. Inside the same Ink widget, add three more widgets like InkWell >Padding (with value 10) >Icon.
5. Set the Icon size to 20.

Code Example

Material(
  type: MaterialType.transparency,
  child: Ink(
    decoration: BoxDecoration(
      border: Border.all(width: 5),
      color: Colors.greenAccent,
    ),
    child: InkWell(
      //borderRadius: BorderRadius.circular(100.0),
      onTap: () {},
      child: Padding(
        padding: EdgeInsets.all(10.0),
        child: Icon(
          Icons.flight,
          size: 20.0,
          color: Colors.black,
        ),
      ),
    ),
  ),
)

Output

How to add icon button border radius or rounded border

To add an icon button border radius or rounded border, first, add the normal border as per the instructions here. Then inside the BoxDecoration widget add the borderRadius parameter with BorderRadius.circular(50.0). This will create rounded border for the icon button.

Code Example

Material(
  type: MaterialType.transparency,
  child: Ink(
    decoration: BoxDecoration(
        border: Border.all(color: Colors.green, width: 5),
        color: Colors.greenAccent,
        borderRadius: BorderRadius.circular(50.0)), //<-- SEE HERE
    child: InkWell(
      borderRadius: BorderRadius.circular(100.0),
      onTap: () {},
      child: Padding(
        padding: EdgeInsets.all(10.0),
        child: Icon(
          Icons.flight,
          size: 20.0,
          color: Colors.black,
        ),
      ),
    ),
  ),
)

Output

Changing icon button border color

To change the IconButton border color, please follow the instruction here.

Conclusion

In this tutorial, we learned how to add and customize the icon button border in Flutter with practical examples; we first saw how to add a border, add border-radius, and finally learned how to change the icon button border color. We hope it helps 😃.

Would you like to check other interesting Flutter tutorials?

Add-Customize Button Border in Flutter | Ultimate Guide of 2022

Add-Customize Dropdown(DropdownButtonFormField) Border in Flutter [2022]