ToggleIcon
The ToggleIcon widget is used to allow a user to switch between two icons that represent two different states. You can use it to enable or disable features or settings, such as turning on or off music, changing the app theme, or a like button.
Adding ToggleIcon widget
Let's see how to add a ToggleIcon widget by building an example that controls the dark/light theme. Here's how it looks:
Here's how you do it:
First, add the ToggleIcon widget itself from the Base Elements.
Now you must tie ToggleIcon to a variable that maintains the theme state. Most probably, this would be variable from App State or your backend. Once you tie a variable, ToggleIcon will display an icon based on the current value and update a new value (opposite of the current) directly into the variable. To do so, move to the Properties Panel > Toggle Value > click settings icon > select the Source of a variable.
You can customize the On Icon and Off Icon using the instructions here.
To see how it looks in different states, toggle the Display Value (in UI Builder).
The variable/field that you tie to ToggleIcon must be of boolean (True/False) data type.
Trigger action on toggle
You can also trigger an action every time the toggle icon is clicked. This is very helpful if you want to do something like sorting or filtering a list or changing an app theme.
Let's extend our previous example and add some actions that actually change the app theme when a ToggleIcon is clicked. Here's how it looks:
To do so:
Select the ToggleIcon > move to the Properties Panel > select Actions > and click + Add Action.
You will notice that the Type of Action (aka callback) is already set to On Toggle. That means actions added under this will be called whenever the ToggleIcon is clicked.
Now you can add any action here. For this example, let's add a conditional action that checks the app state variable (it's the same variable used in ToggleIcon) and add actions to set the dark and light theme.
Customizing
You can customize the appearance and behavior of this widget using the various properties available under the properties panel.
Show/Hide widget
See how to show or hide any widget using the Conditional Visibility property.
Responsive visibility
See how to add responsive visibility to any widget.
Add padding & alignment
See how to add padding and alignment to any 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 favorite inside the Firestore document.
First, create a collection, query a collection, and then tie the field that holds the favorite status.
Last updated
