FlutterFlowでドロップダウンリストで検索をする方法を紹介します。実際に利用するシーンを想定した実装方法をご紹介したいと思います。実装のポイントになる部分を中心に説明しますので、わかりにくければごめんなさい。
EC系サイトのイメージで登録された商品情報をドロップダウンリストでカテゴリを選択するような使い方を例に実装方法を紹介します。
商品登録方法については以下のブログを参考にしてください。
このブログの内容を前提に説明を実施したいと思います。
ゴールイメージ
以下の動画のように商品一覧のリストがあり、ドロップダウンでカテゴリを選択すると、該当のカテゴリのデータのみ表示されるような実装を行いたいと思います。
今回の実装は以下の観点も取り入れています。以下の観点が無ければもっとシンプルに実装出来ますが、あまり実践的ではないのでこれらの考慮もしています。
- 後からカテゴリ名が変更されても動作する
- ドロップダウンを選択後、解除もできる（単純な実装だと解除が出来なかったりします）
準備
- 以下のようなデータベースを準備しています。一つは商品（products)、もう一つはカテゴリー(Categories)。
商品(products)にはcategoryをDoc Referenceで持たせているのに加え、category_numも持たせるようにしています。いま今、これが無いとうまく動かないので。
- カテゴリーに登録するデータは以下のようになっています。
ここでのポイントは「選択してください」という名前のカテゴリーも登録していることです。あとからこの「選択してください」を選ぶとカテゴリー選択がクリアされるような実装をする際に活躍します。
実装方法
商品のリストを作成
- まずは商品を表示するためのListViewを作成します。表示する項目はお好きな内容にしてください。
ここでは以下のようにしています。
- ListViewのデータはこちらです。今はシンプルに商品（products）の内容をすべて取ってくるようにしています。あとからドロップダウンで選択したカテゴリの商品だけ表示するリストも作成します。
ドロップダウンボックスを設置
- 画面上部にドロップダウンボックスを設置します。ドロップダウンはForm Elementにありますのでそちらから選択してください。
- ドロップダウンの設定は以下のようにしています。Query CollectionでCategories CollectionのDocumentのlistを取得しています。
プロパティは各カテゴリー名を割り当てています。
Local Page State Variablesに選択されたカテゴリを格納
- ちょっと面倒くさいのですが、Local Page State Variablesに選択されたカテゴリー（正確にはcategoryNum）を格納します。まずは、格納するための箱を以下のように作成します。
他にいいやり方あるかも、ですがカテゴリの値が変更になった場合も動作させようとすると今はこのようなやり方になるかなぁ、という感じです。
- ドロップダウンの値が変更された際に作成したPage State Variablesにカテゴリー（CategoryNum)を格納するアクションを追加します。
アクションはドロップダウンのウィジェットに対して設定します。流れはドロップダウンの値が変更（on SelectedでOK）されると、選択されたカテゴリ名に該当するcategoryNumを取得してそれをPage State Variablesに格納するという形です。
- 具体的なアクションは以下です。categoryNumをPage State Variablesにセットする際にはAction Outputsを使って設定を行ってください。
こちらがAction_outputsのイメージ
商品リストの出しわけを行う
ここではドロップダウンでカテゴリが選ばれた場合、カテゴリが選ばれていない場合で商品リストの出しわけを行う方法を説明します。
カテゴリが選ばれていない場合＋「選択してください」が選択された場合は上で作成をしたすべての商品を表示します。
カテゴリが選ばれた場合はそのカテゴリでフィルタリングをした商品を表示します。
- ConditionalBuilderをWidget Treeに追加し、商品リストをIf, Elseの配下に配置します。商品リストはとりあえずはコピーして同じものを配置してもらってOKです。
- ConditionalBuilderの条件は以下です。
ドロップダウンでカテゴリが選択されている場合、且つ「選択してください」が選択されていない場合はIf配下のリストを表示するようにしています。
それ以外（ドロップダウンでカテゴリ未選択もしくは「選択してください」が選択）の場合はElse配下のリストが表示されます。
- If配下の商品リストのデータを修正します。
以下のようにpage state variablesにセットされているカテゴリー（categoryNum)と同じカテゴリーだけ取得するようにフィルターをセットします。
これでカテゴリー選択時には選択したカテゴリーの商品だけが表示されるような実装が出来ているかと思います。そして「選択してください」を選んだ場合はすべての商品が表示されるようになっているはずです。
まとめ
今回はドロップダウンリストで選択したカテゴリーの商品だけ表示させる方法を説明しました。
もうちょっとすっきりとした実装方法が出来ればいいなぁと思いますが現状はこんな感じでの実装方法になるかと思います。すぐにもっとシンプルに実装できるようになる気もしますが。（すでにいい方法があれば教えてください）
複数のドロップダウンリストを使った絞り込み検索方法についても記事にしています。こちらからご覧ください。
それでは。
株式会社Spovisorではノーコード・ローコードツールを使ったシステム開発、アプリ開発を実施しています。
要件定義から伴走して支援し、安価・スピーディー・柔軟な開発を行います。無料でご相談もお受けしております。