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.
.png?alt=media&token=3acb4cd7-25e3-442d-993f-1723ccd18a65)
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.
.gif?alt=media&token=29027888-cbfb-473b-82c6-6e1fff846cb4)
After adding a number of items, the list created using CheckboxListTile looks like this:
.gif?alt=media&token=d1603fb6-c547-4659-b9ed-359ad6fb141e)
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).
.gif?alt=media&token=1482e101-2355-4cfb-8611-6c875e2b4b11)
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.
.gif?alt=media&token=9ae2e037-9276-4f34-ba70-b0815ea3ab54)
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.
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.
.gif?alt=media&token=c18e3122-0199-422c-92f7-7215000bf67d)
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.
.gif?alt=media&token=c4eb5f6b-6ee3-4365-ab38-f96726fff3dd)
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.
.gif?alt=media&token=53c47eae-95d7-4569-8852-ee3ba13813ed)
Using various properties under the Style Properties section, you can customize the CheckboxListTile as per your design.
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.
.gif?alt=media&token=5ed740bb-11bd-445b-8cf8-5ef35cc8f0c6)
To show the data retrieved from your Firestore collection and document into the ChcekboxListTile widget, ensure you:
Last modified 7mo ago