FlutterFlow Docs
Search…
Actions
ChoiceChips
The ChoiceChips widget is used to allow the selection of a single chip from a group of chips. Each chip represents has an icon and text.
You can use the ChoiceChips widget to show the options that can be used to filter a list or to change the UI based on selection.

Adding a ChoiceChips to Your Project

To add the ChoiceChips widget to your project:
Simply drag the ChoiceChips widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree.
The ChoiceChips widget adds a single option named Option 1 by default.

Changing Name and Icon

To change the name and icon of the option:
  • Select ChoiceChips from the widget tree or from the canvas area.
  • Move to the Property Editor (on the right side of your screen) and scroll down to the Define Options section.
  • Find the Option 1 property and change the name to Flight.
  • Click on the button named Train Outlined then search and select the icon name with flight.

Adding or Removing Option

To add or remove the option from the ChoiceChips:
  • Select ChoiceChips from the widget tree or from the canvas area.
  • Move to the Property Editor (on the right side of your screen) and scroll down to the Define Options section.
  • Click on the Add Option text.
  • Enter the name in Option 2 Text to show the option name.
  • Set the icon by clicking on the None button then search and select the icon.
  • To remove the option, simply click on the cancel icon (
    ) displayed in the Option name property.

Changing the Properties

The Properties Panel can be used to customize the appearance and behavior of your widget.

Add Padding

​Here are the instructions on how to add padding.

Adjust the Alignment

​Here are the instructions on adjusting the alignment.

Changing the Default Selection

When you run the app, the first option is selected by default. You can change this selection using the Initial Option property.
To change the default selection:
  • Select ChoiceChips from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the Initial Option property.
  • Enter the name of the option in the Initial Option property. For example, entering a value as Train will select the second option in the following visual.

Adding Space between Chips

To add a space between the chips:
  • Select ChoiceChips from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the Chip Spacing property.
  • Change the value in the Chip Spacing property to adjust the space distribution between the chips.

Customizing Selected Chip

Various properties under the Selected Chip Style section allow you to customize the selected chip to match your design.

Changing Background Color

To change the background color for the selected chip:
  • Select ChoiceChips from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the Selected Chip Style section.
  • Find the Color property, click on the box next to #262D34, select the color, and then click Use Selected Color or click on #262D34 and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.

Customizing Icon

To change the icon size for the selected chip:
  • Select ChoiceChips from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the Selected Chip Style section.
  • Find the Icon Color property, click on the box next to White, select the color, and then click Use Selected Color or click on White and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.
  • Enter the value in the Icon Size property.

Changing Elevation

To change the elevation (depth or Z-axis) of the ChoiceChips
  • Select ChoiceChips from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the Selected Chip Style section.
  • Find the Elevation property and enter the value to see the drop shadow effect below the selected chip. The Higher value sets the bigger size of the shadow.

Add Label Padding

Label Padding adds space around the Text of the chip.
To add a Label Padding in the chip:
  • Select ChoiceChips from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the Selected Chip Style section.
  • Find the Label Padding property and enter the values for L(left), T(top), R(right), and B(bottom) input boxes.

Changing Text Style

To change the text style for the selected chip:
  • Select ChoiceChips from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the Selected Text Style section (Under the Selected Chip Style section).
  • Find the Theme Text Style dropdown. Click on Body Text 1 (inside the dropdown) to see other options and choose any.
  • Click on the button below the Font Family. Choose the font from the list. If the list doesn't contain the font you are looking for, you can search for it.
  • To change the color, find the Text Color property, Click on the box next to the already selected color, select the color, and then click Use Selected Color or click on the already selected color and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.
On running the app, the customized selected chip looks like this:

Customizing Unselected Chip

Various properties under the Unselected Chip Style section allow you to customize the unselected chip to match your design.

Changing Background Color

To change the background color for the unselected chip:
  • Select ChoiceChips from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the Unelected Chip Style section.
  • Find the Color property, click on the box next to White, select the color, and then click Use Selected Color or click on White and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.

Customizing Icon

To change the icon size for the unselected chip:
  • Select ChoiceChips from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the Unselected Chip Style section.
  • Find the Icon Color property, click on the box next to White, select the color, and then click Use Selected Color or click on White and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.
  • Enter the value in the Icon Size property.

Changing Elevation

To change the elevation (depth or Z-axis) of the ChoiceChips
  • Select ChoiceChips from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the Unselected Chip Style section.
  • Find the Elevation property and enter the value to see the drop shadow effect below the unselected chip. The Higher value sets the bigger size of the shadow.

Add Label Padding

Label Padding adds space around the Text of the chip.
To add a Label Padding in the chip:
  • Select ChoiceChips from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the Unselected Chip Style section.
  • Find the Label Padding property and enter the values for L(left), T(top), R(right), and B(bottom) input boxes.

Changing Text Style

To change the text style for the unselected chip:
  • Select ChoiceChips from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the Unselected Text Style section (Under the Unselected Chip Style section).
  • Click on the button below the Font Family. Choose the font from the list. If the list doesn't contain the font you are looking for, you can search for it.
  • To change the color, find the Text Color property, Click on the box next to the already selected color, select the color, and then click Use Unselected Color or click on the already selected color and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.
On running the app, the customized selected chip looks like this:

Show/Hide ChoiceChips

Please find the instructions to show/hide the widget here​
Last modified 8mo ago
Copy link
On this page
Adding a ChoiceChips to Your Project
Changing Name and Icon
Adding or Removing Option
Changing the Properties
Add Padding
Adjust the Alignment
Changing the Default Selection
Adding Space between Chips
Customizing Selected Chip
Customizing Unselected Chip
Show/Hide ChoiceChips