【初心者向け】Fletのチュートリアルをやってみる

import flet as ft

def main(page: ft.Page):
    page.title = "Flet counter example"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

    txt_number = ft.TextField(value="0", text_align=ft.TextAlign.RIGHT, width=100)

    def minus_click(e):
        txt_number.value = str(int(txt_number.value) - 1)
        page.update()

    def plus_click(e):
        txt_number.value = str(int(txt_number.value) + 1)
        page.update()

    page.add(
        ft.Row(
            [
                ft.IconButton(ft.icons.REMOVE, on_click=minus_click),
                txt_number,
                ft.IconButton(ft.icons.ADD, on_click=plus_click),
            ],
            alignment=ft.MainAxisAlignment.CENTER,
        )
    )

ft.app(target=main)

💡

サンプルプログラムは公式ドキュメントのものを使っています。

サンプルプログラムを実行

✅ターミナルやコマンドプロンプトを開き、サンプルプログラムがあるディレクトリに移動する。

cd /Users/hoge/sample

✅プログラムを実行する。

python counter.py

こんな感じのデスクトップアプリがプログラムが起動すれば成功！

Webアプリとして起動

view=ft.WEB_BROWSERを付けるだけでブラウザで起動するようになる！

✅最後の1行だけ変更する。

/Users/hoge/sample/counter.py

import flet as ft

def main(page: ft.Page):
    page.title = "Flet counter example"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

    txt_number = ft.TextField(value="0", text_align=ft.TextAlign.RIGHT, width=100)

    def minus_click(e):
        txt_number.value = str(int(txt_number.value) - 1)
        page.update()

    def plus_click(e):
        txt_number.value = str(int(txt_number.value) + 1)
        page.update()

    page.add(
        ft.Row(
            [
                ft.IconButton(ft.icons.REMOVE, on_click=minus_click),
                txt_number,
                ft.IconButton(ft.icons.ADD, on_click=plus_click),
            ],
            alignment=ft.MainAxisAlignment.CENTER,
        )
    )

# ✅view=ft.WEB_BROWSERを付ける
ft.app(target=main, view=ft.WEB_BROWSER)