FlutterFlow Docs
Search…
⌃K

Icon

The Icon widget is used to show a small image or a symbol.
You can use the Icon widget to let users quickly understand the meaning of the text. For example, placing a location icon (
) before the numbers such as 23.35, 79.57 helps users identify that the values are a latitude and longitude.

Add an Icon to Your Project

To add an Icon to your project:
Simply drag the Icon widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree.
The default Icon widget shows the settings icon.
Here's an example of how you can use an Icon widget with custom items:
  • First, drag the Column widget from the Layout Elements tab (in the Widget Panel) or add it directly from the widget tree.
  • Move to the Property Editor (on the right side of your screen) and scroll down to the Column Properties section. Set the Cross Axis Alignment to Start and the Padding property to 10.
  • Add one Image widget inside the Column. Move to Property Editor, scroll down to the Image section, and set the Width to inf (Click on
    icon) and Height to 200.
  • Add a Text widget. Change the name to Title and the Theme Style to Title 1.
  • Add another Text widget. Change the name to Description.
  • Now, add one Row widget from the Layout Elements tab.
  • Finally, add the Icon widget either by dragging it from the Base Elements tab (in the Widget Panel) or directly from the widget tree.
  • Move to the Property Editor (on the right side of your screen) and scroll down to the Icon section.
  • Click on the Settings Outlined button then search and select the icon named time.
  • Add one more Text widget and change the name to Time.

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.

Show/Hide Icon

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