技術記事

micomia株式会社の井上です。今回はImageについて解説していきます。

初心者にも分かりやすく解説していくのでぜひご一読ください。

1. Imageとは

Imageは画像として普段から使う言葉である通り、写真やイラストを表示させたい時に使用するWidgetになっています。FlutterFlowではデータベースやURL、Asset(プロジェクトに保存している画像)で表示することができます。

2. Imageの実装方法

Imageは他のWidgetと同じように追加できます。

3. Imageの詳細設定

ここからは右側のProperties Panelを見ていきます。

まずはPaddingです。これも他のWidgetと同様上下左右に余白をつけることができます。

次にAlignmentです。これは画像の位置を調整することができます。

その下のWidthとHeightは画像のサイズを調整できます。

Radiusは大きくすると画像に丸みがつきます。

ちなみに、RadiusとWidthとHeightを全て同じ値にすると丸い画像にすることができます。

ただこれは次回の記事でも紹介しますが、CircleImageと言うWidgetで実装可能なのでそちらで実装した方が手っ取り早いです。Imageでも値を正しく設定すればCircle Imageと同じものが作れるということです。

次に、ImageTypeです。

ImageTypeは3種類あり、簡単にまとめると以下のようになります。

Network=URLから画像を読み込む

Asset Image=FlutterFlowに直接アップロードした画像を表示

Uploaded File=アップロードされてFirebaseに保存されている画像を表示

それぞれの用途に沿って使い分けてください。

例えば、自分のプロフィールの編集画面においてアイコン画像の表示をさせたい時は、

PathからAuthenticated Userを選択し、

今回はPhoto URL(ユーザーのアイコン画像を格納しているフィールドを選択してください)を選択すると自分のアイコンを表示させることができます。

この内容はまた別の記事で詳しく紹介するので頭の片隅に置いておいてください。

次にMake Expandableです。

これをONにすると画像をクリックした際に拡大表示されたり、ピンチアウトで拡大することができます。

その下にあるHero AnimationはAnimationの一種になるのでまた別の記事で紹介したいと思います。

4. さいごに

今回はImageについて解説していきました。ユーザーのアイコン画像や投稿画像など多くの場面で使用するWidgetになっているので本記事を参考にしながら必要に応じて活用してみてください。

本記事の内容を動画で見たい方は以下をご覧ください。

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