How do I 'reset' an ft.Dropdown to its startup state after an option has been chosen?
I develop a Python/Flet program where I need to 'reset' the GUI in some situations to it's initial state. Clearing a ft.TextField is no problem by just setting it's value to an empty string. However - with a ft.Dropdown I was not yet successful doing so. To illustrate, I wrote a short program containing the needed elements:
dropdown = ft.Dropdown(
label = 'Examples',
expand = True,
options = [
ft.DropdownOption(text='Option 1'),
ft.DropdownOption(text='Option 2'),
ft.DropdownOption(text='Option 3'),
]
)
page.add(dropdown)
page.add(
ft.Row([
ft.FilledButton(
text='Reset',
on_click=reset,
expand = True,
)]
)
)
1.) In it's initial state, when no option has been chosen, a ft.Dropdown shows it's label-text big inside it's middle (see picture 1). Dropdown Initial State
2.) After having chosen an option, the label-text is shown small at the top and the chosen option is shown big (picture 2). Dropdown After Choice
I want to 'reset' the dropdown programatically with a click on the button, to look again as if no choice has been made (Nr. 1) like this:
def reset(e):
print('Reset')
# here I want to 'reset the Dropdown
# with something like:
# dropdown.value = ''
# or
# dropdown.reset()
Is it possible at all? I did not get any error messages.
Here is my complete code:
import flet as ft
def main(page: ft.Page):
page.title = 'Dropdown'
page.window.width = 500
page.window.height = 400
page.padding = 40
page.spacing = 30
def reset(e):
print('Reset')
dropdown.value = ft.DropdownOption(text='')
dropdown = ft.Dropdown(
label = 'Examples',
expand = True,
options = [
ft.DropdownOption(text='Option 1'),
ft.DropdownOption(text='Option 2'),
ft.DropdownOption(text='Option 3'),
]
)
page.add(dropdown)
page.add(
ft.Row([
ft.FilledButton(
text='Reset',
on_click=reset,
expand = True,
)]
)
)
ft.app(main)
I have tried setting it to an empty ft.DropdownOption, which made no difference, like this:
dropdown.value = ft.DropdownOption(text='')
Also the documentation shows there is no reset-method. I have found nothing on Google, nor here on StackOverflow.
Answer
It should work simply setting the value to None and optionally refreshing the UI:
def reset():
dropdown.value = None # Reset the dropdown to its initial state
dropdown.update() # Refresh the UI