DropdownM2

Examples#

Basic Example#

import flet as ft


def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.DARK

    def handle_button_click(e):
        message.value = f"Dropdown value is:  {dd.value}"
        page.update()

    page.add(
        dd := ft.DropdownM2(
            width=100,
            options=[
                ft.dropdownm2.Option("Red"),
                ft.dropdownm2.Option("Green"),
                ft.dropdownm2.Option("Blue"),
            ],
        ),
        ft.ElevatedButton(content="Submit", on_click=handle_button_click),
        message := ft.Text(),
    )


ft.run(main)

import flet as ft


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


ft.run(main)

Handling events#

import flet as ft


def main(page: ft.Page):
    def dropdown_changed(e: ft.Event[ft.DropdownM2]):
        message.value = f"Dropdown changed to {e.control.value}"
        page.update()

    page.add(
        ft.DropdownM2(
            width=200,
            color=ft.Colors.BLUE_GREY_700,
            on_change=dropdown_changed,
            options=[
                ft.dropdownm2.Option("Red"),
                ft.dropdownm2.Option("Green"),
                ft.dropdownm2.Option("Blue"),
            ],
        ),
        message := ft.Text(),
    )


ft.run(main)

Add and delete options#

import flet as ft


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

    def handle_addition(e: ft.Event[ft.ElevatedButton]):
        dropdown.options.append(ft.dropdownm2.Option(input_field.value))
        dropdown.value = input_field.value
        input_field.value = ""
        page.update()

    def handle_deletion(e: ft.Event[ft.OutlinedButton]):
        option = find_option(d.value)
        if option is not None:
            dropdown.options.remove(option)
            # d.value = None
            page.update()

    page.add(
        dropdown := ft.DropdownM2(options=[], color=ft.Colors.BLUE_400),
        ft.Row(
            controls=[
                input_field := ft.TextField(hint_text="Enter item name"),
                ft.ElevatedButton(content="Add", on_click=handle_addition),
                ft.OutlinedButton(
                    content="Delete selected",
                    on_click=handle_deletion,
                    style=ft.ButtonStyle(bgcolor=ft.Colors.RED),
                ),
            ]
        ),
    )


ft.run(main)

DropdownM2 #

Bases: FormFieldControl

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.

align_label_with_hint #

align_label_with_hint: bool | None = None

TBD

alignment #

alignment: Alignment | None = None

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

animate_offset #

animate_offset: AnimationValue | None = None

Enables implicit animation of the offset property.

More information here.

animate_opacity #

animate_opacity: AnimationValue | None = None

Enables implicit animation of the opacity property.

More information here.

animate_position #

animate_position: AnimationValue | None = None

Enables implicit animation of the positioning properties (left, right, top and bottom).

More information here.

animate_rotation #

animate_rotation: AnimationValue | None = None

Enables implicit animation of the rotate property.

More information here.

animate_scale #

animate_scale: AnimationValue | None = None

Enables implicit animation of the scale property.

More information here.

animate_size #

animate_size: AnimationValue | None = None

TBD

aspect_ratio #

aspect_ratio: Number | None = None

TBD

autofocus #

autofocus: bool = False

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.

badge #

badge: BadgeValue | None = None

A badge to show on top of this control.

bgcolor #

bgcolor: ColorValue | None = None

TextField background color. Will not be visible if filled=False.

border #

border: InputBorder = OUTLINE

Border around input.

border_color #

border_color: ColorValue | None = None

Border color. Could be transparent to hide the border.

border_radius #

border_radius: BorderRadiusValue | None = None

border_width #

border_width: Number | None = None

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

Defaults to 1.

bottom #

bottom: Number | None = None

The distance that the child's bottom edge is inset from the bottom of the stack.

Note

Effective only if this control is a descendant of one of the following: Stack control, Page.overlay list.

col #

col: ResponsiveNumber = 12

If a parent of this control is a ResponsiveRow, this property is used to determine how many virtual columns of a screen this control will span.

Can be a number or a dictionary configured to have a different value for specific breakpoints, for example col={"sm": 6}.

This control spans the 12 virtual columns by default.

Dimensions

Breakpoint	Dimension
xs	<576px
sm	≥576px
md	≥768px
lg	≥992px
xl	≥1200px
xxl	≥1400px

collapsed #

collapsed: bool | None = None

TBD

color #

color: ColorValue | None = None

Text color.

content_padding #

content_padding: PaddingValue | None = None

The padding for the input decoration's container.

counter #

counter: StrOrControl | None = None

A Control to place below the line as a character count.

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

counter_style #

counter_style: TextStyle | None = None

The TextStyle to use for counter_text.

data #

data: Any = skip_field()

Arbitrary data of any type.

dense #

dense: bool | None = None

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

disabled #

disabled: bool = False

Every control has disabled property which is False by default - control and all its children are enabled.

Note

The value of this property will be propagated down to all children controls recursively.

Example

For example, if you have a form with multiple entry controls you can disable them all together by disabling container:

ft.Column(
    disabled = True,
    controls=[
        ft.TextField(),
        ft.TextField()
    ]
)

disabled_hint_content #

disabled_hint_content: Control | None = None

A placeholder Control for the dropdown's value that is displayed when value is None and the dropdown is disabled.

elevation #

elevation: Number = 8

The dropdown's elevation.

enable_feedback #

enable_feedback: bool | None = None

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.

error #

error: StrOrControl | None = None

Text that appears below the input border.

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

error_max_lines #

error_max_lines: int | None = None

TBD

error_style #

error_style: TextStyle | None = None

The TextStyle to use for error_text.

expand #

expand: bool | int | None = None

Specifies whether/how this control should expand to fill available space in its parent layout.

More information here.

Note

Has effect only if the direct parent of this control is one of the following controls, or their subclasses: Column, Row, View, Page.

expand_loose #

expand_loose: bool = False

Allows the control to expand along the main axis if space is available, but does not require it to fill all available space.

More information here.

Note

If expand_loose is True, it will have effect only if:

expand is not None and
the direct parent of this control is one of the following controls, or their subclasses: Column, Row, View, Page.

fill_color #

fill_color: ColorValue | None = None

Background color of TextField. Will not be visible if filled=False.

filled #

filled: bool | None = None

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, hover_color and bgcolor.

fit_parent_size #

fit_parent_size: bool | None = None

TBD

focus_color #

focus_color: ColorValue | None = None

TBD

focused_bgcolor #

focused_bgcolor: ColorValue | None = None

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

focused_border_color #

focused_border_color: ColorValue | None = None

Border color in focused state.

focused_border_width #

focused_border_width: Number | None = None

Border width in focused state.

focused_color #

focused_color: ColorValue | None = None

Text color when TextField is focused.

height #

height: Number | None = None

Imposed Control height in virtual pixels.

helper #

helper: StrOrControl | None = None

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.

helper_max_lines #

helper_max_lines: int | None = None

TBD

helper_style #

helper_style: TextStyle | None = None

The TextStyle to use for helper_text.

hint_content #

hint_content: Control | None = None

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

hint_fade_duration #

hint_fade_duration: DurationValue | None = None

TBD

hint_max_lines #

hint_max_lines: int | None = None

TBD

hint_style #

hint_style: TextStyle | None = None

The TextStyle to use for hint_text.

hint_text #

hint_text: str | None = None

Text that suggests what sort of input the field accepts.

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

hover_color #

hover_color: ColorValue | None = None

Background color of TextField when hovered. Will not be visible if filled=False.

icon #

icon: IconValueOrControl | None = None

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

item_height #

item_height: Number | None = None

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

key #

key: (
    str | int | float | bool | ValueKey | ScrollKey | None
) = None

label #

label: StrOrControl | None = None

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 #

label_style: TextStyle | None = None

The TextStyle to use for label.

left #

left: Number | None = None

The distance that the child's left edge is inset from the left of the stack.

Note

Effective only if this control is a descendant of one of the following: Stack control, Page.overlay list.

max_menu_height #

max_menu_height: Number | None = None

The maximum height of the dropdown menu.

offset #

offset: OffsetValue | None = None

Applies a translation transformation before painting the control.

The translation is expressed as an Offset scaled to the control's size. So, Offset(x=0.25, y=0), for example, will result in a horizontal translation of one quarter the width of this control.

Example

The following example displays container at 0, 0 top left corner of a stack as transform applies -1 * 100, -1 * 100 (offset * control's size) horizontal and vertical translations to the control:

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Stack(
            width=1000,
            height=1000,
            controls=[
                ft.Container(
                    bgcolor="red",
                    width=100,
                    height=100,
                    left=100,
                    top=100,
                    offset=ft.Offset(-1, -1),
                )
            ],
        )
    )

ft.run(main)

on_animation_end #

on_animation_end: (
    ControlEventHandler[ConstrainedControl] | None
) = None

Called when animation completes.

Can be used to chain multiple animations.

The data property of the event handler argument contains the name of the animation.

More information here.

on_blur #

on_blur: ControlEventHandler[DropdownM2] | None = None

Called when the control has lost focus.

on_change #

on_change: ControlEventHandler[DropdownM2] | None = None

Called when the selected item of this dropdown has changed.

on_click #

on_click: ControlEventHandler[DropdownM2] | None = None

Called when this dropdown is clicked.

on_focus #

on_focus: ControlEventHandler[DropdownM2] | None = None

Called when the control has received focus.

opacity #

opacity: Number = 1.0

Defines the transparency of the control.

Value ranges from 0.0 (completely transparent) to 1.0 (completely opaque without any transparency).

options #

options: list[Option] | None = None

A list of Option controls representing items in this dropdown.

options_fill_horizontally #

options_fill_horizontally: bool = True

Whether the dropdown's inner contents to horizontally fill its parent. By default this button's inner width is the minimum size of its content.

If True, the inner width is expanded to fill its surrounding container.

padding #

padding: PaddingValue | None = None

The padding around the visible portion of this dropdown.

page #

page: Page | PageView | None

The page (of type Page or PageView) to which this control belongs to.

parent #

parent: BaseControl | None

The direct ancestor(parent) of this control.

It defaults to None and will only have a value when this control is mounted (added to the page tree).

The Page control (which is the root of the tree) is an exception - it always has parent=None.

prefix #

prefix: StrOrControl | None = None

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 #

prefix_icon: IconValueOrControl | None = None

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_icon_size_constraints #

prefix_icon_size_constraints: BoxConstraints | None = None

TBD

prefix_style #

prefix_style: TextStyle | None = None

The TextStyle to use for prefix_text.

right #

right: Number | None = None

The distance that the child's right edge is inset from the right of the stack.

Note

Effective only if this control is a descendant of one of the following: Stack control, Page.overlay list.

rotate #

rotate: RotateValue | None = None

Transforms this control using a rotation around its center.

The value of rotate property could be one of the following types:

number - a rotation in clockwise radians. Full circle 360° is math.pi * 2 radians, 90° is pi / 2, 45° is pi / 4, etc.
Rotate - allows to specify rotation angle as well as alignment - the location of rotation center.

Example

For example:

ft.Image(
    src="https://picsum.photos/100/100",
    width=100,
    height=100,
    border_radius=5,
    rotate=Rotate(angle=0.25 * pi, alignment=ft.Alignment.CENTER_LEFT)
)

rtl #

rtl: bool = False

Whether the text direction of the control should be right-to-left (RTL).

scale #

scale: ScaleValue | None = None

Scales this control along the 2D plane. Default scale factor is 1.0, meaning no-scale.

Setting this property to 0.5, for example, makes this control twice smaller, while 2.0 makes it twice larger.

Different scale multipliers can be specified for x and y axis, by setting Control.scale property to an instance of Scale class. Either scale or scale_x and scale_y could be specified, but not all of them.

Example

ft.Image(
    src="https://picsum.photos/100/100",
    width=100,
    height=100,
    border_radius=5,
    scale=ft.Scale(scale_x=2, scale_y=0.5)
)

select_icon #

select_icon: IconValueOrControl | None = None

The name of the icon or Control to use for the drop-down select button's icon.

Defaults to Icon(ft.Icons.ARROW_DROP_DOWN).

select_icon_disabled_color #

select_icon_disabled_color: ColorValue | None = None

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

select_icon_enabled_color #

select_icon_enabled_color: ColorValue | None = None

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

select_icon_size #

select_icon_size: Number = 24.0

The size of the icon button which wraps select_icon.

size_constraints #

size_constraints: BoxConstraints | None = None

TBD

suffix #

suffix: StrOrControl | None = None

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 #

suffix_icon: IconValueOrControl | None = None

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_icon_size_constraints #

suffix_icon_size_constraints: BoxConstraints | None = None

TBD

suffix_style #

suffix_style: TextStyle | None = None

The TextStyle to use for suffix_text.

text_size #

text_size: Number | None = None

Text size in virtual pixels.

text_style #

text_style: TextStyle = field(
    default_factory=lambda: TextStyle()
)

The TextStyle to use for the text being edited.

text_vertical_align #

text_vertical_align: VerticalAlignment | Number | None = (
    None
)

Defines how the text should be aligned vertically.

Value can either be a number ranging from -1.0 (topmost location) to 1.0 (bottommost location) or of type VerticalAlignment Defaults to VerticalAlignment.CENTER.

tooltip #

tooltip: TooltipValue | None = None

The tooltip ot show when this control is hovered over.

top #

top: Number | None = None

The distance that the child's top edge is inset from the top of the stack.

Note

Effective only if this control is a descendant of one of the following: Stack control, Page.overlay list.

value #

value: str | None = None

key value of the selected option.

visible #

visible: bool = True

Every control has visible property which is True by default - control is rendered on the page. Setting visible to False completely prevents control (and all its children if any) from rendering on a page canvas. Hidden controls cannot be focused or selected with a keyboard or mouse and they do not emit any events.

width #

width: Number | None = None

Imposed Control width in virtual pixels.

before_event #

before_event(e: ControlEvent)

before_update #

before_update()

clean #

clean() -> None

did_mount #

did_mount()

focus #

focus()

focus_async #

focus_async()

init #

init()

is_isolated #

is_isolated()

update #

update() -> None

will_unmount #

will_unmount()

DropdownM2

Examples#

Basic Example#

Dropdown with label and hint#

Handling events#

Add and delete options#

DropdownM2 #

align_label_with_hint #

alignment #

animate_offset #

animate_opacity #

animate_position #

animate_rotation #

animate_scale #

animate_size #

aspect_ratio #

autofocus #

badge #

bgcolor #

border #

border_color #

border_radius #

border_width #

bottom #

col #

collapsed #

color #

content_padding #

counter #

counter_style #

data #

dense #

disabled #

disabled_hint_content #

elevation #

enable_feedback #

error #

error_max_lines #

error_style #

expand #

expand_loose #

fill_color #

filled #

fit_parent_size #

focus_color #

focused_bgcolor #

focused_border_color #

focused_border_width #

focused_color #

height #

helper #

helper_max_lines #

helper_style #

hint_content #

hint_fade_duration #

hint_max_lines #

hint_style #

hint_text #

hover_color #

icon #

item_height #

key #

label #

label_style #

left #

max_menu_height #

offset #

on_animation_end #

on_blur #

on_change #

on_click #

on_focus #

opacity #

options #

options_fill_horizontally #

padding #

page #

parent #

prefix #

prefix_icon #