Fletで簡単なアプリを実装してみた

PythonのフレームワークのひとつであるFletで簡単なアプリを実装してみたので作り方をまとめました。

Fletとは

Fletは、Pythonを使ってクロスプラットフォームで動作するフロントエンドアプリケーションを簡単に作成できるフレームワークです。
Googleが提供するFlutterをバックエンドに利用しており、Flutterの強力な UI機能をPythonで操作できます。
Pythonだけで記述できるため従来のFlutterよりも学習コストが低いです。
Webブラウザだけでなく、WindowsやMacOS、Linuxなどのデスクトップ環境、AndroidやiOSのモバイル環境にも対応しています。

環境構築

Dockerで開発環境を構築しました。
開発環境はこちらからダウンロードできます。

開発

main.pyの中身を書き換えます。

main.py

import flet as ft  # Flet モジュールをインポート

# アプリケーションのメイン関数を定義
def main(page: ft.Page):
    # ページのタイトルを設定
    page.title = "Flet counter example"
    # ページのコンテンツを中央に配置
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

    # カウンターの値を表示するテキストフィールドを作成
    txt_number = ft.TextField(
        value="0",                   # 初期値を0に設定
        text_align=ft.TextAlign.RIGHT,  # 右揃えに設定
        width=100                    # 幅を100ピクセルに設定
    )

    # 「-」ボタンがクリックされたときの処理を定義
    def minus_click(e):
        # テキストフィールドの値を1減らす
        txt_number.value = str(int(txt_number.value) - 1)
        # ページを更新して変更を反映
        page.update()

    # 「+」ボタンがクリックされたときの処理を定義
    def plus_click(e):
        # テキストフィールドの値を1増やす
        txt_number.value = str(int(txt_number.value) + 1)
        # ページを更新して変更を反映
        page.update()

    # ページに以下のコンテンツを追加
    page.add(
        # 横方向のレイアウトを作成 (Row)
        ft.Row(
            [
                # 「-」ボタン (アイコンボタン) を作成し、クリック時に minus_click を実行
                ft.IconButton(ft.icons.REMOVE, on_click=minus_click),
                # カウンター表示用のテキストフィールドを追加
                txt_number,
                # 「+」ボタン (アイコンボタン) を作成し、クリック時に plus_click を実行
                ft.IconButton(ft.icons.ADD, on_click=plus_click),
            ],
            alignment=ft.MainAxisAlignment.CENTER,  # ボタンとテキストフィールドを中央揃え
        )
    )

# アプリケーションを実行し、メイン関数をターゲットとして設定
ft.app(main)

実行

Dockerイメージをビルドします。

docker compose build --no-cache

コンテナを起動します。

docker compose up

コンテナに接続します。

docker exec -it app bash

カウンターアプリを起動します。

flet run --web ./src./main.py --port 8000

http://localhost:8000/に接続してカウンターアプリの画面が表示されていれば成功です。

今回はここまでです。