前回FlutterFlowでドロップダウンにデータベースに登録している値を表示し、それをデータベースに登録するまでを解説しました。
今回は登録した値を編集する際にドロップダウンに登録されている値を初期値として表示する方法を解説したいと思います。特に面倒なデータベースの項目に他のテーブルの値をリファレンスとして設定しているケースを例に説明を行います。
今回のやり方はとりあえず動きますが、もっといい感じの実装方法もありそうな気がしています。今後、FlutterFlowの方でももう少し直感的にわかりやすい実装方法に変わってくる気がします。一つのやり方として参考にしてもらえればと思います。
ゴールイメージ
以下の画像のように登録した商品一覧を選択し、それを編集する際に設定項目中にあるドロップダウン（今回はカテゴリ）の初期値を設定します。初期値はもちろん、商品に設定されている値です。
- 今回利用するページは商品一覧ページ、商品編集ページの2つです。
前提
- データベースは以下のように設定します。
- 商品を登録するデータベースのテーブル（products）は以下です。
ここでのポイントは別で定義しているCategoriesのリファレンスとCategoriesの中に設定するcategory_numをproductsに含めている点です。
- Categoriesテーブルは以下のように設定します。こちらはシンプルにカテゴリー名とそのカテゴリー名を示すユニークな番号(category_num)になります。
- データベースに商品を登録しておいてください。商品登録ページを作成してからでもよいですし、データベースに直接データをセットするでも問題ございません。
以下がデータの例です。参考までに。
実装方法
ここではドロップダウンの初期値（特に今回のように他のテーブルのデータ）を設定するところにフォーカスして説明をします。他の部分の説明は大幅に割愛します。ベースとなる画面の説明は以下のページを参考にしつつ、作成をお願いします。
商品編集ページでPage Parametersを設定する
- 商品を編集するための商品編集ページを作成します。
項目は商品(Products）テーブルの中身を適当に配置してもらえればよいと思います。カテゴリーを設定するドロップダウンだけは確実に配置してください。
- 商品一覧ページから対象の商品とそのカテゴリーを受け取るためのPage Parametersを設定します。
Page Parametersは画面の右上から設定可能です。 - 以下のように商品情報、カテゴリー、カテゴリー番号を受け取れるように準備します。あとで前のページ（商品一覧）からこれらの項目を商品編集ページへ送る設定をします。
- ドロップダウンの初期値の設定はこの後説明します。とりあえずは一旦前ページ（商品一覧ページ）からデータを受け取る箱を作るところまで。
商品一覧ページの設定
- 商品一覧ページはデータベースに登録されている商品をリスト形式で表示します。
- 試験で分かりやすいように商品名とカテゴリー、写真だけ配置しました。
- 以下のようにリストに商品を設定して商品一覧がリストで表示されるようにします。右側の画像はListViewの設定です。
- ここでのポイントは”編集”ボタンを押したときに商品情報（参照）、カテゴリ（参照）、カテゴリ番号(category_num)を次ページ（商品編集画面）に送ることです。
- 編集ボタンに対してNavigation Toで商品編集ページ(editProduct)に遷移する設定を施しますが、その際に以下のように各データを次ページに送るアクションを追加してください。
商品詳細ページでドロップダウンの初期値を設定
- ドロップダウンの初期値として選択した商品のカテゴリーを表示するようにします。
- 表示する項目はApp Stateに設定し、App Stateの値をドロップダウンのカテゴリーで表示するようにします。
- App Stateに”appStateCategoryName”を追加します。以下のようにString型でカテゴリー名だけ設定できるようにします。
- 次に画面がロードされた際にこの”appStateCategoryName”に商品のカテゴリー名を設定します。
- 画面全体を選択してActionを選ぶと”On Page Load”という形でページがロードされた際のアクションの設定が可能になります。
- そこで以下の右側の画像のようにApp Stateの値をクリア → 商品に紐づくカテゴリー名を取得 → カテゴリー名をApp State (appStateCategoryName)に設定という順でアクションを設定します。
- 一つ目のアクションでApp Stateの値をクリアします。これは無くてもよいですが、タイミングによっては古い値が表示されてしまうことが無いように一旦クリアしています。
- ２番目のアクションではPage Parametersで受信したcategoryNumを使って該当のカテゴリーの名称を取得します。
設定は以下の通りでQuery a collectionを使ってデータベースのcategory_numの値がPage Parametersで受信したcategoryNumと同じカテゴリーを取得し、ActionのOutputとしてカテゴリー名をcategoryNameとして出力します。
- ３番目のステップとしてApp State (appStateCategoryName)の値に先ほどのアウトプットの値（categoryName）をセットします。Action Outputを使うことでアクションの結果をセットすることが可能になります。
- あとはドロップダウンの初期値(Initial Option Value, Hint Text）にApp Stateの値を表示するように設定するだけです。
これで商品一覧ページから商品編集ページへ遷移した際にドロップダウンに対象商品のカテゴリーをデフォルトで表示できるようになります。
このやり方を使うと、商品名を変更しても変更した商品名を表示することが出来、柔軟性が上がります。
まとめ
今回はドロップダウンの初期値の設定方法を説明しました。
FlutterFlowが作成した説明ページではデータベースにテキストを表示してそれを引っ張ってきて表示するような例が載っていましたが、それでは今回の例のカテゴリー名が変更になった場合などに対応できません。
ですので、柔軟性のあるやり方をご紹介しました。もっといいやり方がありそうで色々と試しましたが今のところ、このやり方が良さそうに思えましたのでご紹介しました。
このような作りはアプリのあちこちで発生するかと思いますので、参考になればうれしいです。
株式会社Spovisorではノーコード・ローコードツールを使ったシステム開発、アプリ開発を実施しています。
要件定義から伴走して支援し、安価・スピーディー・柔軟な開発を行います。無料でご相談もお受けしております。