Comment on page
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.
ToggleIcon
Let's see how to add a ToggleIcon widget by building an example that controls the dark/light theme. Here's how it looks:
ToggleIcon to control the app theme
Here's how you do it:
- 1.First, add the ToggleIcon widget itself from the Base Elements.
- 2.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.
- 3.
- 4.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.
Adding ToggleIcon widget
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:
Trigger action on toggle
To do so:
- 1.Select the ToggleIcon > move to the Properties Panel > select Actions > and click + Add Action.
- 2.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.
- 3.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.
Setting dark/light mode when ToggleIcon is clicked
You can customize the appearance and behavior of this widget using the various properties available under the properties panel.
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.
Connecting to the Firestore variable
Pictures collection
Last modified 4mo ago