Owen/control docs p6

sdk/python/examples/controls/progress_ring/determinate_and_indeterminate.py

@@ -35,4 +35,5 @@ async def main(page: ft.Page):
         page.update()
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

sdk/python/examples/controls/progress_ring/gauge_with_progress.py

@@ -14,4 +14,5 @@ def main(page: ft.Page):
     )
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

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

@@ -22,4 +22,5 @@ def handle_button_click(e: ft.Event[ft.Button]):
     )
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

sdk/python/examples/controls/radio/handling_selection_changes.py

@@ -22,4 +22,5 @@ def handle_selection_change(e: ft.Event[ft.RadioGroup]):
     )
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

sdk/python/examples/controls/radio/styled.py

@@ -27,4 +27,5 @@ def main(page: ft.Page):
     )
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

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

@@ -21,11 +21,12 @@ def main(page: ft.Page):
                     inactive_color=ft.Colors.GREEN_300,
                     active_color=ft.Colors.GREEN_700,
                     overlay_color=ft.Colors.GREEN_100,
-                    label="{value}%",
+                    label="{value}",
                 ),
             ],
         )
     )
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

sdk/python/examples/controls/range_slider/handling_change_events.py

@@ -26,19 +26,21 @@ def handle_slider_change_end(e: ft.Event[ft.RangeSlider]):
                 ),
                 ft.Container(height=30),
                 ft.RangeSlider(
-                    divisions=50,
+                    divisions=100,
                     min=0,
-                    max=50,
+                    max=100,
                     start_value=10,
                     end_value=20,
                     on_change_start=handle_slider_change_start,
                     on_change=handle_slider_change,
                     on_change_end=handle_slider_change_end,
+                    label="{value}%",
                 ),
                 message := ft.Text(),
             ],
         )
     )
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

sdk/python/examples/controls/reorderable_list_view/horizontal_and_vertical.py

@@ -46,4 +46,5 @@ def get_color(i):
     )
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

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

@@ -5,6 +5,7 @@ def main(page: ft.Page):
     def handle_page_resize(e: ft.PageResizeEvent):
         pw.value = f"{page.width} px"
         pw.update()
+        page.update()
 
     page.on_resize = handle_page_resize
 
@@ -75,7 +76,7 @@ def handle_page_resize(e: ft.PageResizeEvent):
         ),
         pw,
     )
-    handle_page_resize(None)
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

sdk/python/examples/controls/responsive_row/custom_breakpoint.py

@@ -99,4 +99,5 @@ def update_status(_=None):
     update_status()
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

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

@@ -1,10 +1,11 @@
 ---
 class_name: flet.ProgressRing
 examples: ../../examples/controls/progress_ring
-example_images: ../examples/controls/progress_ring/media
+example_images: ../test-images/examples/material/golden/macos/progress_ring
+example_media: ../examples/controls/progress_ring/media
 ---
 
-{{ class_summary(class_name) }}
+{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Fixed progress ring") }}
 
 ## Examples
 
@@ -16,7 +17,7 @@ example_images: ../examples/controls/progress_ring/media
 --8<-- "{{ examples }}/determinate_and_indeterminate.py"
 ```
 
-{{ image(example_images + "/determinate_and_indeterminate.gif", alt="determinate-and-indeterminate", width="80%") }}
+{{ image(example_media + "/determinate_and_indeterminate.gif", alt="determinate-and-indeterminate", width="80%") }}
 
 
 ### Gauge with progress
@@ -25,4 +26,6 @@ example_images: ../examples/controls/progress_ring/media
 --8<-- "{{ examples }}/gauge_with_progress.py"
 ```
 
+{{ image(example_images + "/gauge_with_progress.png", alt="determinate-and-indeterminate", width="80%") }}
+
 {{ class_members(class_name) }}

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

@@ -1,10 +1,10 @@
 ---
 class_name: flet.Radio
 examples: ../../examples/controls/radio
-example_images: ../examples/controls/radio/media
+example_images: ../test-images/examples/material/golden/macos/radio
 ---
 
-{{ class_summary(class_name) }}
+{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Simple radio buttons") }}
 
 ## Examples
 
@@ -16,7 +16,7 @@ example_images: ../examples/controls/radio/media
 --8<-- "{{ examples }}/basic.py"
 ```
 
-{{ image(example_images + "/basic.gif", alt="basic", width="80%") }}
+{{ image(example_images + "/basic.png", alt="basic", width="80%") }}
 
 
 
@@ -26,7 +26,7 @@ example_images: ../examples/controls/radio/media
 --8<-- "{{ examples }}/handling_selection_changes.py"
 ```
 
-{{ image(example_images + "/handling_selection_changes.gif", alt="handling-selection-changes", width="80%") }}
+{{ image(example_images + "/handling_selection_changes.png", alt="handling-selection-changes", width="80%") }}
 
 
 ### Styled radio buttons

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

@@ -1,10 +1,10 @@
 ---
 class_name: flet.RangeSlider
 examples: ../../examples/controls/range_slider
-example_images: ../examples/controls/range_slider/media
+example_images: ../test-images/examples/material/golden/macos/range_slider
 ---
 
-{{ class_summary(class_name) }}
+{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Range Slider") }}
 
 ## Examples
 
@@ -25,4 +25,6 @@ example_images: ../examples/controls/range_slider/media
 --8<-- "{{ examples }}/handling_change_events.py"
 ```
 
+{{ image(example_images + "/handling_events.gif", alt="handling_events", width="80%") }}
+
 {{ class_members(class_name) }}

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

@@ -1,10 +1,10 @@
 ---
 class_name: flet.ReorderableListView
 examples: ../../examples/controls/reorderable_list_view
-example_images: ../examples/controls/reorderable_list_view/media
+example_images: ../test-images/examples/material/golden/macos/reorderable_list_view
 ---
 
-{{ class_summary(class_name) }}
+{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Reorderable list view") }}
 
 ## Examples
 
@@ -16,7 +16,7 @@ example_images: ../examples/controls/reorderable_list_view/media
 --8<-- "{{ examples }}/horizontal_and_vertical.py"
 ```
 
-{{ image(example_images + "/horizontal_and_vertical.gif", alt="horizontal-and-vertical", width="80%") }}
+{{ image(example_images + "/horizontal_and_vertical.png", alt="horizontal-and-vertical", width="80%") }}
 
 
 ### Custom drag handle

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

@@ -1,10 +1,10 @@
 ---
 class_name: flet.ResponsiveRow
 examples: ../../examples/controls/responsive_row
-example_images: ../examples/controls/responsive_row/media
+example_images: ../test-images/examples/core/golden/macos/responsive_row
 ---
 
-{{ class_summary(class_name) }}
+{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Responsive row") }}
 
 ## Examples
 
@@ -16,7 +16,7 @@ example_images: ../examples/controls/responsive_row/media
 --8<-- "{{ examples }}/basic.py"
 ```
 
-{{ image(example_images + "/basic.gif", alt="basic", width="80%") }}
+{{ image(example_images + "/responsive_row_basic.gif", alt="basic", width="80%") }}
 
 
 ### Custom breakpoints
@@ -25,5 +25,6 @@ example_images: ../examples/controls/responsive_row/media
 --8<-- "{{ examples }}/custom_breakpoint.py"
 ```
 
+{{ image(example_images + "/responsive_row_custom_breakpoint.gif", alt="basic", width="80%") }}
 
 {{ class_members(class_name) }}

sdk/python/packages/flet/integration_tests/examples/core/test_responsive_row.py

@@ -0,0 +1,123 @@
+import pytest
+
+import flet as ft
+import flet.testing as ftt
+
+from examples.controls.responsive_row import basic, custom_breakpoint
+
+
+@pytest.mark.asyncio(loop_scope="function")
+async def test_image_for_docs(flet_app_function: ftt.FletTestApp, request):
+    flet_app_function.page.theme_mode = ft.ThemeMode.LIGHT
+    await flet_app_function.assert_control_screenshot(
+        request.node.name,
+        ft.ResponsiveRow(
+            controls=[
+                ft.Button(
+                    f"Button {i}",
+                    color=ft.Colors.BLUE_GREY_300,
+                    col={
+                        ft.ResponsiveRowBreakpoint.XS: 12,
+                        ft.ResponsiveRowBreakpoint.MD: 6,
+                        ft.ResponsiveRowBreakpoint.LG: 3,
+                    },
+                )
+                for i in range(1, 6)
+            ],
+        ),
+    )
+
+
+@pytest.mark.parametrize(
+    "flet_app_function",
+    [{"flet_app_main": basic.main}],
+    indirect=True,
+)
+@pytest.mark.asyncio(loop_scope="function")
+async def test_basic(flet_app_function: ftt.FletTestApp):
+    flet_app_function.page.enable_screenshots = True
+    flet_app_function.resize_page(1000, 500)
+    flet_app_function.page.update()
+    for _ in range(5):
+        await flet_app_function.tester.pump(100)
+    flet_app_function.assert_screenshot(
+        "responsive1",
+        await flet_app_function.page.take_screenshot(
+            pixel_ratio=flet_app_function.screenshots_pixel_ratio,
+            delay=ft.Duration(seconds=1),
+        ),
+    )
+    flet_app_function.resize_page(800, 500)
+    flet_app_function.page.update()
+    for _ in range(5):
+        await flet_app_function.tester.pump(100)
+    flet_app_function.assert_screenshot(
+        "responsive2",
+        await flet_app_function.page.take_screenshot(
+            pixel_ratio=flet_app_function.screenshots_pixel_ratio,
+            delay=ft.Duration(seconds=1),
+        ),
+    )
+    flet_app_function.resize_page(200, 500)
+    flet_app_function.page.update()
+    for _ in range(5):
+        await flet_app_function.tester.pump(100)
+    flet_app_function.assert_screenshot(
+        "responsive3",
+        await flet_app_function.page.take_screenshot(
+            pixel_ratio=flet_app_function.screenshots_pixel_ratio,
+            delay=ft.Duration(seconds=1),
+        ),
+    )
+    flet_app_function.create_gif(
+        ["responsive1", "responsive2", "responsive3"],
+        "responsive_row_basic",
+        duration=1600,
+        disposal=ftt.DisposalMode.BACKGROUND,
+    )
+
+
+@pytest.mark.parametrize(
+    "flet_app_function",
+    [{"flet_app_main": custom_breakpoint.main}],
+    indirect=True,
+)
+@pytest.mark.asyncio(loop_scope="function")
+async def test_custom_breakpoint(flet_app_function: ftt.FletTestApp):
+    flet_app_function.page.enable_screenshots = True
+    flet_app_function.resize_page(1000, 800)
+    flet_app_function.page.update()
+    for _ in range(5):
+        await flet_app_function.tester.pump(100)
+    flet_app_function.assert_screenshot(
+        "responsive_custom_1",
+        await flet_app_function.page.take_screenshot(
+            pixel_ratio=flet_app_function.screenshots_pixel_ratio
+        ),
+    )
+    flet_app_function.resize_page(650, 800)
+    flet_app_function.page.update()
+    for _ in range(5):
+        await flet_app_function.tester.pump(100)
+    flet_app_function.assert_screenshot(
+        "responsive_custom_2",
+        await flet_app_function.page.take_screenshot(
+            pixel_ratio=flet_app_function.screenshots_pixel_ratio
+        ),
+    )
+    flet_app_function.resize_page(200, 800)
+    flet_app_function.page.update()
+    for _ in range(5):
+        await flet_app_function.tester.pump(100)
+    flet_app_function.assert_screenshot(
+        "responsive_custom_3",
+        await flet_app_function.page.take_screenshot(
+            pixel_ratio=flet_app_function.screenshots_pixel_ratio
+        ),
+    )
+    flet_app_function.create_gif(
+        ["responsive_custom_1", "responsive_custom_2", "responsive_custom_3"],
+        "responsive_row_custom_breakpoint",
+        duration=1600,
+        disposal=ftt.DisposalMode.BACKGROUND,
+    )