今回は FlutterFlow の「App State（アップステート）」について解説します。
初心者の方でも理解しやすいように、実際のデモを交えて「App Stateの基本的な使い方」を紹介します。
App Stateとは？基本の考え方
まず、App State（アップステート）とは アプリ全体で共有できる“状態変数” のことです。
FlutterFlowのドキュメントによると、App Stateは次のように説明されています。
「アプリケーションの現在の状態を保持する特定の変数であり、アプリ全体のページやコンポーネントからアクセス・変更が可能」
つまり、アプリ全体で共有したい情報を一時的に保存できる“箱”のようなものです。
App Stateでできることの例
App Stateを活用すると、アプリ内で次のようなことが可能になります。
- ✅ ログイン情報を保持
→ ログイン状態をページをまたいでも維持。 - ✅ ユーザーが選択した内容を保持
→ ドロップダウンやチェックボックスの選択内容を保存。 - ✅ カート情報を保存
→ Amazonのようなショッピングアプリで、商品データを保持。
このように、ユーザーの操作やアプリの状態をページをまたいで維持できるのがApp Stateの特徴です。
ここでは、実際にFlutterFlow上で「ユーザーが選んだ情報をApp Stateに残す」動作を作ってみます。
ステップ①：ユーザーの選択UIを作る
まず、ユーザーが何かを選べるようにするため、次のウィジェットを用意します。
- ドロップダウンメニュー：例）食べ物・飲み物・おやつ
- テキストフィールド：ユーザーに自由入力してもらう欄
- ボタン：「次の画面へ」ボタン（画面遷移＋App State更新）
この構成で、ユーザーはドロップダウンから項目を選び、文字を入力して、ボタンを押すことで次の画面に進む流れになります。
ステップ②：App Stateを作成する
App Stateは「保存用の箱」を作る作業です。
FlutterFlowの左メニューで「App State」を開き、新しい変数を追加します。
例として以下の2つを作成します。
| App State名 | 型（Type） | 用途 |
|---|---|---|
food | String | ドロップダウンで選んだ項目（例：おやつ） |
name | String | テキストフィールドに入力された内容（例：じゃがりこ） |
これで、アプリ内に「food」と「name」という2つの箱が用意されました。
ステップ③：ボタンにアクションを追加
次に、「次の画面へ」ボタンを押したときに、App Stateに値を保存するアクションを追加します。
【手順】
- ボタンのアクションを開く
- 「Update App State」を選択
- 以下のように設定
- Set Field:
food
Value: ドロップダウンで選択された値 - Set Field:
name
Value: テキストフィールドに入力された値
- その後に「Navigate to Home（次の画面へ）」アクションも追加
これで、ボタンを押すたびにApp Stateへデータが保存され、かつ次の画面へ遷移するようになります。
ステップ④：実際に確認してみる
実行（Run）してデバッグパネルを開くと、App Stateの中身が確認できます。
【実行例】
- ドロップダウン → 「おやつ」
- テキストフィールド → 「じゃがりこ」
- 「次の画面へ」を押す
結果 → App Stateの food に「おやつ」、name に「じゃがりこ」が保存されます。
さらに、画面を切り替えてもこれらのデータはアプリが起動している間は保持され続けることが確認できます。
ステップ⑤：App Stateを更新する
App Stateは、同じ変数に新しい値を設定すれば自動的に更新されます。
たとえば、次のように値を変更できます。
- ドロップダウン → 「飲み物」
- テキスト → 「ミルクティー」
- ボタンを押す
すると、food が「飲み物」、name が「ミルクティー」に更新されます。
このように、App Stateはアプリ全体で状態を共有しながら、リアルタイムに更新できるのが魅力です。
まとめ：App Stateを使いこなして、より動的なアプリへ
今回の解説では、FlutterFlowのApp Stateの基本的な使い方を実演しました。
- ✅ App Stateはアプリ全体で共有できる「状態変数」
- ✅ データを保持・更新でき、ページをまたいでも維持
- ✅ 実装例：ドロップダウンとテキスト入力を保存する仕組み
App Stateを理解すると、ログイン状態の維持やユーザー設定保存など、実用的なアプリ構築の幅が一気に広がります。
