FlutterFlow Docs
Search…
⌃K

ToggleIcon

The ToggleIcon widget is used to allow a user to switch between two icons that represent two different states. You can use the ToggleIcon widget to implement a feature such as an on-off button, like button, etc.

Add a ToggleIcon to Your Project

Here's an example of how you can use a ToggleIcon widget in your project:
  • First, drag the ListView widget from the Layout Elements tab (in the Widget Panel) or add it directly from the widget tree.
  • Add the Card widget from the Layout Elements tab and drop it inside the ListView.
  • Now add the Stack widget from the Layout Elements tab.
  • Add the Image widget from the Base Elements tab into the Card. Set its width to inf and height to 200.
  • Finally, drag the ToggleIcon widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree.
  • Keep the ToggleIcon selected and drag it to the bottom right corner of the card.
At this point, you have one item added to the list. To fill the ListView with more items simply copy-paste the Card widget.
To copy-paste the Card widget:
  • Select the Card widget.
  • Right-click on it and select Copy. You can also use the keyboard shortcut Ctrl+C or Command+C.
  • Select the ListView widget.
  • Right-click on it and select Paste. You can also use the keyboard shortcut Ctrl+V or Command+V.
Here's how it looks when you run the app.

View The ToggleIcon On Status In The Editor

By default, The ToggleIcon shows the icon for off status in the editor. Using the Display value property you can see and customize the icon for the on status.
To see the On Icon:
  • Select ToggleIcon from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the Toggle Value section.
  • Checkmark the Display Value (in UI Builder) property (Click on it). Click on it again to see the off icon.

Customizing On/Off Icon

By default, the ToggleIcon shows the checkbox icon. Using the instructions below, you can change the default icons.
To change the default on/off icon:
  • Select the ToggleIcon from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the On Icon section.
  • Click on the Check Box button then search and select the icon name with a favorite.
  • Set the Icon Size property to 30.
  • To change the color, click on the box next to Unset, select the color, and then click Use Selected Color or click on Unset and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.
  • Switch to off Icon status by clicking the Display Value checkbox.
  • Find the Off Icon section below.
  • Click on the Check Box Outline Blank button then search and select the icon name with favorite_border.

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.

Connect to Firestore Variable

You may be using the Firstore to store your app data in the collection-document model. Let's see how you can use ToggleIcon to mark any picture as a favorite inside the Firestore document.

1. Prerequisites

Before we fetch/update data from Firestore, make sure you incorporate all the mentioned prerequisites to have some data in Firestore.
The field that you tie to ToggleIcon must be of boolean (True/False) data type.
Your pictures collection should look like the following:

2. Querying a Collection on a ListView

Querying a collection allows you to get a list of documents from inside the collection and show them in the ListView.
To query a collection on a ListView:
  • Select the ListView widget from the widget tree or from the canvas area.
  • Click on the Backend Query tab (on the right side of your screen).
  • Set the Query Type to Query Collection.
  • Scroll down to find the Collection dropdown and change it to your collection.
  • Set the Query Type to List of Documents.
  • Click Save.

3. Tying to Firestore Variable

Tying ToggleIcon to the Firestore variable helps you show and update the status directly from/to the field.
To tie the Firestore variable:
  • Select the ToggleIcon widget from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the Toggle Value section.
  • Click on the Tie to Firestore Variable on the right. (This will open a new panel)
    • Find the Source dropdown, click on unset and select the [collection] Record (from ListView).
    • Under the Available Options, click on Unset and select the field that holds the ToggleIcon status.
    • Click Save.
Here's how it looks when you run your app:

Show/Hide ToggleIcon

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