Switch

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.

Adding Switch

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:

Here is a simple way to do it:

First, click on the + Add Widget, drag the Switch widget from the Base Elements tab, or add it directly from the widget tree.
Below the Switch, add a Text widget, move to the properties panel, click on Set from Variable and choose the Widget State > switchValue (i.e., name of your switch).

Setting initial value

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:

Select the Switch widget, move to the properties panel, and see the Switch Initial Value property.
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).

Saving switch 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.

On Toggled On: Actions added under this will be triggered whenever the switch is ON.
On Toggled Off: Actions added under this will be triggered whenever the switch is OFF.

Here's how you do it:

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.
Select On Toggled On or On Toggled Off and add an action that will update the value. (e.g., update app state, update Firestore record, etc.)

Customizing

You can customize the appearance and behavior of this widget using the various properties available under the properties panel.

Changing color

To change the switch colors, select the Switch widget, move to the properties panel, and scroll down to the Switch Properties section. Here you can change the color for the following properties:

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.

Disable switch

You may need to disable a switch if certain conditions aren't met. For instance, users should only be able to toggle the switch when the connected smart device is operational.

To disable a switch, move to the Properties Panel > turn on the Switch Disable Options > click Unset, and set the Condition. Once set, you could also customize the disabled state colors using the Disabled Active Color, Disabled Active Track Color, Disabled Inactive Track Color, and Disabled Inactive Thumb Color properties.