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
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
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
Using various properties under the Switch List Style Properties section, you can customize the SwitchListTile as per your design.
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
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
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.
Adding action
To show the data retrieved from your Firestore collection and document into the SwitchListTile widget, ensure you:
Last modified 7mo ago