技術記事

micomia株式会社の畑井です。
今回はFlutterFlowで検索機能を作成する方法を解説します。

1.検索機能を作るための土台を準備する

まずはこのようなWidget構成で検索機能を作るための準備をします。

データベースは何のコレクションを作ってもらっても問題ありませんが、今回はFirebaseで下記のコレクションを作成しました。

検索ボタンにActionsを設定する形で進めていきます。

実際に設定したアクションの中身はこちらです。
今回は投稿のタイトルを検索対象にします。
Search Termというところは検索ワードが入るところになります。
そのため、ここはTextField Widgetに入力された内容をセットします。

Max Resultsは検索結果を表示する件数になります。

設定が終わりましたら、ListViewの「Generating Children from Variable」を選択してください。ここは、リアルタイムに内容を表示することができるページになっていまして検索ボタンが押されるたびに検索結果に表示する内容を変えたいのでこのように設定しています。

Simple Search Resultという項目をクリックするとSimple Searchが出した検索結果を読み取ることができます。

表示するデータを「results」としたため、「results Item」と表示されています。
その中で検索結果としてpostsコレクションのタイトルを表示したいのでクリックします。

これで完成です。

2.Simple Searchの弱点

例えば「あ」や「a」といった一文字を打ち込んだ場合の検索結果がかなり良くないというデメリットがあります。「あ」や「a」が含まれている項目以外も表示されますのでこのあたりの精度は許容しなければなりません。
また、検索は部分一致であるため完全一致を希望の場合は別途コードを書く必要があります。

3.他の方法

Custom Functionで部分一致や完全一致の検索機能を設けることができます。
その場合、データベース側の処理をCustom Codeで書くと実装難易度が上がってしまうことから簡易的にWidgetの表示・非表示で処理する方法もあります。

4.まとめ

今回はFlutterFlowで検索機能を実装する方法について解説しました。
検索機能を強化しようとするとFirebaseでは厳しくなるのでSupabaseなど別のデータベースをご検討ください。

micomiaでは本記事で具体的に実装方法をご紹介できなかったコードを書いた検索機能などの実装に関するご相談などもお受けしておりますのでお気軽にお問い合わせください。

動画でもっと知りたい方はこちら