The Dropdown component in Flet provides a user-friendly way to select an option from a predefined list. Users can filter the list based on text input or search for a specific item within the menu.

Update Notice

Since version 0.27.0, Flet has replaced the previous DropdownButton with the DropdownMenu Flutter widget, which follows the Material 3 design system. Some properties from the old implementation have been deprecated but remain in the codebase as "stubbed"—meaning they exist but no longer function.

The old Dropdown control is still available as DropdownM2 but will be removed in Flet 0.30.0.

Usage Examples

Dropdown with Colors

import flet as ft

def main(page: ft.Page):
    colors = [
        ft.Colors.RED,
        ft.colors.BLUE,
        ft.Colors.YELLOW,
        ft.Colors.PURPLE,
        ft.Colors.LIME,
    ]

    def get_options():
        return [
            ft.DropdownOption(
                key=color.value,
                content=ft.Text(value=color.value, color=color),
            )
            for color in colors
        ]

    def dropdown_changed(e):
        e.control.color = e.control.value
        page.update()

    dd = ft.Dropdown(
        editable=True,
        label="Color",
        options=get_options(),
        on_change=dropdown_changed,
    )
    page.add(dd)

ft.app(main)

Dropdown with Icons

import flet as ft

def main(page: ft.Page):
    icons = [
        {"name": "Smile", "icon_name": ft.Icons.SENTIMENT_SATISFIED_OUTLINED},
        {"name": "Cloud", "icon_name": ft.Icons.CLOUD_OUTLINED},
        {"name": "Brush", "icon_name": ft.Icons.BRUSH_OUTLINED},
        {"name": "Heart", "icon_name": ft.Icons.FAVORITE},
    ]

    def get_options():
        return [
            ft.DropdownOption(key=icon["name"], leading_icon=icon["icon_name"])
            for icon in icons
        ]

    dd = ft.Dropdown(
        border=ft.InputBorder.UNDERLINE,
        enable_filter=True,
        editable=True,
        leading_icon=ft.Icons.SEARCH,
        label="Icon",
        options=get_options(),
    )
    page.add(dd)

ft.app(main)

Properties

  • autofocus: Selects the control as the initial focus.

  • bgcolor: Background color of the dropdown menu.

  • border: Defines the border type (e.g., InputBorder.OUTLINE).

  • border_color: Sets the color of the border.

  • border_radius: Adjusts the corner radius of the dropdown.

  • border_width: Defines the width of the border (default: 1).

  • color: Text color of the dropdown.

  • content_padding: Padding inside the dropdown input field.

  • dense: Reduces vertical space if set to True.

  • elevation: Controls the menu elevation (default: 8).

  • enable_filter: Enables filtering of options based on text input.

  • enable_search: Highlights the first matching item in the list.

  • error_text: Displays an error message below the dropdown.

  • fill_color: Sets the background color of the input field.

  • focused_border_color: Changes border color when focused.

  • focused_border_width: Changes border width when focused.

  • helper_text: Provides additional context about the input.

  • hint_text: Displays placeholder text when input is empty.

  • label: Displays a label for the input field.

  • leading_icon: Icon before the text input field.

  • max_menu_height: Sets the maximum dropdown height.

  • options: A list of DropdownOption items.

  • selected_trailing_icon: Icon that appears when an option is selected.

  • text_align: Aligns text inside the dropdown.

  • width: Determines dropdown width.

  • value: Holds the key of the selected option.

Methods

  • focus(): Moves focus to this dropdown.

Events

  • on_blur: Triggered when the control loses focus.

  • on_change: Triggered when the selected item changes.

  • on_focus: Triggered when the control gains focus.

Deprecated Properties & Events

The following properties and events have been deprecated in Dropdown since version 0.27.0 and will be removed in 0.30.0. Using them will not break your code, but they no longer function:

  • alignment

  • counter, counter_text, counter_style

  • disabled_hint_content

  • enable_feedback

  • focused_bgcolor, focused_color

  • hint_content

  • icon, icon_content, icon_size

  • item_height

  • options_fill_horizontally

  • padding

  • prefix, prefix_icon, prefix_style, prefix_text

  • select_icon, select_icon_enabled_color, select_icon_disabled_color, select_icon_size

  • suffix, suffix_icon, suffix_style, suffix_text

  • on_click

Conclusion

The Dropdown component in Flet provides a robust way to offer selectable options in a UI. The transition to DropdownMenu in version 0.27.0 aligns with Material 3 design principles, offering a more modern and flexible user experience. Developers should be aware of deprecated features and migrate their code before version 0.30.0 to avoid compatibility issues.

For further details, refer to the Flet documentation.

Copyright Statement: Unless stated otherwise, all articles are original to this site, please credit the source when sharing.

Article link:http://pybeginners.com/python-flet/flet-dropdown-component/

License Agreement:Attribution-NonCommercial 4.0 International License