Links

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.
SwitchListTile

Add a SwitchListTile to your project

Here's an example of how you can use a SwitchListTile widget in your project:
  1. 1.
    Drag the SwitchListTile widget from the Base Elements tab and drop it inside the Column.
  2. 2.
    By default, the switch is enabled initially.
    1. 1.
      To turn it off, move to the properties panel, and uncheck the Switch Initial Value property.
    2. 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.
  3. 3.
    To set the title, scroll down to the Title section and change the Text property.
  4. 4.
    Similarly, scroll down, find the Subtitle section, and change the Text to add the description.
Adding SwitchListTile to your project
At this point, you have a single SwitchListTile added to the page. To add more items copy-paste the SwitchListTile widget as shown below:
Copy-pasting widget

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:
  1. 1.
    Select the SwitchListTile widget from the widget tree or the canvas area.
  2. 2.
    Move to the properties panel and open the Platform section.
  3. 3.
    Set the Platform Type among the Adaptive, Android, or iOS.
Setting Platform Type

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:
  1. 1.
    Select SwitchListTile from the widget tree or the canvas area.
  2. 2.
    Move to the Properties panel and scroll down to the Switch List Tile Properties section.
  3. 3.
    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.
  4. 4.
    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.
Changing switch color

Showing switch at the start

To make the switch appear before the title:
  1. 1.
    Select SwitchListTile from the widget tree or the canvas area.
  2. 2.
    Move to the Properties panel and scroll down to the Switch List Tile Properties section.
  3. 3.
    Scroll down and checkmark the Leading property (click on it).
Showing switch at the start

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.

Customizing the title

Here are the instructions on customizing the title.

Customizing the subtitle

Here are the instructions on customizing the subtitle.

Common widget properties

Showing Firestore Data

To show the data retrieved from your Firestore collection and document into the SwitchListTile widget, ensure you:
  1. 2.
    Completed all steps in the Firebase Setup section for your project.
  2. 3.
    Retrieved Data from either collection or document.
  3. 4.
    Finally, to show data into the SwitchListTile widget, follow the steps here.

Last Updated Date: December 13, 2023
Last modified 2mo ago