【FlutterFlow】値がNull/emptyのデータをリストに表示させない方法

FlutterFlowでListViewを使う際にフィールドの値がNullのドキュメントをリストに表示しない方法について解説します。簡単に実装出来そうで、何気に簡単じゃなかったのでそのような実装をされたい方は是非参考にしてください。

今後、この機能は改善されてきそうですが、今時点ではこれが簡単に出来る方法かも、という内容をご紹介します。

実現したいこと

• データベースのフィールドがNullのものをリストに表示しない。
• 今回の例ではユーザーを格納しているusersコレクションにおいてプロフィール画像（photo_url）がNullのものをリストに表示しないようにします。
• 左型が画像がNullのものを除外したリスト、右が除外していないリストです。

データの状態

• データベースの構造は以下のようになっていてphoto_urlのフィールドが含まれています。

• 今回除外するケースではFirestore上、以下のようにphoto_urlのフィールドが存在しないケースになります。

前準備

• ListViewの設定方法を簡単に説明します。左の図のようにListView配下に画像とユーザ名を表示するようにしています。
• ListViewに設定するデータはusersコレクションのList of Documentsとしています。

• 画像はListViewのusers Documentのphoto_urlを設定しています。ユーザー名も同様にusers Documentのdisplay_nameとしています。

これでusersコレクション配下の全ユーザーがプロフィール画像の有無によらず表示されるところまで出来ているかと思います。以下の状態ですね。

ここにフィルターをかけていくことでプロフィール画像がNullのデータを非表示にしていきます。

うまく動かない方法

まず、うまく動きそうで動かなかった実装方法を紹介します。かなりうまく動きそうな雰囲気があるだけに将来的に改善されてきそうな気がしますが、2024年6月末断面ではうまく動作していません。

• ListViewのフィルターを以下のように設定します。[photo_url] not equal to [Null]。Nullの条件はConstants配下にある[Null]を設定しています。

かなりうまくいきそうな雰囲気を出していますが、なぜか画像がNullのモノも含めてすべて表示されます。

うまく動く実装方法

以下の方法だとうまくNullのモノを除外してリスト表示できます。

• ListViewのデータを設定する際のフィルタリング条件で[photo_url] Not Equal To [“”]を設定するとNullのモノが除かれて表示されます。

不思議な感じもしますが、Combine Textに[“”]を設定するとNullのものをひっかけてくれるようです。

もし、データベースの値が以下のようにphoto_url:””と[“”]が入っていた場合は以下の右図のようにCombine Textの指定をブランクにするとphoto_url:””のデータをひっかけてくれます。

“”とブランクの設定は逆じゃない？という気もしますが現状このような形になっています。

とりあえずは、これでフィールドがNullのドキュメントを除いたリストを作成することが出来ます。

まとめ

今回は値がNull（もしくはempty）のデータを除いたデータのみListViewに表示する方法をご紹介しました。ちょっとしっくりこない所もありますが、このような方法でも実装できるということで見てもらえればと思います。

もっといいやり方もあるかもしれませんが、一つの方法としてこんなやり方もあるんだぁ、と参考になればと思います。