Control gallery 0.24 (#168)

* Update 01_safearea_example.py

* Update 01_menubar_example.py

* Fix checkbox tooltip

* updated flet version

* fixed Column example async warnings

* Update 03_animate_container.py

* Update 01_dismissible_example.py

* Update 02_draggable_divider.py

* Update 01_expansionpanellist_example.py

* Update 01_listtile_examples.py

* Update 01_auto_scrolling_listview.py

* row examples

* Update 02_draggable_verticaldivider.py

* Update 01_bottomappbar_example.py

* Update 01_navigationbar_example.py

* Update 01_navigationbar_example.py

* Update 01_menubar_example.py

* Update 01_navigationbar_example.py

* Update 05_free-hand_drawing_tool.py

* Update 01_circleavatar_example.py

* markdown examples

* progressbar, progressring

* fixed Text example with RobotoSlab font

* Update 04_text_with_variable_properties.py

* Update 01_cupertino_action_sheet_example.py

* Update 01_cupertino_dialog_action_example.py

* Update 03_elevatedbutton_with_click_event.py

* Update 06_elevatedbutton_style.py

* Update 02_iconbutton_with_click_event.py

* Update 01_menuitembutton_example.py

* Update 03_outlinedbutton_with_click_event.py

* Update 01_popupmenubutton_example.py

* Update 01_submenubutton_example.py

* Update 03_textbutton_with_click_event.py

* checkbox examples

* chip examples

* Create 09_text_with_tooltip_with_a_custom_decoration.py

* Update 01_cupertino_radio_example.py

* CupertinoSwitch and CupertinoSlider examples

* Update 01_cupertino_textfield_example.py

* Dropdown examples

* radio examples

* Update 03_slider_with_change_event.py

* Update 01_basic_switches.py

* TextField examples

* removed Tooltip from Utilities

* Update 01_basic_and_modal_dialogs.py

* Update 01_banner_with_leading_icon_and_actions.py

* bottomsheet example

* Update 01_cupertino_action_sheet_example.py

* Update 01_cupertino_alert_dialog_example.py

* CupertinoBottomSheet examples

* Update 01_cupertino_date_picker_example.py

* CupertinoPicker, CupertinoTimePicker

* Update 01_date_picker_example.py

* Update 01_snackbar_with_dynamic_message.py

* Update 01_time_picker_example.py

* chart examples

* Update 01_animatedswitcher_example.py

* Update 01_autoplay_audio.py

* Update 01_drag_and_drop_colors.py

* Update 01_pick_multiple_files.py

* Update 01_draggable_containers.py

* ShaderMask

* color examples

* Update requirements.txt

---------

Co-authored-by: Feodor Fitsner <feodor@appveyor.com>

Author: InesaFitsner

python/apps/controls-gallery/examples/animations/animated_switcher/01_animatedswitcher_example.py

@@ -27,8 +27,8 @@ def example():
         switch_out_curve=ft.AnimationCurve.BOUNCE_IN,
     )
 
-    async def animate(e):
+    def animate(e):
         c.content = c2 if c.content == c1 else c1
-        await c.update_async()
+        c.update()
 
     return ft.Column(controls=[c, ft.ElevatedButton("Animate!", on_click=animate)])

python/apps/controls-gallery/examples/buttons/cupertinoactionsheetaction/01_cupertino_action_sheet_example.py

@@ -6,10 +6,10 @@
 def example():
 
     def show_cupertino_action_sheet(e):
-        e.control.page.show_bottom_sheet(ft.CupertinoBottomSheet(action_sheet))
+        e.control.page.open(bottom_sheet)
 
     def close_cupertino_action_sheet(e):
-        e.control.page.close_bottom_sheet()
+        e.control.page.close(bottom_sheet)
 
     action_sheet = ft.CupertinoActionSheet(
         title=ft.Text("Title"),
@@ -36,6 +36,8 @@ def close_cupertino_action_sheet(e):
         ],
     )
 
+    bottom_sheet = ft.CupertinoBottomSheet(action_sheet)
+
     return ft.OutlinedButton(
         "Open CupertinoBottomSheet containing CupertinoActionSheet",
         on_click=show_cupertino_action_sheet,

python/apps/controls-gallery/examples/buttons/cupertinodialogaction/01_cupertino_dialog_action_example.py

@@ -4,9 +4,9 @@
 
 
 def example():
-    async def dismiss_dialog(e):
+    def dismiss_dialog(e):
         cupertino_alert_dialog.open = False
-        await e.control.page.update_async()
+        e.control.page.update()
 
     cupertino_alert_dialog = ft.CupertinoAlertDialog(
         title=ft.Text("Cupertino Alert Dialog"),
@@ -20,7 +20,7 @@ async def dismiss_dialog(e):
     )
 
     def open_dlg(e):
-        e.control.page.dialog = cupertino_alert_dialog
+        e.control.page.overlay.append(cupertino_alert_dialog)
         cupertino_alert_dialog.open = True
         e.control.page.update()
 

python/apps/controls-gallery/examples/buttons/elevatedbutton/03_elevatedbutton_with_click_event.py

@@ -4,10 +4,10 @@
 
 
 def example():
-    async def button_clicked(e):
+    def button_clicked(e):
         b.data += 1
         t.value = f"Button clicked {b.data} time(s)"
-        await t.update_async()
+        t.update()
 
     b = ft.ElevatedButton("Button with 'click' event", on_click=button_clicked, data=0)
     t = ft.Text()

python/apps/controls-gallery/examples/buttons/elevatedbutton/06_elevatedbutton_style.py

@@ -1,29 +1,32 @@
 import flet as ft
 
-name = "ElevatedButton with style attributes configured for different MaterialState values"
+name = (
+    "ElevatedButton with style attributes configured for different ControlState values"
+)
+
 
 def example():
-    
+
     return ft.ElevatedButton(
-            "Styled button 1",
-            style=ft.ButtonStyle(
-                color={
-                    ft.MaterialState.HOVERED: ft.colors.WHITE,
-                    ft.MaterialState.FOCUSED: ft.colors.BLUE,
-                    ft.MaterialState.DEFAULT: ft.colors.BLACK,
-                },
-                bgcolor={ft.MaterialState.FOCUSED: ft.colors.PINK_200, "": ft.colors.YELLOW},
-                padding={ft.MaterialState.HOVERED: 20},
-                overlay_color=ft.colors.TRANSPARENT,
-                elevation={"pressed": 0, "": 1},
-                animation_duration=500,
-                side={
-                    ft.MaterialState.DEFAULT: ft.BorderSide(1, ft.colors.BLUE),
-                    ft.MaterialState.HOVERED: ft.BorderSide(2, ft.colors.BLUE),
-                },
-                shape={
-                    ft.MaterialState.HOVERED: ft.RoundedRectangleBorder(radius=20),
-                    ft.MaterialState.DEFAULT: ft.RoundedRectangleBorder(radius=2),
-                },
-            ),
-        )
+        "Styled button 1",
+        style=ft.ButtonStyle(
+            color={
+                ft.ControlState.HOVERED: ft.colors.WHITE,
+                ft.ControlState.FOCUSED: ft.colors.BLUE,
+                ft.ControlState.DEFAULT: ft.colors.BLACK,
+            },
+            bgcolor={ft.ControlState.FOCUSED: ft.colors.PINK_200, "": ft.colors.YELLOW},
+            padding={ft.ControlState.HOVERED: 20},
+            overlay_color=ft.colors.TRANSPARENT,
+            elevation={"pressed": 0, "": 1},
+            animation_duration=500,
+            side={
+                ft.ControlState.DEFAULT: ft.BorderSide(1, ft.colors.BLUE),
+                ft.ControlState.HOVERED: ft.BorderSide(2, ft.colors.BLUE),
+            },
+            shape={
+                ft.ControlState.HOVERED: ft.RoundedRectangleBorder(radius=20),
+                ft.ControlState.DEFAULT: ft.RoundedRectangleBorder(radius=2),
+            },
+        ),
+    )

python/apps/controls-gallery/examples/buttons/iconbutton/02_iconbutton_with_click_event.py

@@ -4,10 +4,10 @@
 
 
 def example():
-    async def button_clicked(e):
+    def button_clicked(e):
         b.data += 1
         t.value = f"Button clicked {b.data} time(s)"
-        await t.update_async()
+        t.update()
 
     b = ft.IconButton(
         icon=ft.icons.PLAY_CIRCLE_FILL_OUTLINED, on_click=button_clicked, data=0

python/apps/controls-gallery/examples/buttons/menuitembutton/01_menuitembutton_example.py

@@ -10,8 +10,8 @@ def example():
             alignment=ft.alignment.top_left,
             bgcolor=ft.colors.RED_100,
             mouse_cursor={
-                ft.MaterialState.HOVERED: ft.MouseCursor.WAIT,
-                ft.MaterialState.DEFAULT: ft.MouseCursor.ZOOM_OUT,
+                ft.ControlState.HOVERED: ft.MouseCursor.WAIT,
+                ft.ControlState.DEFAULT: ft.MouseCursor.ZOOM_OUT,
             },
         ),
         controls=[
@@ -25,23 +25,23 @@ def example():
                         content=ft.Text("About"),
                         leading=ft.Icon(ft.icons.INFO),
                         style=ft.ButtonStyle(
-                            bgcolor={ft.MaterialState.HOVERED: ft.colors.GREEN_100}
+                            bgcolor={ft.ControlState.HOVERED: ft.colors.GREEN_100}
                         ),
                         # on_click=handle_menu_item_click
                     ),
                     ft.MenuItemButton(
                         content=ft.Text("Save"),
                         leading=ft.Icon(ft.icons.SAVE),
                         style=ft.ButtonStyle(
-                            bgcolor={ft.MaterialState.HOVERED: ft.colors.GREEN_100}
+                            bgcolor={ft.ControlState.HOVERED: ft.colors.GREEN_100}
                         ),
                         # on_click=handle_menu_item_click
                     ),
                     ft.MenuItemButton(
                         content=ft.Text("Quit"),
                         leading=ft.Icon(ft.icons.CLOSE),
                         style=ft.ButtonStyle(
-                            bgcolor={ft.MaterialState.HOVERED: ft.colors.GREEN_100}
+                            bgcolor={ft.ControlState.HOVERED: ft.colors.GREEN_100}
                         ),
                         # on_click=handle_menu_item_click
                     ),
@@ -62,7 +62,7 @@ def example():
                                 close_on_click=False,
                                 style=ft.ButtonStyle(
                                     bgcolor={
-                                        ft.MaterialState.HOVERED: ft.colors.PURPLE_200
+                                        ft.ControlState.HOVERED: ft.colors.PURPLE_200
                                     }
                                 ),
                                 # on_click=handle_menu_item_click
@@ -73,7 +73,7 @@ def example():
                                 close_on_click=False,
                                 style=ft.ButtonStyle(
                                     bgcolor={
-                                        ft.MaterialState.HOVERED: ft.colors.PURPLE_200
+                                        ft.ControlState.HOVERED: ft.colors.PURPLE_200
                                     }
                                 ),
                                 # on_click=handle_menu_item_click

python/apps/controls-gallery/examples/buttons/outlinedbutton/03_outlinedbutton_with_click_event.py

@@ -4,10 +4,10 @@
 
 
 def example():
-    async def button_clicked(e):
+    def button_clicked(e):
         b.data += 1
         t.value = f"Button clicked {b.data} time(s)"
-        await t.update_async()
+        t.update()
 
     b = ft.OutlinedButton("Button with 'click' event", on_click=button_clicked, data=0)
     t = ft.Text()

python/apps/controls-gallery/examples/buttons/popupmenubutton/01_popupmenubutton_example.py

@@ -4,9 +4,9 @@
 
 
 def example():
-    async def check_item_clicked(e):
+    def check_item_clicked(e):
         e.control.checked = not e.control.checked
-        await e.control.update_async()
+        e.control.update()
 
     pb = ft.PopupMenuButton(
         items=[

python/apps/controls-gallery/examples/buttons/submenubutton/01_submenubutton_example.py

@@ -6,11 +6,11 @@
 def example():
     bg_container = ft.Container(height=100, expand=True, bgcolor=ft.colors.AMBER)
 
-    async def handle_color_click(e):
+    def handle_color_click(e):
         color = e.control.content.value
         print(f"{color}.on_click")
         bg_container.bgcolor = color.lower()
-        await bg_container.update_async()
+        bg_container.update()
 
     def handle_on_hover(e):
         print(f"{e.control.content.value}.on_hover")
@@ -28,7 +28,7 @@ def handle_on_hover(e):
                             ft.MenuItemButton(
                                 content=ft.Text("Blue"),
                                 style=ft.ButtonStyle(
-                                    bgcolor={ft.MaterialState.HOVERED: ft.colors.BLUE}
+                                    bgcolor={ft.ControlState.HOVERED: ft.colors.BLUE}
                                 ),
                                 on_click=handle_color_click,
                                 on_hover=handle_on_hover,
@@ -42,7 +42,7 @@ def handle_on_hover(e):
                             ft.MenuItemButton(
                                 content=ft.Text("Green"),
                                 style=ft.ButtonStyle(
-                                    bgcolor={ft.MaterialState.HOVERED: ft.colors.GREEN}
+                                    bgcolor={ft.ControlState.HOVERED: ft.colors.GREEN}
                                 ),
                                 on_click=handle_color_click,
                                 on_hover=handle_on_hover,
@@ -56,7 +56,7 @@ def handle_on_hover(e):
                             ft.MenuItemButton(
                                 content=ft.Text("Red"),
                                 style=ft.ButtonStyle(
-                                    bgcolor={ft.MaterialState.HOVERED: ft.colors.RED}
+                                    bgcolor={ft.ControlState.HOVERED: ft.colors.RED}
                                 ),
                                 on_click=handle_color_click,
                                 on_hover=handle_on_hover,

python/apps/controls-gallery/examples/buttons/textbutton/03_textbutton_with_click_event.py

@@ -4,10 +4,10 @@
 
 
 def example():
-    async def button_clicked(e):
+    def button_clicked(e):
         b.data += 1
         t.value = f"Button clicked {b.data} time(s)"
-        await t.update_async()
+        t.update()
 
     b = ft.TextButton("Button with 'click' event", on_click=button_clicked, data=0)
     t = ft.Text()

python/apps/controls-gallery/examples/charts/barchart/02_barchart_2.py

@@ -27,11 +27,11 @@ def _build(self):
             self.bg_to_y = 20
             self.bg_color = ft.colors.GREEN_300
 
-    async def on_chart_event(e: ft.BarChartEvent):
+    def on_chart_event(e: ft.BarChartEvent):
         for group_index, group in enumerate(chart.bar_groups):
             for rod_index, rod in enumerate(group.bar_rods):
                 rod.hovered = e.group_index == group_index and e.rod_index == rod_index
-        await chart.update_async()
+        chart.update()
 
     chart = ft.BarChart(
         bar_groups=[

python/apps/controls-gallery/examples/charts/linechart/01_linechart_1.py

@@ -185,7 +185,7 @@ class State:
         height=500,
     )
 
-    async def toggle_data(e):
+    def toggle_data(e):
         if s.toggle:
             chart.data_series = data_2
             chart.data_series[2].point = True
@@ -196,7 +196,7 @@ async def toggle_data(e):
             chart.max_y = 4
             chart.interactive = True
         s.toggle = not s.toggle
-        await chart.update_async()
+        chart.update()
 
     return ft.Column(
         controls=[ft.IconButton(ft.icons.REFRESH, on_click=toggle_data), chart]

python/apps/controls-gallery/examples/charts/linechart/02_linechart_2.py

@@ -123,14 +123,14 @@ class State:
         height=500,
     )
 
-    async def toggle_data(e):
+    def toggle_data(e):
         if s.toggle:
             chart.data_series = data_2
             chart.interactive = False
         else:
             chart.data_series = data_1
             chart.interactive = True
         s.toggle = not s.toggle
-        await chart.update_async()
+        chart.update()
 
     return ft.Column(controls=[ft.ElevatedButton("avg", on_click=toggle_data), chart])

python/apps/controls-gallery/examples/charts/piechart/01_piechart_1.py

@@ -7,12 +7,12 @@ def example():
     normal_border = ft.BorderSide(0, ft.colors.with_opacity(0, ft.colors.WHITE))
     hovered_border = ft.BorderSide(6, ft.colors.WHITE)
 
-    async def on_chart_event(e: ft.PieChartEvent):
+    def on_chart_event(e: ft.PieChartEvent):
         for idx, section in enumerate(chart.sections):
             section.border_side = (
                 hovered_border if idx == e.section_index else normal_border
             )
-        await chart.update_async()
+        chart.update()
 
     chart = ft.PieChart(
         sections=[

python/apps/controls-gallery/examples/charts/piechart/02_piechart_2.py

@@ -16,15 +16,15 @@ def example():
         shadow=ft.BoxShadow(blur_radius=2, color=ft.colors.BLACK54),
     )
 
-    async def on_chart_event(e: ft.PieChartEvent):
+    def on_chart_event(e: ft.PieChartEvent):
         for idx, section in enumerate(chart.sections):
             if idx == e.section_index:
                 section.radius = hover_radius
                 section.title_style = hover_title_style
             else:
                 section.radius = normal_radius
                 section.title_style = normal_title_style
-        await chart.update_async()
+        chart.update()
 
     chart = ft.PieChart(
         sections=[

python/apps/controls-gallery/examples/charts/piechart/03_piechart_3.py

@@ -28,15 +28,15 @@ def badge(icon, size):
             bgcolor=ft.colors.WHITE,
         )
 
-    async def on_chart_event(e: ft.PieChartEvent):
+    def on_chart_event(e: ft.PieChartEvent):
         for idx, section in enumerate(chart.sections):
             if idx == e.section_index:
                 section.radius = hover_radius
                 section.title_style = hover_title_style
             else:
                 section.radius = normal_radius
                 section.title_style = normal_title_style
-        await chart.update_async()
+        chart.update()
 
     chart = ft.PieChart(
         sections=[

python/apps/controls-gallery/examples/colors/colorpalettes/01_color_palettes.py

@@ -81,9 +81,9 @@ def generate_color_names(swatch):
 
     responsive_row.controls = []
 
-    async def copy_to_clipboard(e):
-        await e.control.page.set_clipboard_async(f"ft.colors.{e.control.content.value}")
-        await e.control.page.show_snack_bar_async(
+    def copy_to_clipboard(e):
+        e.control.page.set_clipboard(f"ft.colors.{e.control.content.value}")
+        e.control.page.open(
             ft.SnackBar(
                 ft.Text(f"Copied to clipboard: ft.colors.{e.control.content.value}"),
                 open=True,