Flet の環境構築と基礎 (実行・ページ遷移)

Flutter を Python で使用できる Flet について, 基本的な使い方の覚え書き

検証環境

Flutter・Flet とは

インストール

pip install flet

最小限のアプリの作成

flet create $DIR

実行

flet run

ホットリロードについて

ページ遷移の実装

page と view について

それぞれの view の作成

def main_page_view(page: ft.Page):
    return ft.View(
        "/",
        controls=[
            ft.SafeArea(ft.Text("Hello, FletApp!")),
            ft.ElevatedButton("to test", on_click=lambda _: page.go("/test"))
        ],
        appbar=ft.AppBar(
            title=ft.Text(
                value="Flet App", size=32,
                text_align="center", color=ft.colors.BLACK
            ),
            bgcolor=ft.colors.GREEN_200
        )
    )
    
def test_page():
    return ft.View( 
        "/test",
        controls=[
            ft.Text("Test Page!")
            ],
        appbar=ft.AppBar(
            title=ft.Text(
                value="Test", size=32,
                text_align="center", color=ft.colors.BLACK
            ),
            bgcolor=ft.colors.GREEN_200
        )
    )
        
def main(page: ft.Page):
    def route_change(e):
        page.views.clear()
        
        # routing
        if page.route == "/":
            page.views.append(main_page_view(page))
        elif page.route == "/test":
            page.views.append(test_page())
            
        # update
        page.update()
    
    page.on_route_change = route_change
    page.go("/") # home page

その他