Minor fixes for control examples

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(),
     )
 

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

@@ -6,13 +6,14 @@
 def main(page: ft.Page):
     page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
 
-    timer_picker_value_ref = ft.Ref[ft.Text]()
+    timer_value_text = ft.Text(
+        value="00:01:10",
+        size=23,
+        color=ft.CupertinoColors.DESTRUCTIVE_RED,
+    )
 
     def handle_timer_picker_change(e: ft.Event[ft.CupertinoTimerPicker]):
-        timer_picker_value_ref.current.value = time.strftime(
-            "%H:%M:%S", time.gmtime(e.data.in_seconds)
-        )
-        # timer_picker_value_ref.current.value = f"{e.data.in_hours}:{(e.data.in_minutes % 60)}:{(e.data.in_seconds % 60) % 60}"
+        timer_value_text.value = time.strftime("%H:%M:%S", time.gmtime(e.data))
         page.update()
 
     timer_picker = ft.CupertinoTimerPicker(
@@ -29,12 +30,7 @@ def handle_timer_picker_change(e: ft.Event[ft.CupertinoTimerPicker]):
             controls=[
                 ft.Text("TimerPicker Value:", size=23),
                 ft.CupertinoButton(
-                    content=ft.Text(
-                        ref=timer_picker_value_ref,
-                        value="00:01:10",
-                        size=23,
-                        color=ft.CupertinoColors.DESTRUCTIVE_RED,
-                    ),
+                    content=timer_value_text,
                     on_click=lambda e: page.show_dialog(
                         ft.CupertinoBottomSheet(
                             content=timer_picker,

sdk/python/examples/controls/data_table/handling_events.py

@@ -3,22 +3,22 @@
 
 def main(page: ft.Page):
     def handle_row_selection_change(e: ft.Event[ft.DataRow]):
-        match e.control.data:
-            case 1:
+        if e.control.data:
+            if e.control.data == 1:
                 row1.selected = not row1.selected
-            case 2:
+            elif e.control.data == 2:
                 row2.selected = not row2.selected
-            case 3:
+            elif e.control.data == 3:
                 row3.selected = not row3.selected
         page.update()
 
     def handle_column_sort(e: ft.DataColumnSortEvent):
-        match e.control.data:
-            case 1:
+        if e.control.data:
+            if e.control.data == 1:
                 print(f"{e.column_index}, {e.ascending}")
                 # table.sort_column_index = 1
                 table.sort_ascending = e.ascending
-            case 2:
+            elif e.control.data == 2:
                 print(f"{e.column_index}, {e.ascending}")
                 # table.sort_column_index = 2
                 table.sort_ascending = e.ascending
@@ -34,7 +34,7 @@ def handle_column_sort(e: ft.DataColumnSortEvent):
             horizontal_lines=ft.border.BorderSide(1, ft.Colors.GREEN_600),
             sort_column_index=0,
             sort_ascending=True,
-            heading_row_color=ft.Colors.BLACK12,
+            heading_row_color=ft.Colors.BLACK_12,
             heading_row_height=100,
             data_row_color={ft.ControlState.HOVERED: "0x30FF0000"},
             show_checkbox_column=True,

sdk/python/examples/controls/data_table/sortable_and_selectable.py

@@ -6,13 +6,13 @@ def main(page: ft.Page):
         ft.DataTable(
             width=700,
             bgcolor=ft.Colors.YELLOW,
-            border=ft.border.all(2, ft.Colors.RED),
+            border=ft.Border.all(2, ft.Colors.RED),
             border_radius=10,
             vertical_lines=ft.border.BorderSide(3, ft.Colors.BLUE),
             horizontal_lines=ft.border.BorderSide(1, ft.Colors.GREEN),
             sort_column_index=0,
             sort_ascending=True,
-            heading_row_color=ft.Colors.BLACK12,
+            heading_row_color=ft.Colors.BLACK_12,
             heading_row_height=100,
             data_row_color={ft.ControlState.HOVERED: "0x30FF0000"},
             show_checkbox_column=True,

sdk/python/examples/controls/datatable2/example_2.py

@@ -1,19 +1,37 @@
-import flet_datatable2 as ftd
 from data import desserts
 
 import flet as ft
+import flet_datatable2 as ftd
 
 
 def main(page: ft.Page):
     page.vertical_alignment = ft.MainAxisAlignment.CENTER
     page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
+    sorted_desserts = list(desserts)
+    data_table: ftd.DataTable2 | None = None
 
     def handle_row_selection_change(e: ft.Event[ftd.DataRow2]):
         e.control.selected = not e.control.selected
         e.control.update()
 
     def sort_column(e: ft.DataColumnSortEvent):
-        print(f"Sorting column {e.column_index}, ascending={e.ascending}")
+        if data_table is None:
+            return
+        sorters = [
+            lambda d: d.name.lower(),
+            lambda d: d.calories,
+            lambda d: d.fat,
+            lambda d: d.carbs,
+            lambda d: d.protein,
+            lambda d: d.sodium,
+            lambda d: d.calcium,
+            lambda d: d.iron,
+        ]
+        sorted_desserts.sort(key=sorters[e.column_index], reverse=not e.ascending)
+        data_table.rows = get_data_rows(sorted_desserts)
+        data_table.sort_column_index = e.column_index
+        data_table.sort_ascending = e.ascending
+        data_table.update()
 
     def get_data_columns():
         data_columns = [
@@ -83,21 +101,20 @@ def get_data_rows(desserts):
             )
         return data_rows
 
-    page.add(
-        ftd.DataTable2(
-            show_checkbox_column=True,
-            expand=True,
-            column_spacing=0,
-            heading_row_color=ft.Colors.SECONDARY_CONTAINER,
-            horizontal_margin=12,
-            sort_ascending=True,
-            bottom_margin=10,
-            min_width=600,
-            on_select_all=lambda e: print("All selected"),
-            columns=get_data_columns(),
-            rows=get_data_rows(desserts),
-        ),
+    data_table = ftd.DataTable2(
+        show_checkbox_column=True,
+        expand=True,
+        column_spacing=0,
+        heading_row_color=ft.Colors.SECONDARY_CONTAINER,
+        horizontal_margin=12,
+        sort_ascending=True,
+        bottom_margin=10,
+        min_width=600,
+        on_select_all=lambda e: print("All selected"),
+        columns=get_data_columns(),
+        rows=get_data_rows(sorted_desserts),
     )
+    page.add(data_table)
 
 
 ft.run(main)