[初学者向け] 今話題のFletのいっちばん最初のチュートリアルのカウンターアプリをサクッと解説！！！！！！

目的

Fletに慣れていない方がチョ〜っとだけFletの書き方について理解を深める

そもそも"Flet"ってなんだよ？

FletはPython（現状では）でWebアプリケーションを開発するためのライブラリです。
Googleによって開発されたクロスプラットフォームのアプリケーション開発フレームワークであるFlutterを元に開発されています。
FlutterのUI部分をWeb上で動作するように拡張し、Webアプリケーションの開発を簡単にすることを目的に開発されています。
Fletを使用すれば、バックエンドエンジニアはPythonでWebアプリケーションの開発に慣れているため、仕組みを理解しやすくなります。
Webアプリケーションの開発に必要なHTML、CSS、JavaScriptを自動生成してくれるため、フロントエンドの技術を習得しなくても、一定の範囲ではユーザフレンドリーなシステムを開発することができます。

ただし、高度なデザインやインタラクティブな機能を実装するには、フロントエンドの技術の知識が必要になる可能性があります。

早速やってみよう

今回のカウンターアプリは公式ドキュメントの一番最初の例として挙げられているものです。
Flet Introduction 公式ドキュメント

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,
        )
    )


ft.app(target=main)

こんな感じの動きですねぇ

1. ft.app(target=main)でアプリケーションを起動し、main関数が呼び出されます。
2. main関数では、新しいPageオブジェクトを作成し、titleプロパティに"Flet counter example"という文字列を設定し、vertical_alignmentプロパティにft.MainAxisAlignment.CENTERを設定します。
3. そして、TextFieldオブジェクトを作成し、valueに"0"を、text_alignにft.TextAlign.RIGHTを、widthに100を設定します。
4. 次に、minus_click関数とplus_click関数を定義し、それぞれ、TextFieldのvalueを1つ減らす、1つ増やす処理をします。最後に、pageに、IconButtonのrowを追加し、それぞれminus_click関数、plus_click関数を呼び出します。
5. それによって、ユーザが「+」「-」ボタンをクリックすると、TextFieldのvalueが増減することができるアプリケーションが完成します。

最後にpython counter.pyとすることでアプリ画面が起動しますで。

んん？... 粒度を細かくして再度解説しますね！

• import flet as ftでfletライブラリをインポートしています。
• def main(page: ft.Page):でmain関数を定義しています。引数には、fletの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)で、0が入力されたテキストフィールドを作成しています。右寄せに設定し、幅は100に設定しています。
• def minus_click(e):で、マイナスボタンがクリックされた時のイベントハンドラを定義しています。
• txt_number.value = str(int(txt_number.value) - 1)で、テキストフィールドの値を1減らしています。
• page.update()で、画面を更新します。
• def plus_click(e):で、プラスボタンがクリックされた時のイベントハンドラを定義しています。
• txt_number.value = str(int(txt_number.value) + 1)で、テキストフィールドの値を1増やしています。
• page.update()で、画面を更新します。
• page.add(ft.Row(で、アイコンボタンとテキストフィールドを横に並べるft.Rowを追加しています。
• ft.app(target=main)で、main関数を実行し、アプリを起動します。

いやぁ、すごく便利ですねぇ。。。

私はバックエンドエンジニアですが、サクッとフロントのUI部分もいじることができるようになるんですね。
せめてJavaScriptくらいはちゃんと読めるようになっておきたいが。。。w
また引き続きFletについての記事を投稿していきますね〜🐰

参考

Flet document