Missing Features and Questions About ft.Dropdown and ft.Switch

[Klu1d]

Question

Hello! I really like the new ft.Dropdown, but I’m terribly missing some features with it.

Usually, when I need a modal window, I create self.page.overlay and manually find the right position by specifying right and top. However, this complicates my code and doesn’t work very well.

ft.Dropdown would be extremely helpful for me if I had answers to these questions (including one about ft.Switch):

1. How can I properly display only the icon while keeping the width of ft.DropdownOption unchanged?

   • I would suggest an attribute like only_icon.

2. How can I completely remove trailing_icon?

   • Setting trailing_icon = None does not work.

3. Can I use spaceBetween for ft.Switch to align the toggle and label at opposite ends?

4. The animation of the ft.Switch toggle disappears. Why does this happen?

5. How can I make the input field expand to the full available space?

   • expand did not work for me.

6. How can I disable clicking on ft.DropdownOption while still handling clicks on ft.Switch correctly?

   • I would like to set ft.Dropdown.disabled = True while keeping the inner element disabled = False.

Code sample

import flet as ft

def main(page: ft.Page):
    # How can I properly display only the icon while keeping the width of ft.DropdownOption unchanged?
    # I would suggest an attribute like `only_icon`.
    q1 = ft.Dropdown(
        hint_text='Content', text_size=0, width=48,
        options=[ft.DropdownOption('dropdown option', content=ft.Switch(label='switch', label_position='left'))],
    )

    # How can I completely remove `trailing_icon`? Setting `trailing_icon = None` does not work.
    q2 = ft.Dropdown(
        hint_text='Content', trailing_icon=None, selected_trailing_icon=None,
        options=[ft.DropdownOption('dropdown option', content=ft.Switch(label='switch', label_position='left'))],
    )

    # Can I use `spaceBetween` for ft.Switch to align the toggle and label at opposite ends?
    q3 = ft.Dropdown(
        hint_text='Content',
        options=[ft.DropdownOption('dropdown option', content=ft.Switch(
            label='switch', label_position='left', # alignment='spaceBetween'
        ))],
    )

    # The animation of the ft.Switch toggle disappears.
    q4 = ft.Dropdown(
        hint_text='Content',
        options=[ft.DropdownOption('dropdown option', content=ft.Switch(label='switch', label_position='left'))],
    )

    # How can I make the input field expand to the full available space? `expand` did not work for me.
    q5 = ft.Dropdown(
        hint_text='Content', expand=True,
        options=[ft.DropdownOption('dropdown option', content=ft.Switch(label='switch', label_position='left'))],
    )

    # How can I disable clicking on `ft.DropdownOption` while still handling clicks on `ft.Switch` correctly?
    # I would like to set `ft.Dropdown.disabled = True` while keeping the inner element `disabled = False`.
    q6 = ft.Dropdown(
        hint_text='Content',
        options=[ft.DropdownOption('dropdow', disabled=True, content=ft.Switch(disabled=False, label='switch', label_position='left'))],
    )
    
    page.add(q1, q2, q3, q4, q5, q6)


ft.app(main)

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[InesaFitsner]

I can answer a few of your questions:

1. Currently, there is no menu_width property. We will add this property for next Flet update and you'll be able to set menu width.
2. You can set transparent color to any icon, like this:

    # How can I completely remove `trailing_icon`? Setting `trailing_icon = None` does not work.
    q2 = ft.Dropdown(
        hint_text="Content",
        trailing_icon=ft.Icon(ft.Icons.ABC, color=ft.Colors.TRANSPARENT),
        selected_trailing_icon=ft.Icon(ft.Icons.ABC, color=ft.Colors.TRANSPARENT),
        menu_height=500,
        options=[
            ft.DropdownOption(
                "dropdown option",
                content=ft.Switch(label="switch", label_position="left"),
            )
        ],
    )

It will not completely remove the icon, there will still be a button to press, but there will be no icon in it.
3. Instead of Switch, you can use Row with Text and Switch with no label:

    # Can I use `spaceBetween` for ft.Switch to align the toggle and label at opposite ends?
    q3 = ft.Dropdown(
        hint_text="Content",
        options=[
            ft.DropdownOption(
                "dropdown option",
                content=ft.Row(
                    alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
                    controls=[
                        ft.Text("switch"),
                        ft.Switch(
                            # label="switch",
                            label_position="left",  # alignment='spaceBetween'
                        ),
                    ],
                ),
            )
        ],
    )

5. Use float('inf') for width:

    # How can I make the input field expand to the full available space? `expand` did not work for me.
    q5 = ft.Dropdown(
        hint_text="Content",
        width=float("inf"),
        options=[
            ft.DropdownOption(
                "dropdown option",
                content=ft.Switch(label="switch", label_position="left"),
            )
        ],
    )

6. I don't think it's possible in Flet. When a parent control is disabled, its value will be propagated down to all children recursively.
   https://flet.dev/docs/controls#disabled