技術記事

micomia株式会社の畑井です。
今回はFlutterFlowでFirebaseに接続し、アプリを作る時に初心者の方がつまずきやすいQuery a collectionという概念について解説していきます。

1.まずはFirebaseと接続しましょう

FirebaseのProject IDをお見せすることができないので途中で画像を切っていますがProject IDが表示され、接続されていることを確認してください。

2025年9月28日現在のFlutterFlowの仕様ではFirebaseをBlazeにアップグレードしないとFlutterFlow側でStorageエラーが出ますが、それは画像等をアップロードできないだけでTestModeなどは利用できます。

2.ActionsからQuery a Collectionを選択する

まずはButtonなどを画面に配置して、ActionsからAction Flow Editorを開いてください。Firebaseに接続している状態になると画像のような「Query a collection」というものを選ぶことができると思います。
これが今回の本題となる機能になっています。
このアクションの考え方は「欲しいデータを検索して抽出」になります。

画像右側のメニューを確認してください。
Collectionのところには現在「users」が入っており、ここには欲しいデータが格納されているCollectionを選んでください。
次にその下のQuery Typeですが、こちらは「Lists of Documents」、「Single Document」、「Count」が用意されており、欲しいデータが複数ある場合は「Lists of Documents」を、1つの場合は「Single Document」を、データではなく該当個数だけ知りたい場合は「Count」を選択してください。

2-1.Filtersで絞り込み

次にその下のFiltersですが、こちらでそのDocument作成者が特定のユーザーのドキュメントだけ取りたい場合は、「作成者==user reference」などの条件をセットして欲しいデータを絞ることができます。

2-2.Orderingで並び替え

さらにデータを並び替えたい場合はOrderingからドキュメント作成時間などのフィールドをセットしてあげてください。
並び替えるとこのQuery a collectionの結果をListViewなどで表示するときに便利です。

2-3.Action Output Variable Nameをつけて完了

最後に「Action Output Variable Name」にこのアクションの名前をつけてあげれば完成です！

ここで定義したアクションの結果はAction Outputsからアクセスできますので確認してみてください。

3.動画でも解説しています

少し前にはなりますが、動画でも解説しているのでこちらも参考にしてみてください。こちらのチャンネルではFlutterFlowの動画を300本以上アップしています。

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