FlutterFlow Docs
Search…
⌃K

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:
  • Drag the SwitchListTile widget from the Base Elements tab and drop it inside the Column.
  • By default, the switch is enabled initially.
    • To turn it off, move to the properties panel, and uncheck the Switch Initial Value property.
    • To set its value based on the variable (e.g. local 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.
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:
  • 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.
Setting Platform Type

Customizing SwitchListTile

The Properties Panel can be used to customize the appearance and behavior of your widget.

Add padding

Check out the instructions on how to add padding.

Adjust the alignment

Check out the instructions on adjusting the alignment.

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.
Changing switch color

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).
Showing switch at the start

Customizing the title

Here are the instructions on customizing the title.

Customizing the subtitle

Here are the instructions on customizing the subtitle.

Set color dynamically

See how to set a color from variable to any color property of this widget.

Adding Action

To perform any action on click of the SwitchListTile, you should wrap your SwitchListTile inside the Container widget and then add an Action in FlutterFlow.
Check out the instructions on adding the action.
Adding action

Showing Firestore Data

To show the data retrieved from your Firestore collection and document into the SwitchListTile widget, ensure you:

Show/hide SwitchListTile

Please find the instructions to show/hide the widget here.
Last modified 1mo ago