CheckboxListTile

The CheckboxListTile is a combination of Checkbox and ListTile. Tapping anywhere on the CheckboxListTile toggles the checkbox.
You can use the CheckboxListTile to show a list of ToDo items to mark them as complete.
Add a CheckboxListTile to Your Project
Here's an example of how you can use a CheckboxListTile widget in your project:
First, drag the ListView widget from the Layout Elements tab (in the Widget Panel) or add it directly from the widget tree.
Drag the CheckboxListTile widget from the Base Elements tab and drop it inside the ListView.
Select CheckboxListTile from the widget tree or from the canvas area.
Move to the Property Editor and scroll down to the Title section.
Change the Text property to Task.
Scroll down below and find the Subtitle section. Change the property to the Description.
At this point, you have one item added to the list. To fill the ListView with more items simply copy-paste the CheckboxListTile widget.
To copy-paste the CheckboxListTile widget:
Select the CheckboxListTile widget.
Right-click on it and select Copy. You can also use the keyboard shortcut Ctrl+C or Command+C.
Select the ListView widget.
Right-click on it and select Paste. You can also use the keyboard shortcut Ctrl+V or Command+V.
After adding a number of items, the list created using CheckboxListTile looks like this:
Changing the Properties
The Properties Panel can be used to customize the appearance and behavior of your widget.
Setting Checkbox Initial Value
By default, CheckboxListTile comes with the checked checkbox. However, You can change this behavior to show the unchecked checkbox initially.
To set the check or uncheck value to the checkbox:
Select CheckboxListTile from the widget tree or from the canvas area.
Move to the Property Editor and scroll down to the Checkbox List Tile Properties section.
Check/Uncheck the Checkbox Initial Value property (click on it).
Changing Tile Color
To change the Tile color:
Select CheckboxListTile from the widget tree or from the canvas area.
Move to the Property Editor and scroll down to the Checkbox List Tile Properties section.
Find the Tile Color property and click on the box next to Unset, select the color, and then click Use Selected Color or click on Unset and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.
Styling Checkbox
By default, the checkbox comes in a square shape having a blue background and white color for the icon. You can change this default setting to customize the checkbox using the properties available under the Checkbox List Tile Properties section.
Changing Checkbox Color
To change the Checkbox color:
Select CheckboxListTile from the widget tree or from the canvas area.
Move to the Property Editor and scroll down to the Checkbox List Tile Properties section.
Find the Active Color property and click on the box next to Unset, select the color, and then click Use Selected Color or click on Unset and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.
Find the Check Color property and click on the box next to Unset, select the color, and then click Use Selected Color or click on Unset and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.
Making Checkbox Circular
To make the checkbox circular in shape:
Select CheckboxListTile from the widget tree or from the canvas area.
Move to the Property Editor and scroll down to the Checkbox List Tile Properties section.
Scroll down and checkmark the Circular Check property. Click on it.
Showing Checkbox At Start
To make the checkbox appear before the title:
Select CheckboxListTile from the widget tree or from the canvas area.
Move to the Property Editor and scroll down to the Checkbox List Tile Properties section.
Scroll down and checkmark the Leading property. Click on it.
Add Padding
​Here are the instructions on how to add padding.
Styling The CheckboxListTile
Using various properties under the Style Properties section, you can customize the CheckboxListTile as per your design.
​Here are the instructions on styling the CheckboxListTile.
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 CheckboxListTile, you should wrap your CheckboxListTile inside the Container widget and then add an Action in FlutterFlow. 
You can find the instructions on adding the Action here.
Showing Firestore Data
To show the data retrieved from your Firestore collection and document into the ChcekboxListTile widget, ensure you:
Understand Structuring the Firebase Database.
Completed all steps in the Firebase Setup section for your project.
​Retrieved Data from either collection or document.
Finally, to show data into the CheckboxListTile widget, follow the steps here.
Show/Hide CheckboxListTile
Please find the instructions to show/hide the widget here.

Checkbox

Switch

Last modified 7mo ago