I developed a simple app with a button using Python Flet (ver 0.21.2). Once the button is clicked, it adds to the page a row with a textfield and a dropdown control. Here is the full code:

import flet as ft

def main(page: ft.Page):    
    def show_dd_on_click(e):
        page_content.controls.append(
            ft.Row(
                    [
                        ft.TextField(label="Field Name", expand=True, height=40,border_color = ft.colors.BLUE_500, tooltip="Name of the column"),
                        ft.Dropdown(
                            border_color = ft.colors.BLUE_500,
                            width= 150,
                            height=40,
                            label="Data Type",
                            tooltip="Data type of the column",
                            options=[
                                ft.dropdown.Option("Option_1"),
                                ft.dropdown.Option("Option_2"),
                                ft.dropdown.Option("Option_3"),
                                ft.dropdown.Option("Option_4"),
                                ft.dropdown.Option("Option_5"),
                            ],
                        ),
                    ],
                ),
        )
        page.update()


    page.theme = ft.Theme(color_scheme_seed=ft.colors.BLUE)
    page.theme_mode = ft.ThemeMode.LIGHT
    page_content= ft.Column([], horizontal_alignment=ft.CrossAxisAlignment.CENTER)
    page.add(
        ft.Column(
            [
                ft.ElevatedButton("Show DD", on_click=show_dd_on_click),
                page_content,
            ],
            horizontal_alignment=ft.CrossAxisAlignment.CENTER,
        )        
    )

ft.app(target=main, assets_dir="\assets")

Unexpectedly, once the user selects a dropdown option,

the selected value is not visible. I guess it depends on the theming / color scheme set. I tried modifying the dropdown attributes values, but nothing changed. How can I make the option visible without changing the theme and the current color scheme?

I developed a simple app with a button using Python Flet (ver 0.21.2). Once the button is clicked, it adds to the page a row with a textfield and a dropdown control. Here is the full code:

import flet as ft

def main(page: ft.Page):    
    def show_dd_on_click(e):
        page_content.controls.append(
            ft.Row(
                    [
                        ft.TextField(label="Field Name", expand=True, height=40,border_color = ft.colors.BLUE_500, tooltip="Name of the column"),
                        ft.Dropdown(
                            border_color = ft.colors.BLUE_500,
                            width= 150,
                            height=40,
                            label="Data Type",
                            tooltip="Data type of the column",
                            options=[
                                ft.dropdown.Option("Option_1"),
                                ft.dropdown.Option("Option_2"),
                                ft.dropdown.Option("Option_3"),
                                ft.dropdown.Option("Option_4"),
                                ft.dropdown.Option("Option_5"),
                            ],
                        ),
                    ],
                ),
        )
        page.update()


    page.theme = ft.Theme(color_scheme_seed=ft.colors.BLUE)
    page.theme_mode = ft.ThemeMode.LIGHT
    page_content= ft.Column([], horizontal_alignment=ft.CrossAxisAlignment.CENTER)
    page.add(
        ft.Column(
            [
                ft.ElevatedButton("Show DD", on_click=show_dd_on_click),
                page_content,
            ],
            horizontal_alignment=ft.CrossAxisAlignment.CENTER,
        )        
    )

ft.app(target=main, assets_dir="\assets")

Unexpectedly, once the user selects a dropdown option,

the selected value is not visible. I guess it depends on the theming / color scheme set. I tried modifying the dropdown attributes values, but nothing changed. How can I make the option visible without changing the theme and the current color scheme?

• flutter
• flet

Share Improve this question Follow asked Mar 26 at 18:16 eljambaeljamba 39722 gold badges33 silver badges1616 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

The selected option was not visible because the default padding in the dropdown was large enough that it was not visible with the dropdown height you specified.

I added content_padding=8 in Dropdown control and the selected option became visible. If the padding feels too cramped, increase the height of the dropdown. The visibility of selected option has nothing to do with your theme.

Full code:

import flet as ft

def main(page: ft.Page):    
    def show_dd_on_click(e):
        page_content.controls.append(
            ft.Row(
                    [
                        ft.TextField(label="Field Name", expand=True, height=40,border_color = ft.colors.BLUE_500, tooltip="Name of the column"),
                        ft.Dropdown(
                            border_color = ft.colors.BLUE_500,
                            content_padding=8,
                            width= 150,
                            height=40,
                            label="Data Type",
                            tooltip="Data type of the column",
                            options=[
                                ft.dropdown.Option("Option_1"),
                                ft.dropdown.Option("Option_2"),
                                ft.dropdown.Option("Option_3"),
                                ft.dropdown.Option("Option_4"),
                                ft.dropdown.Option("Option_5"),
                            ],
                        ),
                    ],
                ),
        )
        page.update()


    page.theme = ft.Theme(color_scheme_seed=ft.colors.BLUE)
    page.theme_mode = ft.ThemeMode.LIGHT
    page_content= ft.Column([], horizontal_alignment=ft.CrossAxisAlignment.CENTER)
    page.add(
        ft.Column(
            [
                ft.ElevatedButton("Show DD", on_click=show_dd_on_click),
                page_content,
            ],
            horizontal_alignment=ft.CrossAxisAlignment.CENTER,
        )        
    )

ft.app(target=main, assets_dir="\assets")