Minor fixes for control examples (#5831)

* Fix layout and doc formatting in canvas and bottomsheet

Updated brush_on_image.py to remove invalid width and set expand on Stack for proper layout. Added a missing newline in bottomsheet.md for improved markdown formatting.

* Update chart examples and dependencies

Refactored chart and color examples for improved clarity and modern Python practices, including use of dataclasses and async clipboard handling. Enhanced custom scrollbar and infinite scrolling examples with more realistic content and fixed key usage. Updated documentation to require both 'plotly' and 'kaleido' for PlotlyChart. Added 'matplotlib', 'plotly', and 'kaleido' to dependencies in pyproject.toml.

* Fix type and class usage in example scripts

Updated scroll event handler to use generic OnScrollEvent type in column example. Replaced ft.border.all with ft.Border.all in nested container themes example for correct class usage.

* Update Cupertino control examples for API changes

Replaced deprecated usages in CupertinoButton and CupertinoRadio examples to match updated Flet API. Refactored CupertinoTimerPicker example to simplify timer value handling and fix event data usage.

* Fix DataTable event handling and sorting logic

Corrected color constant names and border usage in DataTable examples. Refactored sorting logic in datatable2 example to properly sort data and update table state, and fixed initialization of sorted data and DataTable2 instance.

* Refactor DatePicker instantiation in example

Moves DatePicker creation outside the button click handler to reuse the same instance. This simplifies the code and avoids creating a new DatePicker object on each click.

* Refactor DateRangePicker instantiation in example

Moves DateRangePicker creation outside the button click handler to avoid redundant instantiation. The picker is now created once and reused when the button is clicked.

* Remove unused drag-and-drop example files

Deleted ordering.py and outer_inner.py from the drag_target_and_draggable examples to clean up deprecated or redundant code. Also fixed a color constant typo in drag_and_drop_containers.py.

* Add declarative drag-and-drop examples

Added two new Python examples demonstrating declarative drag-and-drop: one for containers and one for ordering items and groups. Updated draggable.md documentation to reference the new declarative containers example.

* Rename dropdown example and clean up code

Renamed 'reactive.py' to 'declarative.py' for clarity. Removed unused logging setup from 'basic.py'. Fixed icon name reference in 'dropdown_random_icon.py' to use 'icon.icon' instead of 'icon.name'.

* Fix ExpansionTile trailing icon property usage

Replaces incorrect usage of 'name' with 'icon' for the trailing property in ExpansionTile event handlers. Also updates SnackBar text assignment for ruff formatting.

* Update gesture detector event handling and cursor change

Replaced usage of delta_x and delta_y with local_delta.x and local_delta.y in draggable_containers.py for more accurate drag updates. Simplified mouse cursor change logic in mouse_cursors.py by using random.choice instead of a generator.

* Update image assets and fix control property usage

Added app_icon_512.png and updated gallery.py to use the new image asset. Fixed property names and usage in static_svg.py, handling_events.py, and outlined_button/icons.py to use correct constants and class references for colors, margins, and icons.

* Fix color constant in ButtonControl border

Replaces 'ft.Colors.BLACK54' with 'ft.Colors.BLACK_54' to use the correct color constant for the button border.

* Update event handlers to print control object

Changed event handler print statements to output the control object instead of its uid for better debugging and information in rich text example.

* Fix string formatting and color constant in text field examples

Corrected multi-line string assignment in prefix_and_suffix.py to properly display textbox values. Updated styled.py to use the correct color constant 'BLACK_26' instead of 'BLACK26'.

* Remove logging setup from drag and drop example

Eliminated unnecessary logging configuration and logger level settings from the drag_and_drop_ordering_declarative.py example to simplify the code.

* Move plotting libraries to dev dependencies

matplotlib, plotly, and kaleido have been moved from main dependencies to dev dependencies in pyproject.toml. This reduces the default install footprint for end users and keeps plotting tools available for development and testing.

---------

Co-authored-by: Feodor Fitsner <[email protected]>

Author: InesaFitsner

sdk/python/examples/apps/controls-gallery/examples/colors/themecolors/01_theme_colors.py

@@ -1,14 +1,16 @@
+from dataclasses import dataclass
+
 import flet as ft
 
 name = "Theme colors"
 
 
 def example():
+    @dataclass
     class Color:
-        def __init__(self, display_name, name, is_dark=False):
-            self.name = name
-            self.display_name = display_name
-            self.is_dark = is_dark
+        name: str
+        display_name: str
+        is_dark: bool = False
 
     theme_colors = [
         Color("PRIMARY", "primary"),
@@ -40,9 +42,9 @@ def __init__(self, display_name, name, is_dark=False):
         Color("SCRIM", "scrim", True),
     ]
 
-    def copy_to_clipboard(e):
-        e.control.page.set_clipboard(f"ft.Colors.{e.control.content.value}")
-        e.control.page.open(
+    async def copy_to_clipboard(e):
+        await e.control.page.clipboard.set(f"ft.Colors.{e.control.content.value}")
+        e.control.page.show_dialog(
             ft.SnackBar(
                 ft.Text(f"Copied to clipboard: ft.Colors.{e.control.content.value}"),
                 open=True,

sdk/python/examples/controls/canvas/brush_on_image.py

@@ -34,9 +34,9 @@ def handle_pan_update(e: ft.DragUpdateEvent):
     page.add(
         ft.Container(
             border_radius=5,
-            width=float("inf"),
             expand=True,
             content=ft.Stack(
+                expand=True,
                 controls=[
                     ft.Image(
                         src="https://picsum.photos/200/300",
@@ -51,7 +51,7 @@ def handle_pan_update(e: ft.DragUpdateEvent):
                             drag_interval=10,
                         ),
                     ),
-                ]
+                ],
             ),
         )
     )

sdk/python/examples/controls/charts/line_chart/example_2.py

@@ -1,6 +1,5 @@
-import flet_charts as fch
-
 import flet as ft
+import flet_charts as fch
 
 
 class State:
@@ -134,7 +133,7 @@ def toggle_data(e: ft.Event[ft.ElevatedButton]):
         state.toggled = not state.toggled
         chart.update()
 
-    page.add(ft.ElevatedButton("avg", on_click=toggle_data), chart)
+    page.add(ft.Button("avg", on_click=toggle_data), chart)
 
 
 ft.run(main)

sdk/python/examples/controls/charts/pie_chart/example_2.py

@@ -1,6 +1,5 @@
-import flet_charts as fch
-
 import flet as ft
+import flet_charts as fch
 
 NORMAL_RADIUS = 50
 HOVER_RADIUS = 60
@@ -11,7 +10,7 @@
     size=22,
     color=ft.Colors.WHITE,
     weight=ft.FontWeight.BOLD,
-    shadow=ft.BoxShadow(blur_radius=2, color=ft.Colors.BLACK54),
+    shadow=ft.BoxShadow(blur_radius=2, color=ft.Colors.BLACK_54),
 )
 
 

sdk/python/examples/controls/column/custom_scrollbar.py

@@ -22,7 +22,37 @@ def main(page: ft.Page):
         )
     )
 
-    # todo: finish example
+    fake_messages = [
+        ft.Container(
+            ft.Text(f"Message {i}", size=16, weight=ft.FontWeight.W_500),
+            bgcolor=ft.Colors.with_opacity(0.15, ft.Colors.BLUE_200),
+            border_radius=8,
+            padding=10,
+        )
+        for i in range(1, 31)
+    ]
+
+    page.add(
+        ft.Row(
+            [
+                ft.Container(
+                    content=ft.Column(
+                        controls=fake_messages,
+                        spacing=10,
+                        scroll=ft.ScrollMode.ALWAYS,
+                        expand=True,
+                    ),
+                    width=320,
+                    height=420,
+                    bgcolor=ft.Colors.with_opacity(0.15, ft.Colors.AMBER_200),
+                    padding=15,
+                    border_radius=12,
+                )
+            ],
+            alignment=ft.MainAxisAlignment.CENTER,
+            expand=True,
+        )
+    )
 
 
 ft.run(main)

sdk/python/examples/controls/column/infinite_scrolling.py

@@ -13,17 +13,14 @@ class State:
 
 def main(page: ft.Page):
     def on_scroll(e: ft.OnScrollEvent):
-        if e.pixels >= e.max_scroll_extent - 100:
-            if sem.acquire(blocking=False):
-                try:
-                    for i in range(0, 10):
-                        cl.controls.append(
-                            ft.Text(f"Text line {s.i}", scroll_key=str(s.i))
-                        )
-                        s.i += 1
-                    cl.update()
-                finally:
-                    sem.release()
+        if e.pixels >= e.max_scroll_extent - 100 and sem.acquire(blocking=False):
+            try:
+                for _i in range(0, 10):
+                    cl.controls.append(ft.Text(f"Text line {s.i}", key=str(s.i)))
+                    s.i += 1
+                cl.update()
+            finally:
+                sem.release()
 
     cl = ft.Column(
         spacing=10,
@@ -33,8 +30,8 @@ def on_scroll(e: ft.OnScrollEvent):
         scroll_interval=0,
         on_scroll=on_scroll,
     )
-    for i in range(0, 50):
-        cl.controls.append(ft.Text(f"Text line {s.i}", scroll_key=str(s.i)))
+    for _i in range(0, 50):
+        cl.controls.append(ft.Text(f"Text line {s.i}", key=str(s.i)))
         s.i += 1
 
     page.add(ft.Container(cl, border=ft.Border.all(1)))

sdk/python/examples/controls/column/scroll_events.py

@@ -2,7 +2,7 @@
 
 
 def main(page: ft.Page):
-    def handle_column_scroll(e: ft.OnScrollEvent[ft.Column]):
+    def handle_column_scroll(e: ft.OnScrollEvent):
         print(e)
 
     page.add(

sdk/python/examples/controls/container/nested_themes_2.py

@@ -52,7 +52,7 @@ def main(page: ft.Page):
         ft.Container(
             padding=20,
             bgcolor=ft.Colors.SURFACE_TINT,
-            border=ft.border.all(3, ft.Colors.OUTLINE),
+            border=ft.Border.all(3, ft.Colors.OUTLINE),
             theme_mode=ft.ThemeMode.LIGHT,
             theme=ft.Theme(),
             content=ft.Row(
@@ -69,7 +69,7 @@ def main(page: ft.Page):
         ft.Container(
             padding=20,
             bgcolor=ft.Colors.SURFACE_TINT,
-            border=ft.border.all(3, ft.Colors.OUTLINE),
+            border=ft.Border.all(3, ft.Colors.OUTLINE),
             border_radius=10,
             theme_mode=ft.ThemeMode.SYSTEM,
             theme=ft.Theme(),

sdk/python/examples/controls/cupertino_button/basic.py

@@ -15,7 +15,7 @@ def main(page: ft.Page):
         ft.CupertinoButton(
             bgcolor=ft.Colors.PRIMARY,
             alignment=ft.Alignment.TOP_LEFT,
-            border_radius=ft.border_radius.all(15),
+            border_radius=ft.BorderRadius.all(15),
             opacity_on_click=0.5,
             on_click=lambda e: print("Filled CupertinoButton clicked!"),
             content=ft.Text("Filled CupertinoButton", color=ft.Colors.YELLOW),

sdk/python/examples/controls/cupertino_radio/basic.py

@@ -30,7 +30,7 @@ def handle_button_click(e: ft.Event[ft.ElevatedButton]):
                 ]
             )
         ),
-        ft.ElevatedButton(content="Submit", on_click=handle_button_click),
+        ft.Button(content="Submit", on_click=handle_button_click),
         message := ft.Text(),
     )