add example

Author: ndonkoHenri

client/pubspec.lock

@@ -157,10 +157,10 @@ packages:
     dependency: transitive
     description:
       name: characters
-      sha256: f71061c654a3380576a52b451dd5532377954cf9dbd272a78fc8479606670803
+      sha256: faf38497bda5ead2a8c7615f4f7939df04333478bf32e4173fcb06d428b5716b
       url: "https://pub.dev"
     source: hosted
-    version: "1.4.0"
+    version: "1.4.1"
   charcode:
     dependency: transitive
     description:
@@ -359,7 +359,7 @@ packages:
       path: "../packages/flet"
       relative: true
     source: path
-    version: "0.82.2"
+    version: "0.85.0"
   flet_ads:
     dependency: "direct main"
     description:
@@ -911,18 +911,18 @@ packages:
     dependency: transitive
     description:
       name: matcher
-      sha256: dc58c723c3c24bf8d3e2d3ad3f2f9d7bd9cf43ec6feaa64181775e60190153f2
+      sha256: dc0b7dc7651697ea4ff3e69ef44b0407ea32c487a39fff6a4004fa585e901861
       url: "https://pub.dev"
     source: hosted
-    version: "0.12.17"
+    version: "0.12.19"
   material_color_utilities:
     dependency: transitive
     description:
       name: material_color_utilities
-      sha256: f7142bb1154231d7ea5f96bc7bde4bda2a0945d2806bb11670e30b850d56bdec
+      sha256: "9c337007e82b1889149c82ed242ed1cb24a66044e30979c44912381e9be4c48b"
       url: "https://pub.dev"
     source: hosted
-    version: "0.11.1"
+    version: "0.13.0"
   media_kit:
     dependency: transitive
     description:
@@ -1628,10 +1628,10 @@ packages:
     dependency: transitive
     description:
       name: test_api
-      sha256: ab2726c1a94d3176a45960b6234466ec367179b87dd74f1611adb1f3b5fb9d55
+      sha256: "8161c84903fd860b26bfdefb7963b3f0b68fee7adea0f59ef805ecca346f0c7a"
       url: "https://pub.dev"
     source: hosted
-    version: "0.7.7"
+    version: "0.7.10"
   torch_light:
     dependency: transitive
     description:

sdk/python/examples/controls/responsive_row/scrollable/main.py

@@ -0,0 +1,66 @@
+import flet as ft
+
+
+def build_card(index: int, color: ft.Colors) -> ft.Container:
+    return ft.Container(
+        bgcolor=color,
+        border_radius=8,
+        padding=16,
+        content=ft.Column(
+            spacing=10,
+            controls=[
+                ft.Text(f"Card {index}", size=22, weight=ft.FontWeight.BOLD),
+                ft.Text("Line 1"),
+                ft.Text("Line 2"),
+                ft.Text("Line 3"),
+                ft.Text("Line 4"),
+                ft.Text("Line 5"),
+            ],
+        ),
+    )
+
+
+def main(page: ft.Page):
+    page.add(
+        ft.SafeArea(
+            expand=True,
+            content=ft.Column(
+                expand=True,
+                spacing=12,
+                controls=[
+                    ft.Text(
+                        "Resize the window height. The header stays visible while "
+                        "the responsive content scrolls."
+                    ),
+                    ft.ResponsiveRow(
+                        expand=True,
+                        scroll=ft.ScrollMode.AUTO,
+                        spacing=16,
+                        run_spacing=16,
+                        controls=[
+                            ft.Container(
+                                col={
+                                    ft.ResponsiveRowBreakpoint.XS: 12,
+                                    ft.ResponsiveRowBreakpoint.MD: 6,
+                                    ft.ResponsiveRowBreakpoint.LG: 4,
+                                },
+                                content=build_card(
+                                    i,
+                                    [
+                                        ft.Colors.BLUE_50,
+                                        ft.Colors.GREEN_50,
+                                        ft.Colors.AMBER_50,
+                                    ][i % 3],
+                                ),
+                            )
+                            for i in range(1, 10)
+                        ],
+                    ),
+                ],
+            ),
+        )
+    )
+
+
+if __name__ == "__main__":
+    ft.run(main)

sdk/python/examples/controls/responsive_row/scrollable/pyproject.toml

@@ -0,0 +1,26 @@
+[project]
+name = "responsive-row-scrollable"
+version = "1.0.0"
+description = "Keeps header content fixed while a tall ResponsiveRow of cards scrolls vertically."
+requires-python = ">=3.10"
+keywords = ["responsive row", "scroll", "layout", "cards", "adaptive columns"]
+authors = [{ name = "Flet team", email = "hello@flet.dev" }]
+dependencies = ["flet"]
+
+[dependency-groups]
+dev = ["flet-cli", "flet-desktop", "flet-web"]
+
+[tool.flet.gallery]
+categories = ["Layout/ResponsiveRow"]
+
+[tool.flet.metadata]
+title = "Scrollable"
+controls = ["SafeArea", "Column", "ResponsiveRow", "Container", "Text"]
+layout_pattern = "responsive-grid"
+complexity = "basic"
+features = ["scrollable content", "responsive columns", "fixed header"]
+
+[tool.flet]
+org = "dev.flet"
+company = "Flet"
+copyright = "Copyright (C) 2023-2026 by Flet"

website/docs/controls/responsiverow.md

@@ -25,4 +25,8 @@ import {ClassMembers, ClassSummary, CodeExample, Image} from '@site/src/componen
 
 <Image src={frontMatter.example_images + '/custom_breakpoint.gif'} width="70%" />
 
+### Scrollable content
+
+<CodeExample path={frontMatter.examples + '/scrollable/main.py'} language="python" />
+
 <ClassMembers name={frontMatter.class_name} />