【Flutter】 画像を角丸で表示する方法

今回は、Flutterで表示する画像を角丸にする方法をご紹介します。

簡単に実装することができるのでぜひ最後までご覧ください。

画像を角丸で表示する方法

画像を角丸で表示するには「ClipRRect」ウィジェットを用います。

角丸にしたい画像に対して上記ウィジェットを適用し、「borderRadius」プロパティで角の丸み具合を調整します。

ClipRRect(
  borderRadius: BorderRadius.circular(50),  //丸み具合を調整
  child: Image.asset(表示したい画像のパス)
),

こちらのコードを実行して表示した結果は以下です。

BorderRadius.circularの値を大きくすれば角が丸くなり、小さくすれば角は尖っていきます。

お好みの丸み具合に調整してみてください。

おわりに

今回は、Flutterで表示する画像を角丸にする方法をご紹介させていただきました。

画像のデザインをする中で角を丸くしたい機会はよくあると思います。この方法を知っていれば簡単に実装できるのでぜひ活用してみてください。

当ブログではプログラミング学習に関するコンテンツを執筆しております。

他にもFlutterの学習に関する記事を用意しておりますので、ぜひ合わせてご覧ください。

Flutter記事まとめ

FlutterとDartの学習に関する記事をまとめております。Dartの文法に関する記事やFlutterのWidgetの活用、エラーの解決方法などFlutterに関する記事を執筆しております。

pryogram.com

最後までご覧くださりありがとうございました。