![見出し画像](https://assets.st-note.com/production/uploads/images/37339299/rectangle_large_type_2_6e3f59c1e73c4a18955549c0d672c4a3.png?width=1200)
【Flutter】画像(image)を円形で表示する
Flutter毎日投稿43日目
今日はTwitterで言うところのユーザーアイコンのサムネイルのように、画像を円形に切り取って表示する方法を紹介します。
使用するウィジェトはCircleAvatarです。
これを使えば簡単に円形を作成することができます。
↓もともとの画像がこちらです。
CircleAvatarのbackgroundImageプロパティに画像をセットします。
child: CircleAvatar(
radius: 40,
backgroundColor: Colors.white,
backgroundImage: NetworkImage('https://hatchout.net/assets/images/logo_512_transparent.png'),
),
YouTubeでもFlutter入門の動画を配信しています。
ぜひご覧ください。
この記事が気に入ったらサポートをしてみませんか?