FlutterFlow Docs
Search…
⌃K

DropDown

The DropDown widget is used to allow a user to select from a list of items. The DropDown widget shows the currently selected item and opens up a list of options when you click on it.
You can use the Dropdown widget for implementing a single selection such as language selection, shirt size, etc.
Dropdown

Adding a DropDown to Your Project

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

Changing Name

To change the name of the option:
  • Select DropDown 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 Country 1.

Adding or Removing Option

To add or remove an option from the DropDown:
  • Select DropDown 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.
  • To remove the option, simply click on the cancel icon (
    ) displayed in the Option name property.

Showing option label

The dropdown widget allows you to show a label than the actual option value. By adding the option label, you can have a simple/short name or abbreviation (which is quite easy to compare and process in the backend) instead of a tricky name (e.g., Falkland Islands (the) [Malvinas]).
For example, In a Country dropdown, you could have different Option Values to store in the backend and Option Labels to show in the dropdown list. Just like below:
Option Values
Option Labels
US
United States
IN
India
Falkland Islands (the) [Malvinas]
FK
To show option label:
  • Select the DropDown widget, move to the properties panel, and turn on the Add Option Labels toggle.
  • Enter the value in the Define Option Values and Define Options Labels. Click Add Option (below the Define Option Values) to add more values and labels.
  • You must also set the Data Type for the values. For example, if the values you are going to store are in numbers like 1,2,3, set it to Integer.
Showing option label

Showing Options From Firestore Data

You may be using the Firstore to store your app data in the collection-document model. Let's see how you can show dropdown options from the Firestore data.

1. Prerequisites

Before we fetch data from Firestore, make sure you incorporate all the mentioned prerequisites to have some data in Firestore.
The Dropdown widget shows options only from the Field that has Field Type set to List/Array in Firestore.
A record/document inside the Todos collection should look like the following:

2. Querying a Single Document

Querying a single document on a page helps you retrieve the list/array field that contains multiple values.
To query a single document on page:
  • Select a page.
  • Click on the Backend Query tab (on the right side of your screen).
  • Set the Query Type to Query Collection.
  • Scroll down to find the Collection dropdown and change it to your collection.
  • Set the Query Type to Single Documents.
  • Click on the + Filter to find the exact document/record that has multiple values.
  • Find the Field Name and click on the Unset and select a field on which you would like to apply the filter.
  • Find Relation dropdown, click on the Unset and choose the relation amongst the list.
  • Find the Value property and set it to an appropriate value.
  • Click Save.

3. Showing Values in Dropdown

To show multiple values from the field as options into the dropdown:
  • Select the Dropdown widget from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the Define Options section.
  • Click on the Set from Variable on the right. (This will open a new panel)
    • Find the Source dropdown, click on unset and select the [collection] Record (from PageName).
    • Under the Available Options, click on Unset and select the field that holds the multiple values.
    • Click Save.
Here's how it looks when you run your app:

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 DropDown 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 Country 3 will select the third option in the following visual.

Changing The Dropdown Text Style

To change the text style for the dropdown options:
  • Select DropDown 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 DropDown Text Style section.
  • Find the Theme Text Style dropdown. Click on Dropdown and select any font from the list.
  • Click on the button below the Font Family. Choose a font from the list. If the list doesn't contain the font you are looking for, you can search for it.
  • Find the Font Weight dropdown and select the appropriate weight.
  • To change the size, enter the value in the Font Size property.
  • Now, find the Text Color property. 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.
  • Make it Italic by marking the Italic checkbox.

Changing The DropDown Dimensions

To change the height and width:
  • Select the DropDown 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 DropDown Properties section.
  • Find the Width and Height.
  • There are three ways to set the dimensions:
    • To set to an exact size, select PX and enter the desired values.
    • To set the dimensions as a % of the screen size, select % and enter the desired value.
    • To make the height or width of the DropDown's the screen's height or width, just click on the infinity icon (
      ).

Adding Margin

Adding a margin adds a space between the DropDown's text and border.
To add a margin:
  • Select the DropDown 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 DropDown Properties section.
  • Find the Margin property and change the values.

Changing The Dropdown Background Color

To change the background color of the dropdown:
  • Select the DropDown 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 DropDown Style section.
  • Find the Fill 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.

Adding A Border

Here's an example of how you can add a border around the DropDown:
  • Select the DropDown 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 DropDown Style section.
  • Here are the further instructions on adding a border.

Hiding the Underline

To hide the underline below the DropDown's options text:
  • Select the DropDown 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 DropDown Style section.
  • Checkmark the Hides Underline property (click on it).

Changing The Dropdown Icon

To change the default arrow icon:
  • Select the DropDown 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 Icon section.
  • Click on the None button then search and select the icon name with arrow_down_drop_circle.
  • Set the Icon Size property to 22.
  • To change the color, 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.

Set color dynamically

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

Trigger action on change

Show/Hide DropDown

Please find the instructions to show/hide the widget here