Flet超入門

key

デスクトップアプリを作ろうとした際にFletという比較的モダンなフレームワークがあったので使ってみたという話です。


Fletとは

2022年に登場した新しめのフレームワークでFlutterをベースとしているようです。Flutter自体がモダンなUIデザインを持っていてこれをPythonのGUIアプリを作成する際にも使えるようにしたフレームワークといったところでしょう。HTMLやCSSを書く必要が無いため学習コストは低めですが、その分のカスタマイズ性も落ちているので現時点では小規模システムや社内システム向けと思います。

Hello world

公式ドキュメントに従ってインストールとHello worldソースを書いてみます。

  • インストール

pip install flet

  • Hello world

import flet as ft

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

  • run

flet run hello.py

デスクトップアプリが起動しHello worldと表示されました。起動自体はpython hello.pyのように記載しても起動するようですがfletコマンドで起動するとソースを書き換えると起動中のアプリに即反映してくれるようなのでfletコマンド推奨のようです。

公式Introduction

次は公式のIntroductionをベースにコードを軽く掘ってみます。

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(main)

Fletの開発の基本は"page"変数に対して必要な要素を乗せていくようなイメージで、タイトルや要素の寄せる位置については4~5行目のようにpage内の属性に指定することができ、ボタンなどのFlet上で"control"と呼ばれるものはpage.add()やpage.controls.append()を使ってpage上に追加していく。
上記のソースではpage.add()の中でft.Row()を使うことで配置のレイアウトを指定したうえでボタンとテキストフィールドを配置している。
また、ソースの通りでボタンなどのコントローラ内にイベントを指定してイベント発火時に任意のメソッドを実行することも可能となっている。

所感

冒頭でも記載の通りUIは優れているためシンプルなシステムを作る場合にはとてもよいフレームワークだと感じました。
一方でシステムが複雑になってくるとフロントとバックがどちらもPythonなので管理が難しくなってしまうというデメリットもありそうですので、部品ごとにクラスを細分化して管理するなど工夫が必要であると感じました。
公式のチュートリアルでは複数クラスを使っての開発も取り上げているので引き続き読み進めてみようと思います。


いいなと思ったら応援しよう！