v1: Add Dropdown.text property, add on_select event (#5593)

* Remove before_update method from Dropdown

Deleted the before_update method in the Dropdown class, which previously set expand_loose based on expand. This change may address redundant or obsolete logic related to display issues.

* Add reactive dropdown example using Flet

Introduces a new example demonstrating a reactive dropdown control in Flet. The example uses a dataclass to manage state and updates the selected color dynamically.

* Refactor Dropdown event and property names

Renamed Dropdown event handlers from on_change to on_select and on_text_change to on_change for clarity and consistency. Updated related property names from 'value' to 'text' where appropriate, and improved documentation for several Dropdown properties. Added a new example demonstrating both select and change events.

* Copilot fix: border_radius docs

Co-authored-by: Copilot <[email protected]>

* Revert "Copilot fix: border_radius docs"

This reverts commit 536e8b3.

* Clarify border_radius docstring in Dropdown

Expanded the docstring for the border_radius property to specify accepted value types and default behavior when set to None.

* Do not implicitly create `storage/data` and `temp` dir on flet run

* Add CPU-bound async examples to Python cookbook

Introduces three new example scripts demonstrating CPU-bound task handling in Flet apps: cpu_bound_callback.py (thread-safe UI updates via callback), cpu_bound_queue.py (progress updates via asyncio.Queue), and cpu_bound_png_stream.py (streaming PNG frames from a producer thread to an async consumer). These examples illustrate best practices for integrating blocking operations with asyncio and Flet UI.

---------

Co-authored-by: Copilot <[email protected]>

Author: FeodorFitsner

packages/flet/lib/src/controls/dropdown.dart

@@ -22,8 +22,7 @@ class _DropdownControlState extends State<DropdownControl> {
     super.initState();
     _focusNode = FocusNode();
 
-    _controller =
-        TextEditingController(text: widget.control.getString("value"));
+    _controller = TextEditingController(text: widget.control.getString("text"));
     _focusNode.addListener(_onFocusChange);
     widget.control.addInvokeMethodListener(_invokeMethod);
 
@@ -32,9 +31,9 @@ class _DropdownControlState extends State<DropdownControl> {
 
   void _onTextChange() {
     debugPrint("Typed text: ${_controller.text}");
-    if (_controller.text != widget.control.getString("value")) {
-      widget.control.updateProperties({"value": _controller.text});
-      widget.control.triggerEvent("text_change", _controller.text);
+    if (_controller.text != widget.control.getString("text")) {
+      widget.control.updateProperties({"text": _controller.text});
+      widget.control.triggerEvent("change", _controller.text);
     }
   }
 
@@ -224,7 +223,7 @@ class _DropdownControlState extends State<DropdownControl> {
           ? null
           : (String? value) {
               widget.control.updateProperties({"value": value});
-              widget.control.triggerEvent("change", value);
+              widget.control.triggerEvent("select", value);
             },
       dropdownMenuEntries: items,
     );

sdk/python/examples/apps/controls-gallery/components/properties_table.py

@@ -11,7 +11,6 @@ def did_mount(self):
         self.update_source_code(self.control)
 
     def update_source_code(self, control):
-        text = ""
         # for property in self.properties:
         #     if type(getattr(self.control, property["name"])).__name__ == "str":
         #         property_value = f"""'{getattr(self.control, property["name"])}'"""
@@ -45,7 +44,7 @@ def __init__(self, properties, control, top_control=None):
         self.divider_thickness = 3
         self.width = 500
         self.auto_scroll = True
-        if top_control == None:
+        if top_control is None:
             self.top_control = control
         else:
             self.top_control = top_control
@@ -59,7 +58,7 @@ def switch_changed(e):
                 setattr(self.control, property["name"], None)
             self.top_control.update()
 
-        if getattr(self.control, property["name"]) == None:
+        if getattr(self.control, property["name"]) is None:
             switch_value = False
         else:
             switch_value = True
@@ -89,9 +88,9 @@ def get_properties_list(self):
 
         for property in self.properties:
 
-            def add_list_item(e):
+            def add_list_item(e, property=property):
                 items_list = getattr(self.control, property["name"])
-                if items_list == None:
+                if items_list is None:
                     items_list = []
                 dataclass_type = property["dataclass"]
                 # adding new item to a list
@@ -106,10 +105,10 @@ def add_list_item(e):
             if "list" in property["value_type"]:
                 list_items = []
                 n = 0
-                if value != None:
-                    for item in value:
+                if value is not None:
+                    for _ in value:
 
-                        def delete_item(e):
+                        def delete_item(e, property=property):
                             items_list = getattr(self.control, property["name"])
                             # removing item from the list
                             items_list.remove(items_list[e.control.data])
@@ -173,7 +172,7 @@ def delete_item(e):
                     )
                 )
             elif property["value_type"] == "dataclass":
-                if value == None:
+                if value is None:
                     dataclass_type = property["dataclass"]
                     value = dataclass_type()
                     print(value)
@@ -216,62 +215,58 @@ def value_changed(self, e):
     def get_value_control(self, property):
         value = getattr(self.control, property["name"])
 
-        match property["value_type"]:
-            case "str":
-                return ft.TextField(
-                    border_color=ft.Colors.SECONDARY,
-                    content_padding=3,
-                    value=value,
-                    data=property["name"],
-                    on_change=self.value_changed,
-                )
-            case "number":
-                return ft.Row(
-                    alignment=ft.MainAxisAlignment.CENTER,
-                    controls=[
-                        ft.Text(property["min"]),
-                        ft.Slider(
-                            min=property["min"],
-                            max=property["max"],
-                            label="{value}%",
-                            value=value,
-                            data=property["name"],
-                            on_change=self.value_changed,
-                        ),
-                        ft.Text(property["max"]),
-                    ],
-                )
-            case "bool":
-                return ft.Checkbox(
-                    value=value,
-                    data=property["name"],
-                    on_change=self.value_changed,
-                )
-            case "enum":
-                options = []
+        if property["value_type"] == "str":
+            return ft.TextField(
+                border_color=ft.Colors.SECONDARY,
+                content_padding=3,
+                value=value,
+                data=property["name"],
+                on_change=self.value_changed,
+            )
+        elif property["value_type"] == "number":
+            return ft.Row(
+                alignment=ft.MainAxisAlignment.CENTER,
+                controls=[
+                    ft.Text(property["min"]),
+                    ft.Slider(
+                        min=property["min"],
+                        max=property["max"],
+                        label="{value}%",
+                        value=value,
+                        data=property["name"],
+                        on_change=self.value_changed,
+                    ),
+                    ft.Text(property["max"]),
+                ],
+            )
+        elif property["value_type"] == "bool":
+            return ft.Checkbox(
+                value=value,
+                data=property["name"],
+                on_change=self.value_changed,
+            )
+        elif property["value_type"] == "enum":
+            options = []
 
-                options_list = property["values"]
-                for item in options_list:
-                    options.append(ft.dropdown.Option(item.value))
+            options_list = property["values"]
+            for item in options_list:
+                options.append(ft.dropdown.Option(item.value))
 
-                return ft.Dropdown(
-                    options=options,
-                    value=value,
-                    data=property["name"],
-                    on_change=self.value_changed,
-                )
+            return ft.Dropdown(
+                options=options,
+                value=value,
+                data=property["name"],
+                on_select=self.value_changed,
+            )
+        elif property["value_type"] == "dataclass":
+            if value is None:
+                print("This dataclass value is None")
 
-            case "dataclass":
-                if value == None:
-                    print("This dataclass value is None")
+            properties_list = PropertiesList(
+                properties=property["properties"], control=value
+            )
 
-                properties_list = PropertiesList(
-                    properties=property["properties"], control=value
-                )
-
-                return properties_list
-                # ft.Container(bgcolor=ft.Colors.YELLOW, width=30, height=30)
-
-            # If an exact match is not confirmed, this last case will be used if provided
-            case _:
-                return ft.Text("Something's wrong with the type")
+            return properties_list
+            # ft.Container(bgcolor=ft.Colors.YELLOW, width=30, height=30)
+        else:
+            return ft.Text("Something's wrong with the type")

sdk/python/examples/apps/controls-gallery/pyproject.toml

@@ -7,7 +7,7 @@ authors = [
 ]
 license = "MIT"
 readme = "README.md"
-requires-python = ">=3.9"
+requires-python = ">=3.10"
 dependencies = [
     "flet",
     "flet-contrib==2024.12.3"

sdk/python/examples/controls/dropdown/color_selection_with_filtering.py

@@ -20,7 +20,7 @@ def get_options():
             for color in colors
         ]
 
-    def handle_dropdown_change(e: ft.Event[ft.Dropdown]):
+    def handle_dropdown_select(e: ft.Event[ft.Dropdown]):
         e.control.color = e.control.value
         page.update()
 
@@ -29,7 +29,7 @@ def handle_dropdown_change(e: ft.Event[ft.Dropdown]):
             editable=True,
             label="Color",
             options=get_options(),
-            on_change=handle_dropdown_change,
+            on_select=handle_dropdown_select,
         )
     )
 

sdk/python/examples/controls/dropdown/reactive.py

@@ -0,0 +1,56 @@
+from dataclasses import dataclass
+from typing import cast
+
+import flet as ft
+
+
+@dataclass
+class Form:
+    color: str = "red"
+
+    def change_color(self, new_color: str):
+        print("New color:", new_color)
+        self.color = new_color
+
+
+def main(page: ft.Page):
+    form = Form()
+    page.theme_mode = ft.ThemeMode.LIGHT
+
+    page.add(
+        ft.SelectionArea(
+            ft.StateView(
+                form,
+                lambda state: ft.Column(
+                    cast(
+                        list[ft.Control],
+                        [
+                            ft.Text(f"Selected color: {form.color}"),
+                            ft.Column(
+                                [
+                                    ft.Dropdown(
+                                        editable=True,
+                                        label="Color",
+                                        value=form.color,
+                                        on_select=lambda e: form.change_color(
+                                            cast(str, e.control.value)
+                                        ),
+                                        options=[
+                                            ft.DropdownOption(key="red", text="Red"),
+                                            ft.DropdownOption(
+                                                key="green", text="Green"
+                                            ),
+                                            ft.DropdownOption(key="blue", text="Blue"),
+                                        ],
+                                    ),
+                                ]
+                            ),
+                        ],
+                    )
+                ),
+            )
+        )
+    )
+
+
+ft.run(main)

sdk/python/examples/controls/dropdown/select_and_change_events.py

@@ -0,0 +1,50 @@
+import flet as ft
+
+
+def main(page: ft.Page):
+    colors = [
+        ft.Colors.RED,
+        ft.Colors.BLUE,
+        ft.Colors.YELLOW,
+        ft.Colors.PURPLE,
+        ft.Colors.LIME,
+    ]
+
+    def get_options():
+        options = []
+        for color in colors:
+            options.append(
+                ft.DropdownOption(
+                    key=color.value,
+                    content=ft.Text(
+                        value=color.value,
+                        color=color,
+                    ),
+                    leading_icon=ft.Icon(ft.Icons.PALETTE, color=color),
+                )
+            )
+        return options
+
+    def dropdown_select(e):
+        e.control.color = e.control.value
+        display_value.value = f"VALUE changed to {e.control.value}"
+
+    def dropdown_change(e):
+        display_text.value = f"TEXT changed to {e.control.text}"
+
+    page.scroll = ft.ScrollMode.AUTO
+    page.add(
+        display_value := ft.Text(),
+        display_text := ft.Text(),
+        ft.Dropdown(
+            editable=True,
+            label="Color",
+            width=float("inf"),
+            options=get_options(),
+            on_select=dropdown_select,
+            on_change=dropdown_change,
+        ),
+    )
+
+
+ft.run(main)

sdk/python/examples/cookbook/cpu_bound_callback.py

@@ -0,0 +1,47 @@
+import asyncio
+import time
+
+import flet as ft
+
+
+class CpuProgressApp:
+    def __init__(self, page: ft.Page):
+        self.page = page
+        self.loop = asyncio.get_running_loop()
+
+        self.page.title = "Simple thread + asyncio task"
+        self.pb = ft.ProgressBar(value=0.0, width=420)
+        self.btn = ft.Button("Start", on_click=self.start_clicked)
+        self.page.add(ft.Column([self.btn, self.pb], tight=True, spacing=10))
+
+    # ---------- Thread-safe UI updates ----------
+    async def set_progress(self, p: float):
+        self.pb.value = p
+        self.page.update()
+
+    def report_callback(self, p: float):
+        # Called from worker thread -> hop to main asyncio loop
+        asyncio.run_coroutine_threadsafe(self.set_progress(p), self.loop)
+
+    # ---------- Handlers ----------
+    async def start_clicked(self, _=None):
+        self.btn.disabled = True
+        await self.set_progress(0.0)
+
+        # Run blocking job in a thread and wait for it to finish
+        await asyncio.to_thread(self.long_job, 100, self.report_callback)
+
+        self.btn.disabled = False
+        await self.set_progress(1.0)
+
+    # ---------- Blocking job ----------
+    @staticmethod
+    def long_job(steps: int, report_callback):
+        for i in range(steps):
+            _ = sum(range(200_000))  # small CPU burn; bump if needed
+            time.sleep(0.1)
+            report_callback((i + 1) / steps)  # 0..1
+
+
+if __name__ == "__main__":
+    ft.run(CpuProgressApp)