more demo

Author: ndonkoHenri

sdk/python/packages/flet/docs/apps/examples-gallery/pyproject.toml

@@ -1,5 +1,5 @@
 [project]
-name = "poc"
+name = "examples-gallery"
 version = "0.1.0"
 description = ""
 readme = "README.md"
@@ -17,9 +17,14 @@ prerelease = "allow"
 [tool.flet]
 # Docs: https://flet.dev/docs/publish
 org = "com.mycompany"
-product = "poc"
+product = "Examples Gallery"
 company = "Flet"
 copyright = "Copyright (C) 2025 by Flet"
 
 [tool.flet.app]
 path = "src"
+
+[tool.flet.web]
+base_url = "apps/examples-gallery/dist"
+renderer = "auto"
+route_url_strategy = "hash"

sdk/python/packages/flet/docs/controls/alertdialog.md

@@ -8,15 +8,13 @@ example_images: ../test-images/examples/material/golden/macos/alert_dialog
 
 ## Examples
 
-[Live example](https://flet-controls-gallery.fly.dev/dialogs/alertdialog)
-
 ### Modal and non-modal dialogs
 
 ```python
 --8<-- "{{ examples }}/modal_and_non_modal.py"
 ```
 
-{{ image(example_images + "/alert_dialog_flow.gif", alt="Modal and non-modal dialogs", caption="Modal and non-modal dialogs",width="50%") }}
+{{ demo("alert_dialog/modal_and_non_modal", height="420", width="80%") }}
 
 
 {{ class_members(class_name) }}

sdk/python/packages/flet/docs/controls/animatedswitcher.md

@@ -8,27 +8,29 @@ example_images: ../examples/controls/animated_switcher/media
 
 ## Examples
 
-[Live example](https://flet-controls-gallery.fly.dev/animations/animated_switcher)
-
 ### Animated switching between two containers with scale effect
 
 ```python
 --8<-- "{{ examples }}/scale_effect.py"
 ```
 
-{{ image(example_images + "/scale_effect.gif", alt="scale-effect", width="80%") }}
-
+{{ demo("animated_switcher/scale_effect", height="420", width="80%") }}
 
 ### Animate Image switch
 
 ```python
 --8<-- "{{ examples }}/image_switch.py"
 ```
 
+{{ demo("animated_switcher/image_switch", height="420", width="80%") }}
+
 ### Animate Image switch buffered
 
 ```python
 --8<-- "{{ examples }}/image_switch_buffered.py"
 ```
 
+{{ demo("animated_switcher/image_switch_buffered", height="420", width="80%") }}
+
+
 {{ class_members(class_name) }}

sdk/python/packages/flet/docs/controls/appbar.md

@@ -9,15 +9,13 @@ example_media: ../examples/controls/app_bar/media
 
 ## Examples
 
-[Live example](https://flet-controls-gallery.fly.dev/navigation/appbar)
-
 ### Actions and Popup Menu
 
 ```python
 --8<-- "{{ examples }}/actions_and_popup_menu.py"
 ```
 
-{{ image(example_media + "/actions_and_popup_menu.gif", alt="actions-and-popup-menu", width="80%") }}
+{{ demo("app_bar/actions_and_popup_menu", height="420", width="80%") }}
 
 
 ### Theme and Material Mode Toggles
@@ -26,4 +24,7 @@ example_media: ../examples/controls/app_bar/media
 --8<-- "{{ examples }}/theme_and_material_mode_toggles.py"
 ```
 
+{{ demo("app_bar/theme_and_material_mode_toggles", height="420", width="80%") }}
+
+
 {{ class_members(class_name) }}

sdk/python/packages/flet/docs/controls/autocomplete.md

@@ -8,13 +8,13 @@ example_images: ../examples/controls/auto_complete/media
 
 ## Examples
 
-[Live example](https://flet-controls-gallery.fly.dev/input/autocomplete)
-
 ### Basic example
 
 ```python
 --8<-- "{{ examples }}/basic.py"
 ```
 
+{{ demo("auto_complete/basic", height="380", width="80%") }}
+
 
 {{ class_members(class_name) }}

sdk/python/packages/flet/docs/controls/autofillgroup.md

@@ -8,15 +8,13 @@ example_images: ../examples/controls/autofill_group/media
 
 ## Examples
 
-[Live example](https://flet-controls-gallery.fly.dev/input/autofillgroup)
-
 ### Basic example
 
 ```python
 --8<-- "{{ examples }}/basic.py"
 ```
 
-{{ image(example_images + "/basic.gif", alt="basic", width="80%") }}
+{{ demo("autofill_group/basic", height="380", width="80%") }}
 
 
 {{ class_members(class_name) }}

sdk/python/packages/flet/docs/controls/banner.md

@@ -9,15 +9,13 @@ example_media: ../examples/controls/banner/media
 
 ## Examples
 
-[Live example](https://flet-controls-gallery.fly.dev/dialogs/banner)
-
 ### Basic example
 
 ```python
 --8<-- "{{ examples }}/basic.py"
 ```
 
-{{ image(example_media + "/basic.gif", alt="basic", width="80%") }}
+{{ demo("banner/basic", height="380", width="80%") }}
 
 
 {{ class_members(class_name) }}

sdk/python/packages/flet/docs/controls/bottomappbar.md

@@ -8,22 +8,21 @@ example_images: ../test-images/examples/material/golden/macos/bottom_app_bar
 
 ## Examples
 
-[Live example](https://flet-controls-gallery.fly.dev/navigation/bottomappbar)
-
 ### Notched `FloatingActionButton`
 
 ```python
 --8<-- "{{ examples }}/notched_fab.py"
 ```
 
-{{ image(example_images + "/notched_fab.png", width="80%") }}
+{{ demo("bottom_app_bar/notched_fab", height="380", width="80%") }}
 
 ### Custom border radius
 
 ```python
 --8<-- "{{ examples }}/border_radius.py"
 ```
 
-{{ image(example_images + "/border_radius.png", width="80%") }}
+{{ demo("bottom_app_bar/border_radius", height="380", width="80%") }}
+
 
 {{ class_members(class_name) }}

sdk/python/packages/flet/docs/controls/bottomsheet.md

@@ -8,23 +8,21 @@ example_images: ../test-images/examples/material/golden/macos/bottom_sheet
 
 ## Examples
 
-[Live example](https://flet-controls-gallery.fly.dev/dialogs/bottomsheet)
-
 ### Basic example
 
 ```python
 --8<-- "{{ examples }}/basic.py"
 ```
 
-{{ image(example_images + "/basic.gif", width="60%") }}
+{{ demo("bottom_sheet/basic", height="380", width="80%") }}
 
 ### Fullscreen
 
 ```python
 --8<-- "{{ examples }}/fullscreen.py"
 ```
 
-{{ image(example_images + "/fullscreen.gif", width="60%") }}
+{{ demo("bottom_sheet/fullscreen", height="380", width="80%") }}
 
 
 {{ class_members(class_name) }}

sdk/python/packages/flet/docs/controls/button.md

@@ -8,75 +8,61 @@ example_images: ../test-images/examples/material/golden/macos/button
 
 ## Examples
 
-[Live example](https://flet-controls-gallery.fly.dev/buttons/elevatedbutton)
-
 ### Button
 
 ```python
 --8<-- "{{ examples }}/basic.py"
 ```
 
-{{ image(example_images + "/basic.png", alt="Basic button", width="50%") }}
-
+{{ demo("button/basic", height="340", width="80%") }}
 
 ### Icons
 
 ```python
 --8<-- "{{ examples }}/icons.py"
 ```
 
-{{ image(example_images + "/icons.png", alt="Basic button", width="50%") }}
-
+{{ demo("button/icons", height="340", width="80%") }}
 
 ### Handling clicks
 
 ```python
 --8<-- "{{ examples }}/handling_clicks.py"
 ```
 
-{{ image(example_images + "/handling_clicks.png", alt="Handling clicks", width="50%") }}
-
+{{ demo("button/handling_clicks", height="360", width="80%") }}
 
 ### Custom content
 
 ```python
 --8<-- "{{ examples }}/custom_content.py"
 ```
 
-{{ image(example_images + "/custom_content.png", alt="Buttons with custom content", width="50%") }}
-
+{{ demo("button/custom_content", height="360", width="80%") }}
 
 ### Shapes
 
 ```python
 --8<-- "{{ examples }}/button_shapes.py"
 ```
 
-{{ image(example_images + "/button_shapes.png", alt="Buttons with different shapes", width="50%") }}
-
+{{ demo("button/button_shapes", height="380", width="80%") }}
 
 ### Styling
 
 ```python
 --8<-- "{{ examples }}/styling.py"
 ```
 
-{{ image(example_images + "/styled_initial.png", alt="Styled button - default state", width="50%", caption="Default state") }}
-
-
-{{ image(example_images + "/styled_hovered.png", alt="Styled button - hovered state", width="50%", caption="Hovered state") }}
-
+{{ demo("button/styling", height="420", width="80%") }}
 
 ### Animate on hover
 
 ```python
 --8<-- "{{ examples }}/animate_on_hover.py"
 ```
 
-{{ image(example_images + "/animate_on_hover_initial.png", alt="Unhovered button", width="50%", caption="Normal button") }}
-
-
-{{ image(example_images + "/animate_on_hover_hovered.png", alt="Hovered button", width="50%", caption="Hovered button") }}
+{{ demo("button/animate_on_hover", height="420", width="80%") }}
 
 
 {{ class_members(class_name) }}