技術記事

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

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

1. Circle Imageとは

Circle Imageは前回の記事でも少し紹介しましたが、円形の画像のことです。

Imageとほとんど変わらない内容なのでImageについて詳しく知りたい方はこちらの記事をご覧ください。

Imageとは？｜初心者向けのFlutterFlow徹底解説

2. Circle Imageの実装方法

Circle Imageは他のWidgetと同じように実装できます。

3. Circle Imageの詳細設定

右側のProperties Panelを見ていきます。

基本的に調節できるのはPadding＆Alignmentの箇所と、Imageの箇所の二つです。

Padding&Alignmentの箇所は前回の記事で紹介したImageのものと同じなので今回は説明を省きます。

Imageの部分ではDiameter, Image Type, Pathがあります。Circle Imageは投稿が並んでいる箇所に投稿者としてそのユーザーのアイコンが表示される際に使われれうことが多いので大体40~45のサイズで使用することが多いです。

その下のImage TypeとPathはImage Widgetの記事で紹介したものと同じになっています。

4. さいごに

今回はCircle Imageについて解説していきました。Imageとほとんど変わらないものの、ユーザーのアイコンなどを表示させるときは非常に便利なWidgetになっているのでぜひ本記事を参考にしながら実装してみてください。

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

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