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 this 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

The background color of both the dropdown button and it's menu.

To set a different background color for the dropdown button, use fill_color or focused_bgcolor properties.

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).

elevation

The dropdown's elevation. Defaults to 8.

enable_feedback

Whether detected gestures should provide acoustic and/or haptic feedback. On Android, for example, setting this to True produce a click sound and a long-press will produce a short vibration.

Defaults to True.

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 fill_color.

If filled=None(default), then it is implicitly set to True when at least one of the following is not None: fill_color, focused_bgcolor and bgcolor.

fill_color

Background color of the dropdown button. Will not be visible if filled=False.

focused_bgcolor

Background color of dropdown in focused state. Will not be visible if filled=False.

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_content

A placeholder control for the dropdown's value that is displayed when value is None.

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.

icon_content

The control to use for the drop-down button's icon. Defaults to an Icon(ft.icons.ARROW_DROP_DOWN).

icon_enabled_color

The color of any Icon descendant of icon_content if this button is enabled.

icon_disabled_color

The color of any Icon descendant of icon_content if this button is disabled.

icon_size

The size of the icon button which wraps icon_content. Defaults to 24.0.

item_height

The height of the items/options in the dropdown menu.

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.

max_menu_height

The maximum height of the dropdown menu.

options

A list of Option controls representing items in this dropdown.

padding

The padding around the visible portion of this 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 this dropdown button and the dropdown menu that appears when you tap the button.

value

key value of the selected option.

focus()

Moves focus to this dropdown.

on_blur

Fires when the control has lost focus.

on_change

Fires when the selected item of this dropdown has changed.

on_click

Fires when this dropdown is clicked.

on_focus

Fires when the control has received focus.

Option properties

alignment

Defines the alignment of this option in it's container. See Container.alignment for possible values.

Defaults to alignment.center_left.

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.

Option Events

on_click

Fires when this option is clicked.