Flutter: 画像を丸く切り抜いて表示する

プログラミング
スポンサーリンク




大変です! プロフィール画像を藤吉夏鈴ちゃんの写真に変更したのですが、四角く表示されてしまっています!

 

 

このままでも十分、十分!!!!に可愛いくて藤良し!という感じなのですが(ドユコト)、せっかく丸くて可愛いお顔をしてらっしゃるので、どうせなら丸く表示して、もっと可愛く藤もっと良し!という感じで表示したいですよね!?(ていうかほんとに可愛いですねこの子 前世で世界でも救ったんですかね?)

そこで今回は、Flutterで画像を丸く切り抜いて表示する方法について、開設していきたいと思います!

 

スポンサーリンク

ソースコード

// 画像のURL
final url = "画像のURL";

// 画像の半径
final radius = 100


return Container(
  width: radius, // 画像の幅
  height: radius, // 画像の高さ
  decoration: BoxDecoration(
    shape: BoxShape.circle, // Containerを丸くする
    image: DecorationImage(
      fit: BoxFit.fill, // 親Widget(今回はContainer)と同じサイズになるように調整する
      image: NetworkImage(url),
    ),
  ),
);

 

 

実行結果

無事に丸く切り抜いて表示することができました!

めちゃくちゃ可愛いですねほんとに

 

 

解説

今回は、Containerを丸く切り抜き、その中に画像を表示することで、画像を丸く切り抜いて表示させています。

 

① 画像を表示するためのContainerを生成します。丸く切り抜くので、widthとheightには同じ値を指定しなければならないことに、注意してください。

return Container(
  width: radius,
  height: radius,
);

 

 

② ①で生成したContainerの引数にBoxDecorationを渡し、丸く切り抜きます。

return Container(
  width: radius,
  height: radius,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
  ),
);

 

 

③ ②で生成したBoxDecorationの引数にDecorationImageを追加し、画像を表示します。

この時、fitにBoxfit.fillを渡さないと、Containerと同じサイズにならないため、うまく表示することができません。

return Container(
  width: radius,
  height: radius,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    image: DecorationImage(
      fit: BoxFit.fill,
      image: NetworkImage(doc.data.data()[Strings.PROFILE_IMAGE_PATH]),
    ),
  ),
);

 

 

これで、画像を丸く切り抜いて表示させることができました!

 

コメント

タイトルとURLをコピーしました