Skip to main content

Dropdown

A material design button for selecting from a list of items.

A dropdown lets the user select from a number of items. The dropdown shows the currently selected item as well as an arrow that opens a menu for selecting another item.

Examples

Live example

Basic dropdown

import flet as ft

def main(page: ft.Page):
def button_clicked(e):
t.value = f"Dropdown value is: {dd.value}"
page.update()

t = ft.Text()
b = ft.ElevatedButton(text="Submit", on_click=button_clicked)
dd = ft.Dropdown(
width=100,
options=[
ft.dropdown.Option("Red"),
ft.dropdown.Option("Green"),
ft.dropdown.Option("Blue"),
],
)
page.add(dd, b, t)

ft.app(target=main)
import flet as ft

def main(page: ft.Page):
page.add(
ft.Dropdown(
label="Color",
hint_text="Choose your favourite color?",
options=[
ft.dropdown.Option("Red"),
ft.dropdown.Option("Green"),
ft.dropdown.Option("Blue"),
],
autofocus=True,
)
)

ft.app(target=main)
import flet as ft

def main(page: ft.Page):
def dropdown_changed(e):
t.value = f"Dropdown changed to {dd.value}"
page.update()

t = ft.Text()
dd = ft.Dropdown(
on_change=dropdown_changed,
options=[
ft.dropdown.Option("Red"),
ft.dropdown.Option("Green"),
ft.dropdown.Option("Blue"),
],
width=200,
)
page.add(dd, t)

ft.app(target=main)

Change items in dropdown options

import flet as ft

def main(page: ft.Page):
def find_option(option_name):
for option in d.options:
if option_name == option.key:
return option
return None

def add_clicked(e):
d.options.append(ft.dropdown.Option(option_textbox.value))
d.value = option_textbox.value
option_textbox.value = ""
page.update()

def delete_clicked(e):
option = find_option(d.value)
if option != None:
d.options.remove(option)
# d.value = None
page.update()

d = ft.Dropdown()
option_textbox = ft.TextField(hint_text="Enter item name")
add = ft.ElevatedButton("Add", on_click=add_clicked)
delete = ft.OutlinedButton("Delete selected", on_click=delete_clicked)
page.add(d, ft.Row(controls=[option_textbox, add, delete]))

ft.app(target=main)

alignment

Defines how the hint or the selected item is positioned within the dropdown.

See Container.alignment property for possible values.

autofocus

True if the control will be selected as the initial focus. If there is more than one control on a page with autofocus set, then the first one added to the page will get focus.

bgcolor

Dropdown background color.

border

Border around input - InputBorder enum with one of the values: OUTLINE (default), UNDERLINE, NONE.

border_color

Border color. Could be transparent to hide the border.

border_radius

See [Container.border_radius] property docs for more information about border radius.

border_width

The width of the border in virtual pixels. Default is 1. Set to 0 to completely remove border.

color

Text color.

content_padding

The padding for the input decoration's container.

counter_style

The style to use for counter_text.

counter_text

Optional text to place below the line as a character count.

If null or an empty string and counter isn't specified, then nothing will appear in the counter's location.

dense

Whether the TextField is part of a dense form (ie, uses less vertical space).

error_style

The style to use for error_text.

error_text

Text that appears below the input border.

If non-null, the border's color animates to red and the helper_text is not shown.

filled

If True the decoration's container is filled with theme fillColor.

focused_bgcolor

Background color of dropdown in focused state.

focused_border_color

Border color in focused state.

focused_border_width

Border width in focused state.

focused_color

Text color when Dropdown is focused.

helper_style

The style to use for helper_text.

helper_text

Text that provides context about the input's value, such as how the value will be used.

If non-null, the text is displayed below the input decorator, in the same location as error_text. If a non-null error_text value is specified then the helper text is not shown.

hint_style

The style to use for hint_text.

hint_text

Text that suggests what sort of input the field accepts.

Displayed on top of the input when it's empty and either (a) label is null or (b) the input has the focus.

icon

The name of the icon to show before the input field and outside of the decoration's container.

See Container.padding for more information about padding and possible values.

label

Optional text that describes the input field.

When the input field is empty and unfocused, the label is displayed on top of the input field (i.e., at the same location on the screen where text may be entered in the input field). When the input field receives focus (or if the field is non-empty) the label moves above, either vertically adjacent to, or to the center of the input field.

label_style

The style to use for label.

options

A list of Option controls representing items in the dropdown.

prefix

Optional Control to place on the line before the input.

This can be used, for example, to add some padding to text that would otherwise be specified using prefix_text, or to add a custom control in front of the input. The control's baseline is lined up with the input baseline.

Only one of prefix and prefix_text can be specified.

The prefix appears after the prefix_icon, if both are specified.

prefix_icon

An icon that appears before the prefix or prefix_text and before the editable part of the text field, within the decoration's container.

prefix_style

The style to use for prefix_text.

prefix_text

Optional text prefix to place on the line before the input.

suffix

Optional Control to place on the line after the input.

This can be used, for example, to add some padding to the text that would otherwise be specified using suffix_text, or to add a custom control after the input. The control's baseline is lined up with the input baseline.

Only one of suffix and suffix_text can be specified.

The suffix appears before the suffix_icon, if both are specified.

suffix_icon

An icon that appears after the editable part of the text field and after the suffix or suffix_text, within the decoration's container.

suffix_style

The style to use for suffix_text.

suffix_text

Optional text suffix to place on the line after the input.

text_size

Text size in virtual pixels.

text_style

The text style to use for text in the dropdown button and the dropdown menu that appears when you tap the button.

value

key value of the selected option.

focus()

Moves focus to a Dropdown.

on_blur

Fires when the control has lost focus.

on_change

Fires when the selected item of the Dropdown has changed.

on_focus

Fires when the control has received focus.

Option properties

key

Option's key. text value will be used instead if key is not specified.

text

Option's display text. key value will be used instead if text is not specified.