FlutterFlow Docs
Search…
⌃K

IconButton

The IconButton widget allows users to take action with a single tap. Unlike the regular Button widget, an IconButton shows a small image or a symbol and does not include text.
You can use the Icon widget to let users quickly understand the meaning of an action. For example, the delete action can be easily conveyed using the trash can icon which looks like this (
)

Add an IconButton to Your Project

To add an IconButton to your project:
Simply drag the IconButton widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree.
The default IconButton widget shows the add icon (plus sign).
Here's an example of how you can use an IconButton widget with custom items:
  • First, drag the AppBar widget from the Page Elements tab (in the Widget Panel) or add it directly from the widget tree.
  • Click UI Builder from the Navigation Menu (left side of your screen).
  • Drag the Text widget from the Base Elements tab to the Title section of the AppBar. Change the name to AppName and the Theme Style to Title 1. Set the Text Color to Tertiary.
  • If you are in the Widget Tree section, Open the UI Builder from the Navigation Menu.
  • Drag the IconButton widget from the Base Elements tab and carefully drop it into the Actions section of the AppBar. You can tell which section you are about to drop the widget into because it will appear and be shown in red.
  • Now, move to Property editor and scroll down to Icon property.
  • Click on the Add Box Outlined + button, then search and select the icon name with Bedtime. Set its Icon Color property to Tertiary.

Customizing the Icon

Here are the instructions on customizing the Icon.

Changing the Properties

The Properties Panel can be used to customize the appearance and behavior of your widget.

Add Padding

Here are the instructions on how to add padding.

Adjust the Alignment

Here are the instructions on adjusting the alignment.

Set color dynamically

See how to set a color from variable to any color property of this widget.

Adding Action

To perform any action on click of the IconButton, add an Action in FlutterFlow. You can find the instructions on adding the Action here.

Show/Hide IconButton

Please find the instructions to show/hide the widget here
Last modified 1mo ago