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.Button(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.Button]):
        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(dropdown.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.Button(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 #

align: Alignment | None = None

Alignment of the control within its parent.

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

animate_align: AnimationValue | None = None

Enables implicit animation of the [align][flet.LayoutControl.] property.

More information here.

animate_margin #

animate_margin: AnimationValue | None = None

Enables implicit animation of the [margin][flet.LayoutControl.] property.

More information here.

animate_offset #

animate_offset: AnimationValue | None = None

Enables implicit animation of the [offset][flet.LayoutControl.] property.

More information here.

animate_opacity #

animate_opacity: AnimationValue | None = None

Enables implicit animation of the [opacity][flet.LayoutControl.] property.

More information here.

animate_position #

animate_position: AnimationValue | None = None

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

More information here.

animate_rotation #

animate_rotation: AnimationValue | None = None

Enables implicit animation of the [rotate][flet.LayoutControl.] property.

More information here.

animate_scale #

animate_scale: AnimationValue | None = None

Enables implicit animation of the [scale][flet.LayoutControl.] property.

More information here.

animate_size #

animate_size: AnimationValue | None = None

TBD

aspect_ratio #

aspect_ratio: Number | None = None

The aspect ratio of the control. It is defined as the ratio of the width to the height.

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.

Note

Will not be visible if [filled][flet.FormFieldControl.] is False.

border #

border: InputBorder = OUTLINE

Border around input.

border_color #

border_color: ColorValue | None = None

The border color.

Tip

Set to [Colors.TRANSPARENT][flet.] to invisible/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.

Defaults to 1.

Tip

Set to 0 to completely remove the border.

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][flet.] control, [Page.overlay][flet.] list.

col #

col: ResponsiveNumber = 12

If a parent of this control is a [ResponsiveRow][flet.], 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 then nothing will appear in the counter's location.

counter_style #

counter_style: TextStyle | None = None

The text style to use for counter.

data #

data: Any = skip_field()

Arbitrary data of any type.

dense #

dense: bool | None = None

Whether this control 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][flet.FormFieldControl.] is not shown.

error_max_lines #

error_max_lines: int | None = None

TBD

error_style #

error_style: TextStyle | None = None

The text style to use for [error][flet.FormFieldControl.].

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][flet.], [Row][flet.], [View][flet.], [Page][flet.].

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][flet.], [Row][flet.], [View][flet.], [Page][flet.].

fill_color #

fill_color: ColorValue | None = None

Background color of TextField.

Note

Will not be visible if [filled][flet.FormFieldControl.] is False.

filled #

filled: bool | None = None

If True the decoration's container is filled with theme [fill_color][flet.FormFieldControl.].

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

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 in focused state.

Note

Will not be visible if [filled][flet.FormFieldControl.] is 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

The text's color when 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][flet.FormFieldControl.]. If a non-null [error][flet.FormFieldControl.] 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 text style to use for [helper][flet.FormFieldControl.].

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 text style to use for [hint_text][flet.FormFieldControl.].

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][flet.FormFieldControl.] is None or (b) the input has the focus.

hover_color #

hover_color: ColorValue | None = None

Background color of TextField when hovered.

Note

Will not be visible if [filled][flet.FormFieldControl.] is False.

icon #

icon: IconDataOrControl | 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: KeyValue | 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 text style 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][flet.] control, [Page.overlay][flet.] list.

margin #

margin: MarginValue | None = None

Sets the margin of the control.

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[LayoutControl] | 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 | BasePage | None

The page 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

A Control to place on the line before the input.

It appears after the [prefix_icon][flet.FormFieldControl.], if both are specified.

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

prefix_icon #

prefix_icon: IconDataOrControl | None = None

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

If [prefix][flet.FormFieldControl.] is specified and visible, this icon will appear to its left.

prefix_icon_size_constraints #

prefix_icon_size_constraints: BoxConstraints | None = None

TBD

prefix_style #

prefix_style: TextStyle | None = None

The text style to use for [prefix][flet.FormFieldControl.].

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][flet.] control, [Page.overlay][flet.] 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: IconDataOrControl | 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

A Control to place on the line after the input.

It appears before the [suffix_icon][flet.FormFieldControl.], if both are specified.

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

suffix_icon #

suffix_icon: IconDataOrControl | None = None

An icon that appears after the editable part of the text field and after the [suffix][flet.FormFieldControl.], 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 text style to use for [suffix][flet.FormFieldControl.].

text_size #

text_size: Number | None = None

Text size in virtual pixels.

text_style #

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

The [TextStyle][flet.] 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][flet.] 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][flet.] control, [Page.overlay][flet.] 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()

build #

build()

Called once during control initialization to define its child controls. self.page is available in this method.

clean #

clean() -> None

did_mount #

did_mount()

focus #

focus()

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 #

align_label_with_hint #

alignment #

animate_align #

animate_margin #

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 #

margin #

max_menu_height #

offset #

on_animation_end #

on_blur #

on_change #

on_click #

on_focus #

opacity #

options #

options_fill_horizontally #

padding #