【FlutterFlow】画像登録時のデフォルト画像の表示方法

プロフィールや商品情報などを登録する際にイメージ画像も合わせて登録するケースがあります。その際にデフォルトではシンプルな画像等を表示しておき、画像がアップロードされた際に置き換える処理の実装方法を紹介します。

FlutterFlowを使い始めたときに画像のアップロードはできたけど、デフォルト画像はどうするんだ！？って悩みましたので本内容を是非参考にしてもらえればと思います。

ゴールイメージ

このような感じです。

最初は「No-image」という枠を表示しておき、画像が選択されるとその画像に切り替えます。

手順

画像表示設定

まず、画像をアップロードして表示する機能を実装します。

• Media Displayを画面に配置
  ※Media Displayの代わりにImageでも問題有りません。
  動画も表示できるようにしたい場合はMedia Display、画像だけの場合はImageを選んでいただければと思います。

• 画像をアップロードするためのボタンを配置

• ボタンに対して画像をアップロードするアクションを追加
  アクションは「Upload/Save Media」を選択

• Upload mediaは”Firebase”, Media Type/ Sourceは”Either Camera or Gallery”でOKです。
  カメラ撮影も可能にしておきます。

• Media Displayで表示する画像のMedia Pathを設定します。
• Media PathはWidget Stateの”Uploaded File URL”を設定してください。

• これで画像をアップロードするところは作れました。しかし、画像をアップロードしていない場合は”object Event”というのが表示されて不格好です。
  左が画像登録前、右が画像登録後。ここから画像未登録時には別の表示（デフォルト画像など）を出す処理を実装していきます。

画像アップロード前のデフォルト表示設定

Conditional Builderを使って条件を分岐し、画像がアップされていない場合はデフォルトで別の表示を行うようにします。今回はコンテナにテキストを配置するだけのシンプルなものにしておきます。
独自の画像を配置するなども可能です。

• コンテナとテキストを配置。以下のようなイメージです。

• 画面上にConditional Builderを設置します。

• Conditional BuilderのIf, Elseの配下に先ほど作成したMedia Displayとコンテナを配置します。
  If配下はMedia Display、Else配下はコンテナを配置してください。
  Else配下にコンテナを配置する際はElseの横にある目のアイコンをONにしてから実施してください。

• Conditional Builderの条件に以下を設定します。Uploaded Fileがset/non-emptyの場合に先ほどセットした画像が表示されます。Elseを選択した場合はコンテナが表示されます。

これで完了です。

他の方法

今回はConditional Builderを使って実装しましたが、以下のようにMedia DisplayにDefault Valueを設定するやり方もあります。

以下のようにDefault Variable Valueに画像URLをセットするとその画像がデフォルトで表示されます。

まとめ

今回は画像を登録する際にデフォルトの画像を表示する方法を説明しました。ちょっとした機能ではありますが、どうすればいいかわからず、悩むポイント化と思います。

是非参考にしてもらえればと思います。