第3回まで無料

Flet 入門コース

環境構築から、レイアウト・入力・宣言的な書き方・画面遷移・テーマ・保存・通信・グラフ、そして .app / .exe / .apk への配布まで。全20レッスンで「Python だけで家計簿アプリを作り、配れる形にする」ところまで進みます。コードと実行結果はすべて Python 3.13.15 / Flet 0.86.5 で実際に動かしたものです。

レッスン 1 からはじめる 全コースを解放する

カリキュラム

全20レッスンを5つの章に分けています。第1章から順に進めるのがおすすめですが、 気になるところだけ拾い読みしてもかまいません。 ※ ブラウザ内で実行できないため、手元に pip install "flet[all]" で Flet 0.86 系を入れて flet run で試してください。ネット上の記事の多くは 0.6x 以前のもので、そのままでは動きません。

Chapter 1 — Flet の基本（第1〜4回）

Flet の環境を作り、画面に部品を置いて並べ、見た目を整えるところまでを扱います。最後は家計簿の明細1行を、余白・背景色・角丸つきのカードとして組み立てられるようになります。

1

Flet を動かす — 環境構築と最初の画面

flet[all] の導入と flet create。ft.run(main) と page.add() で最初の1画面を出し、同じコードを --web でブラウザに出す。

Free
2

コントロールと page.controls

コントロールはただのデータクラス。ボタンの4種類と ListTile、e.control と data でハンドラを共有する書き方。

Free
3

Row と Column — expand で余白を引き取る

主軸は alignment、交差軸だけ別名。expand=True が右寄せの正体。はみ出しは wrap と scroll で受ける。

Free
4

Container で見た目を作る

padding は塗られて margin は塗られない。0.86 の大文字クラスと、色を役割で指定する書き方。

🔒 ベーシック

Chapter 2 — イベントと入力（第5〜8回）

ボタンや入力欄からアプリを動かします。更新が画面へ届く仕組みを押さえ、検証つきの入力フォームと、スワイプで消せる明細一覧まで作ります。

5

イベントと状態更新の仕組み

属性への代入がどう画面に届くか。update() が要る2つの場面と、yield で途中経過を出す書き方。

🔒 ベーシック
6

TextField とバリデーション

0.86 の error は error_text ではない。検証を1関数に集め、消すのは早く出すのは遅く。focus() は await が要る。

🔒 ベーシック
7

選択系コントロールの使い分け

選択肢の数で選ぶ。Dropdown だけ on_select、SegmentedButton の selected は list、DatePicker は page.add() しない。

🔒 ベーシック
8

ListView と Dismissible で一覧を作る

ListView は見えているぶんだけ作る。expand=True が要る理由と、スワイプ削除でデータと画面を両方消す作法。

🔒 ベーシック

Chapter 3 — 宣言的な書き方（第9〜11回）

「画面をこう変える」をやめて「こう見えるはず」を返す書き方に移ります。component とフックで状態を扱い、最後は store を切り出して UI を知らない層を作ります。

9

component と use_state で宣言的に書く

「画面をこう変える」をやめて「こう見えるはず」を返す。凍結されるコントロール、新しい値を渡す作法、key の付け方。

🔒 ベーシック
10

use_effect・use_memo・use_ref

起動時に1回だけ読み込む書き方と、重い集計を毎回やらない工夫。実測 336ms → 52ms。フックの順番のルール。

🔒 ベーシック
11

Observable と Context で状態を1か所に

props のバケツリレーを止める。@ft.observable な store と create_context / use_context、グローバル参照が更新されない理由。

🔒 ベーシック

Chapter 4 — 画面を組み立てる（第12〜16回）

1画面のアプリに骨格を付けます。ルーティングで画面を分け、ナビゲーション・ダイアログ・テーマ・画面幅への対応まで進み、アプリとして成立する形にします。

12

Router で画面を分ける

ft.Router と render_views。戻るボタンが出ないのは View が積まれていないから。URL パラメータと 404 の作法。

🔒 ベーシック
13

AppBar とナビゲーション

骨格は View が持つ。下タブの選択位置はルートから計算する。「進む」は children、「切り替える」は兄弟。

🔒 ベーシック
14

ダイアログと SnackBar

開いているかどうかも状態。use_dialog は毎回呼ぶ。Undo は削除前に位置を控える。確認と取り消しの使い分け。

🔒 ベーシック
15

テーマとダークモード

color_scheme_seed に1色渡せば明暗どちらの配色もできる。役割で書いた色が破綻しない理由の回収。

🔒 ベーシック
16

レスポンシブとアダプティブ

ResponsiveRow は並べ方しか変えられない。構造を変えるなら on_resize で幅を見る。SafeArea と adaptive の扱い。

🔒 ベーシック

Chapter 5 — データと配布（第17〜20回）

閉じても消えないアプリにします。保存・外部 API・グラフと表を扱い、最後は flet build で .app / .exe / .apk として配れるところまで進みます。

17

データの永続化

保存先は FLET_APP_STORAGE_DATA から取る。一時ファイル経由で置き換え、version を最初から入れる。SharedPreferences はサービス。

🔒 ベーシック
18

非同期処理と外部 API

通信の層を切って例外を1種類に。timeout・3状態・finally。asyncio で逃がせない処理は run_thread へ。

🔒 ベーシック
19

グラフと DataTable

ft.PieChart は無い。グラフは flet-charts。凡例は自作、系列色は固定。DataTable は自分では並べ替えない。

🔒 ベーシック
20

flet build で配布する

OS ごとのビルドと必要な環境。pyproject.toml の dependencies が同梱される。flet run --web と flet build web の違い。

🔒 ベーシック

全20レッスンを終えたら、土台を固め直す Python 入門コース や、同じ Python で API 側を書く FastAPI 入門コース へ。メンバーシップで全コースが解放されます。