Flet tutorial 17 basic introduction to card components (tutorial includes source code)

Flet What is it?

Flet It's a framework , Make it easy for you to build real-time in your favorite language Web、 Mobile and desktop applications , And share them safely with your team . No front-end experience .

What is? GridView

Panel with slight rounded corners and elevation shadows .

Combat code

import flet
from flet import Image, Page, GridView, border_radius

def main(page: Page):
    page.title = "GridView Example"
    page.theme_mode = "dark"
    page.padding = 50
    page.update()

    images = GridView(
        expand=1,
        runs_count=5,
        max_extent=150,
        child_aspect_ratio=1.0,
        spacing=5,
        run_spacing=5,
    )

    page.add(images)

    for i in range(0, 60):
        images.controls.append(
            Image(
                src=f"https://picsum.photos/150/150?{i}",
                fit="none",
                repeat="noRepeat",
                border_radius=border_radius.all(10),
            )
        )
    page.update()

flet.app(target=main, view=flet.WEB_BROWSER)