CheckboxGroup

The CheckboxGroup widget is used to allow a user to select multiple items. The checkbox is displayed before the item name, which you can check/uncheck to make/remove the selection.

You can use the CheckboxGroup widget for implementing multiple selections such as repeating days for alarm, languages a user can speak, and allowing users to select pizza toppings.

CheckboxGroup

Adding CheckboxGroup

Here's an example of how you can use the CheckboxGroup widget in your project:

1. First, add the CheckboxGroup widget from the Form Elements tab or add it directly from the widget tree.

2. By default, the CheckboxGroup widget adds a single option named Option 1. To change the name, move to the properties panel (on the right side of your screen), and scroll down to the Define Options section. Find the Option 1 property and change the name.

3. To add more options, move to the properties panel, and scroll down to the Define Options section.

   1. Click on the Add Option text.

   2. Enter the name in Option 2 Text.

4. To remove the option, click on the cancel icon () displayed in the Option name property.
5. Click on the Set from Variable to show the options from a variable such as app state variable, API response variable, or Firestore Document.

Adding CheckboxGroup

Setting initial selection

Sometimes you might want to display the CheckboxGroup with some options already selected. For example, selecting the topping options that are already served with Pizza itself. You can do so by setting the initial selection for the CheckboxGroup.

If no options are selected, FlutterFlow selects the first options in the canvas and leaves all the checkboxes unselected when you run the app.

Initially selected options

Based on your app, you might want to set the initial selection manually (i.e. manually entering the option name) or from variables such as app state variable, API response variable, or Firestore Document).

Setting initial selection manually

To set initial selection manually:

1. Select the CheckboxGroup from the widget tree or the canvas area.

2. Move to the properties panel (on the right side of your screen) and scroll down to the Initially Selected section.

3. Click on the Add Selected and enter the option name that you would like to display as selected. Note: Make sure you enter the correct name and it matches with the option name added inside the define options section.

4. Similarly, you can display the other option(s) as selected.

Setting the initial selection manually

Setting initial selection from variable

Let's see an example of setting the initial pizza toppings options using the app state variable.

First, create the app state variable with String datatype and mark it as List (i.e. List <String>), which looks like the below. To do so, find the instructions here.

To set the Initial options from Firestore Data, please follow the instructions here.

App state variable

To set initial selection from app state variable:

1. Select the CheckboxGroup from the widget tree or the canvas area.

2. Move to the properties panel (on the right side of your screen) and scroll down to the Initially Selected section.

3. Click on the Set from Variable. This will open a new panel.

4. Set the Source to App State.

5. Set the Available Options to the name of the variable.

6. Click Confirm.

Setting initial selection from variable

Showing initial options from Firestore Data

You may be using the Firstore to store your app data in the collection-document model. Let's see an example of showing the Repeat value of the Todo item inside the CheckboxGroup from the Firestore data.

Showing initial options from Firestore Data

1. Prerequisites

Before we fetch data from Firestore, ensure you incorporate all the prerequisites to have some data in Firestore.

1. Be familiar with Structuring the Firebase Database.

2. Complete all steps in the Firebase Setup section for your project.

3. Create a Collection called Todos.

4. Add Data to Collection.

A record/document inside the Todos collection should look similar to the following:

Sample todo document

2. Querying a single document

Querying a single document on a page helps you retrieve the document data that might contain the values to display on CheckboxGroup.

To query a single document on page:

1. Select a page.

2. Click on the Backend Query tab (on the right side of your screen).

3. Set the Query Type to Query Collection.

4. Please scroll down to find the Collection dropdown and change it to your collection.

5. Set the Query Type to Single Documents.

6. Click on the + Filter to find the exact document/record.

7. Find the Field Name, click the Unset, and select the field on which you would like to apply the filter.

8. Find the Relation dropdown, click on the Unset and choose the relation amongst the list.

9. Find the Value property and set it to an appropriate value.

10. Click Confirm.

Querying a single document

3. Showing selection in CheckboxGroup

To show options from document data into the CheckboxGroup:

1. Select the CheckboxGroup widget from the widget tree or the canvas area.

2. Move to the properties panel (on the right side of your screen) and scroll down to the Initially Selected section.

3. Click on the Set from Variable. This will open a new panel.

   1. Find the Source dropdown, click on unset and select the [collection] Record (from PageName).

   2. Under the Available Options, click on Unset and select the field that holds the options to be displayed inside the CheckboxGroup.

   3. Click Confirm.

Showing selection in CheckboxGroup

Saving selection to Firestore Document

You would probably use the CheckboxGroup inside the Form and save its selection to your backend database when the form is submitted.

Let's see an example of saving the CheckboxGroup selection inside the Firestore document.

Saving selection to Firestore Document

1. Prerequisites

To save the CheckboxGroup selection inside the Firestore document, make sure you incorporate all the mentioned prerequisites.

1. Be familiar with Structuring the Firebase Database.

2. Complete all steps in the Firebase Setup section for your project.

3. Create a Collection called Todos with the schema as per the following.

To store the list of selected options, the collection schema must contain a field with String datatype and it must be a List (i.e. List<String>).

Collection schema

2. Passing selection into the document field

You can pass the CheckboxGroup selection inside the document field by adding the action that creates or updates the document, such as Create Document or Update Document.

Here are the steps in detail:

1. Select the Widget (e.g. Button) on which you want to add the action.

2. Select Actions from the Properties panel (the right menu), and click Open. This will open an Action flow Editor in a new popup window.

   1. Click on the + Add Action.

   2. On the right side, search and select Create Document or Update Document.

   3. If you select Create Document.

      1. Set the Collection to your collection name (e.g. todo).

   4. If you select Update Document, set the document reference to update.

      1. If you have access to the document, set the Source to the actual document and Available Options to reference.

   5. Under the Set Fields section, click on the + Field button.

   6. Click on the Field name until you see the fields that store the CheckboxGroup selection.

      1. Set the List Update Type to Set Value.

      2. Set the Source to Widget State.

      3. Set the Available Options to CheckboxGroup.

   7. Similarly, add the field for the other UI elements.

Passing selection into the document field

Clear/Select all items

You might want to allow users to clear or select all items in one go. You can do so by adding the following action.

pageClear All/Select All

Customization

You can use the Properties Panel to customize the appearance of your widget.

Set padding around the checkbox

To create empty space around the checkbox:

1. Select the CheckboxGroup from the widget tree or the canvas area.

2. Move to the properties panel and find the Item Padding property.

3. Set the padding for the L(Left), T(Top), R(Right), and B(Bottom) sides. Use the Lock button to change all values at the same time. Unlocking will allow you to modify each value separately.

Set padding around the checkbox

Changing checkbox color

To change the checkbox color:

1. Select the CheckboxGroup from the widget tree or the canvas area.

2. Move to the properties panel and scroll down to the Checkbox Style section.

3. To change the active color (i.e. color when the checkbox is selected), find the Active Color property, click on the box next to the already selected color, select the color, and then click Use Color or click on Unset and enter a Hex Code directly. You can also choose the color by clicking the Palette and Simple button.

4. the Similarly you can change the check color (i.e color of the done/tickmark icon inside the checkbox).

Changing checkbox color

Customizing checkbox border

To customize the checkbox border:

1. Select the CheckboxGroup from the widget tree or the canvas area.

2. Move to the properties panel and scroll down to the Checkbox Style section.

3. To change the checkbox border color, find the Check Border Color property, click on the box next to the already selected color, select the color, and then click Use Color or click on Unset and enter a Hex Code directly. You can also choose the color by clicking the Palette and Simple button.

4. To adjust the border corner, find the Border Radius property and enter the values in the TL (Top left), TR (top right), BL (bottom left), and BR (bottom right) boxes. Use the Lock button to change all values at the same time. Unlocking will allow you to modify each value separately.

Customizing checkbox border

Customizing Label

To customize the label:

1. Select the CheckboxGroup widget > move to the Properties Panel > Label Style.

2. To create some space around the label, use the Label Padding property.

3. To change the label style for checked and unchecked state, follow the instructions here.

Add padding

Here are the instructions on how to add padding.

Adjust the alignment

Here are the instructions on adjusting the alignment.

Set color dynamically

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

Trigger action on change

See how to trigger an action when a selection changes on this widget.

Show/Hide widget

Please find the instructions to show/hide the widget here.