SwitchListTile

The SwitchListTile is a combination of Switch (toggle) and ListTile. Tapping anywhere on the SwitchListTile toggles the switch.

You can use the SwitchListTile to show a list of settings you can turn on and off.

Add a SwitchListTile to your project

Here's an example of how you can use a SwitchListTile widget in your project:

Drag the SwitchListTile widget from the Base Elements tab and drop it inside the Column.
By default, the switch is enabled initially.
1. To turn it off, move to the properties panel, and uncheck the Switch Initial Value property.
2. To set its value based on the variable (e.g. app state variable, API response), move to the properties panel, click on the Set from Variable and choose the Source.
To set the title, scroll down to the Title section and change the Text property.
Similarly, scroll down, find the Subtitle section, and change the Text to add the description.

At this point, you have a single SwitchListTile added to the page. To add more items copy-paste the SwitchListTile widget as shown below:

Setting Platform Type

You can set the platform type such as Adaptive, Android, or iOS for this widget. Selecting the Adaptive type will display the widget in its native style. That means the widget will show iOS-style rendering when running on iOS devices and Android-style rendering on Android devices. You can also choose only Android or iOS to display widgets in a specific rendering style on all platforms.

To set the platform type:

Select the SwitchListTile widget from the widget tree or the canvas area.
Move to the properties panel and open the Platform section.
Set the Platform Type among the Adaptive, Android, or iOS.

Customizing

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

Styling The SwitchListTile

Using various properties under the Switch List Style Properties section, you can customize the SwitchListTile as per your design.

Check out the instructions on styling the SwitchListTile.

Changing switch color

To change the switch color:

Select SwitchListTile from the widget tree or the canvas area.
Move to the Properties panel and scroll down to the Switch List Tile Properties section.
To change the color of the thumb (sliding circle), find the Thumb Color property and click on the box next to the already selected color, select the color, and then click Use Color or click on the already selected color and enter a Hex Code directly.
To change the color of the track (the line over which the circle slides), find the Track Color property and click on the box next to the already selected color, select the color, and then click Use Color or click on the already selected color and enter a Hex Code directly.

Showing switch at the start

To make the switch appear before the title:

Select SwitchListTile from the widget tree or the canvas area.
Move to the Properties panel and scroll down to the Switch List Tile Properties section.
Scroll down and checkmark the Leading property (click on it).

Disable SwitchListTile

You may need to disable a SwitchListTile 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 SwitchListTile, 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 Thumb Color and Disabled Active Track Color properties.