Fletで簡易アプリ作成

はじめに

Pythonを使用したWebアプリ作成として、StreamlitやGradioを今まで使用してきました。
今回Fletというライブラリの使用感を確かめてみました。

Fletとは

Flutterが基盤となっているPythonのWebアプリ作成のライブラリです。
Pythonでクロスプラットフォーム(Web、モバイル、デスクトップ)アプリを構築することが可能。

環境準備

ディレクトリ構成

以下のようなディレクトリ構成としています。

.
├── app
│   └── main.py
├── Dockerfile
└── requirements.txt

Dockerfile

Dockerを使用して、Fletを動かそうと思います。

Dockerfile

FROM python:3.12-slim

RUN useradd -m fletuser

RUN chsh -s /bin/bash fletuser

WORKDIR /app

COPY requirements.txt .

RUN chown -R fletuser:fletuser /app

USER fletuser

RUN pip install --no-cache-dir --user -r requirements.txt

ENV PATH="/home/fletuser/.local/bin:$PATH"

COPY ./app /app

EXPOSE 8550

CMD ["flet", "run", "--web", "main.py", "--port", "8550"]

requirements.txt

fletのライブラリを記載する。

requirements.txt

flet
flet_desktop

main.py

シンプルにHello world!を出力する画面。

main.py

import flet as ft

def main(page: ft.Page):
    page.add(ft.Text(value="Hello world!"))

ft.app(main)

Dockerイメージのビルド

以下コマンドでDockerイメージをビルドする。

docker build -t flet_test .

Dockerコンテナの起動

以下コマンドでDockerコンテナを起動する。

docker run -p 8550:8550 flet_test

http://localhost:8550/にアクセスすると、Hello world!の画面が現れる。

インタラクティブフォームアプリ

作成するアプリ

入力フォームに名前を入力したら、定型挨拶を返してくれるアプリを作成したいと思います。

全体のコード

import flet as ft


def main(page: ft.Page):
    def btn_click(e):
        if not txt_name.value:
            txt_name.error_text = "名前は必須入力です!"
            page.update()
        else:
            name = txt_name.value
            page.clean()
            page.add(ft.Text(f"こんにちは, {name}さん!"))

    txt_name = ft.TextField(label="名前を入力してください。")

    page.add(txt_name, ft.ElevatedButton("送信", on_click=btn_click))


ft.app(main)

解説

ft.TextField

ft.TextFieldでテキストフィールドを定義することができます。
そのフィールドで入力された値は、txt_name変数に格納されることになります。

txt_name = ft.TextField(label="名前を入力してください。")

ft.ElevatedButton

ft.ElevatedButtonは、陰で塗りつぶされたトーンボタンを構成できます。
第1引数にコンテンツ名を、on_click引数にボタンをクリックしたときの挙動を指定します。

ft.ElevatedButton("送信", on_click=btn_click)

ボタンの種類は様々ありますので、デザインに合ったボタンを使用すると良いと思います。

btn_click

ボタンをクリックしたときの挙動をmainの内部関数として定義します。

ft.TextFieldで定義したtxt_nameの値の有無によって条件分岐させています。

• 無い場合
  • 名前は必須入力です!と表示させる
  • 
• 有る場合
  • こんにちは, {name}さん!と表示させる
  • 

def btn_click(e):
    if not txt_name.value:
        txt_name.error_text = "名前は必須入力です!"
        page.update()
    else:
        name = txt_name.value
        page.clean()
        page.add(ft.Text(f"こんにちは, {name}さん!"))

おわりに

今回はPythonでFlutterベースのアプリが作成できるFletのサンプルアプリを作成してみました。
Streamlitと比べると少々癖があると思いますが、同じコードでクロスプラットフォームに対応しているのでメリットもあると思いました。
Fletはまだ新しいフレームワークなので、これから伸びてくる可能性を秘めていると思いました。
Pythonを使用した簡易アプリを作成するときの候補として、知見を持っておこうと思います。