The Switch widget allows users to turn on or off any setting in your app. For example, you could use it on a settings page to enable/disable push notifications, location services, etc.
Let's see how to add a switch widget and build an example that shows its value on a Text widget. Here's how it looks:
Showing switch value
Here is a simple way to do it:
- 1.First, click on the + Add Widget, drag the Switch widget from the Base Elements tab, or add it directly from the widget tree.
Adding switch widget
You might want to show the switch with a default status, i.e., ON or OFF. For example, showing the location service setting with a default switch OFF.
To set the initial value:
- 1.Select the Switch widget, move to the properties panel, and see the Switch Initial Value property.
- 2.Use the checkbox to set this value manually, or click Set from Variable to set it based on the dynamic value. If you choose Set from Variable, ensure you pass the boolean value from the source (e.g., API response, Firestore document field).
Setting initial value
You might want to save the switch value as soon as it is toggled ON or OFF. For example, saving in an app state variable or Firestore document field. You can do so by adding the action on the switch widget.
The switch widget provides you with the following types of actions (aka callbacks), which you can use to add actions under it.
- 1.On Toggled On: Actions added under this will be triggered whenever the switch is ON.
- 2.On Toggled Off: Actions added under this will be triggered whenever the switch is OFF.
Here's how you do it:
- 1.Select the Switch widget, select Actions from the Properties panel (the right menu), and click Open. This will open an Action Flow Editor in a new popup window.
Saving switch value
- Active Color: The color of the thumb (circle) when the switch is ON.
- Active Track Color: The color of a track (the line over which the circle slides) when the switch is ON.
- Inactive Track Color: The color of a track (the line over which the circle slides) when the switch is OFF.
- Inactive Thumb Color: The color of the thumb (circle) when the switch is OFF.