1. はじめに：Fletとは何か
Fletは、PythonだけでWeb、デスクトップ、モバイル向けのアプリケーションを開発できる革新的なフレームワークです。GoogleのFlutterをベースにしており、HTMLやJavaScriptの知識がなくても、Pythonコードだけで美しいUIを構築できます。Fletは「コントロール」と呼ばれる部品を組み合わせて画面を作り、リアルタイム通信やクロスプラットフォーム対応も標準で備えています。個人の業務効率化ツールから、チームで使うダッシュボードまで幅広く活用できるのが魅力です。
import flet as ft
def main(page: ft.Page):
page.title = "Flet入門サンプル"
page.add(ft.Text("こんにちは、Fletの世界へ！"))
ft.app(target=main)
2. Fletのインストールと開発環境構築
Fletはpipで簡単にインストールでき、追加の依存関係も不要です。インストール後はflet run ファイル名.pyでアプリをすぐに起動できます。開発サーバーは自動的に立ち上がり、Webやデスクトップで即座に動作確認が可能です。セットアップの手軽さもFletの大きな特徴です。
pip install flet
3. 最初のカウンターアプリ
Fletの基本を学ぶにはカウンターアプリが最適です。テキストフィールドと2つのボタンだけで、値の増減をリアルタイムで操作できます。UI部品（コントロール）はPythonのクラスとして扱い、イベント処理もシンプルです。
import flet as ft
def main(page: ft.Page):
page.title = "Fletカウンター"
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)
4. コントロールとレイアウトの基本
Fletでは「コントロール」と呼ばれるUI部品を組み合わせて画面を作ります。テキストやボタン、入力欄はもちろん、RowやColumnなどで柔軟なレイアウトも可能です。Flutterの思想を受け継ぎつつ、Python流の簡潔な記法でUIを構築できます。
import flet as ft
def main(page: ft.Page):
page.title = "レイアウト例"
page.add(
ft.Column([
ft.Text("上部テキスト"),
ft.Row([
ft.ElevatedButton("左"),
ft.ElevatedButton("中央"),
ft.ElevatedButton("右"),
], alignment=ft.MainAxisAlignment.CENTER),
ft.Text("下部テキスト"),
], alignment=ft.MainAxisAlignment.CENTER)
)
ft.app(target=main)
5. テキスト入力とイベント処理
テキストフィールドやボタンのイベント処理もPython関数で直感的に記述できます。ユーザーの入力値をリアルタイムで取得し、他のコントロールに反映させるインタラクティブなアプリも簡単です。
import flet as ft
def main(page: ft.Page):
input_box = ft.TextField(label="名前を入力してください")
output_text = ft.Text("")
def on_submit(e):
output_text.value = f"こんにちは、{input_box.value}さん！"
page.update()
page.add(input_box, ft.ElevatedButton("挨拶", on_click=on_submit), output_text)
ft.app(target=main)
6. チェックボックス・ラジオボタン・スイッチ
Fletにはチェックボックスやラジオボタン、スイッチなどの選択系コントロールも豊富に用意されています。これらを使うことで、ユーザーの選択肢を簡単に扱えます。
import flet as ft
def main(page: ft.Page):
cb = ft.Checkbox(label="Pythonが好き", value=False)
sw = ft.Switch(label="通知を受け取る", value=True)
rb1 = ft.Radio(value="A", label="選択肢A", group="grp")
rb2 = ft.Radio(value="B", label="選択肢B", group="grp")
page.add(cb, sw, rb1, rb2)
ft.app(target=main)
7. ドロップダウンとリスト表示
ドロップダウン（選択リスト）やリストビューも標準装備。大量の選択肢やデータを扱うアプリもPythonだけで完結します。
import flet as ft
def main(page: ft.Page):
dd = ft.Dropdown(
label="好きな言語",
options=[ft.dropdown.Option("Python"), ft.dropdown.Option("JavaScript"), ft.dropdown.Option("Go")]
)
lv = ft.ListView(
controls=[ft.Text(f"項目{i}") for i in range(1, 6)],
height=150
)
page.add(dd, lv)
ft.app(target=main)
8. 画像やアイコンの表示
Fletでは画像やアイコンも簡単に表示できます。ローカル画像やWeb画像、Flutter標準のアイコンも利用可能で、視覚的にリッチなUIを実現できます。
import flet as ft
def main(page: ft.Page):
img = ft.Image(src="https://flet.dev/static/icons/android-chrome-512x512.png", width=100, height=100)
icon = ft.Icon(ft.icons.FAVORITE, color="red", size=40)
page.add(img, icon)
ft.app(target=main)
9. ダイアログ・通知・モーダル
ユーザーへのフィードバックや確認にはダイアログや通知が便利です。Fletではシンプルな関数でこれらを表示でき、業務アプリにも最適です。
import flet as ft
def main(page: ft.Page):
def show_dialog(e):
dlg = ft.AlertDialog(title=ft.Text("確認"), content=ft.Text("本当に実行しますか？"))
page.dialog = dlg
dlg.open = True
page.update()
page.add(ft.ElevatedButton("ダイアログを表示", on_click=show_dialog))
ft.app(target=main)
10. グラフやデータ可視化
FletはPythonのデータ可視化ライブラリ（matplotlibやplotlyなど）と組み合わせて、グラフやチャートをアプリに組み込むことができます。リアルタイムなデータ表示も可能です。
import flet as ft
import matplotlib.pyplot as plt
import io
def main(page: ft.Page):
fig, ax = plt.subplots()
ax.plot([1, 2, 3, 4], [10, 20, 25, 30])
buf = io.BytesIO()
fig.savefig(buf, format="png")
buf.seek(0)
img = ft.Image(src=buf, width=300, height=200)
page.add(img)
ft.app(target=main)
11. レスポンシブデザインとレイアウト調整
FletはRowやColumn、Containerなどのレイアウトコントロールを使い、画面サイズに応じて柔軟にUIを調整できます。スマホやPCなど様々なデバイスで最適な表示が可能です。
import flet as ft
def main(page: ft.Page):
page.add(
ft.Row([
ft.Container(ft.Text("左"), bgcolor="lightblue", width=100, height=100),
ft.Container(ft.Text("中央"), bgcolor="lightgreen", width=100, height=100),
ft.Container(ft.Text("右"), bgcolor="lightpink", width=100, height=100),
], alignment=ft.MainAxisAlignment.SPACE_AROUND)
)
ft.app(target=main)
12. ファイルアップロード・ダウンロード
Fletではファイルのアップロードやダウンロードもサポートされています。業務ツールやデータ管理アプリにも応用できます。
import flet as ft
def main(page: ft.Page):
def on_upload(e):
file = e.files[0]
page.add(ft.Text(f"アップロードされたファイル: {file.name}"))
uploader = ft.FilePicker(on_result=on_upload)
page.add(ft.ElevatedButton("ファイルをアップロード", on_click=lambda e: uploader.pick_files()))
page.overlay.append(uploader)
ft.app(target=main)
13. マルチページ・ナビゲーション
Fletは複数ページのアプリや画面遷移もサポート。業務システムや大規模なアプリケーションの開発にも対応できます。
import flet as ft
def main(page: ft.Page):
def go_to_page2(e):
page.go("/page2")
def page2(page):
page.add(ft.Text("これは2ページ目です"))
page.add(ft.ElevatedButton("2ページ目へ", on_click=go_to_page2))
page.routes = {"/page2": page2}
ft.app(target=main)
14. Web・デスクトップ・モバイルへのデプロイ
FletアプリはWebブラウザ、Windows/Mac/Linuxのデスクトップ、モバイル（PWA）など様々な環境にデプロイできます。flet run --webでWebアプリとしても公開可能です。クロスプラットフォーム対応がFletの大きな強みです。
# Webアプリとして起動
flet run --web main.py
# デスクトップアプリとして起動
flet run main.py
15. まとめ：Fletの可能性と今後
FletはPythonだけでリッチなUIアプリを高速に開発できる次世代のフレームワークです。Flutterの美しいUIとPythonのシンプルさを融合し、個人開発からチーム開発、小規模ツールから業務ダッシュボードまで幅広く活用できます。今後も機能拡張が期待されており、Pythonエンジニアにとって新しい選択肢となるでしょう。ぜひ一度Fletでアプリ開発を体験してみてください。
Fletは「Pythonだけでここまでできるのか」と驚くほどの表現力と開発体験を提供します。あなたのアイディアをすぐに形にできるこの新しいフレームワークで、次世代のアプリ開発にチャレンジしてみましょう。