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:

Customizing

You can customize the appearance and behavior of this widget using the various properties available under the properties panel.

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.

Disable CheckboxListTile

You may need to disable a CheckboxListTile if certain conditions aren't met. For instance, users should only be able to use the 'Same as Shipping Address' checkbox when a shipping address is provided.

To disable a CheckboxListTile, move to the Properties Panel > turn on the Checkbox Disable Options > click Unset, and set the Condition. Once set, you could also customize the disabled state colors using the Disabled Check Color property.