広告

Flutterラボの

プレミアム会員になる

【Flutter】画像(image)を円形で表示する

2020.10.24

Flutter毎日投稿43日目
今日はTwitterで言うところのユーザーアイコンのサムネイルのように、画像を円形に切り取って表示する方法を紹介します。

使用するウィジェトはCircleAvatarです。
これを使えば簡単に円形を作成することができます。

↓もともとの画像がこちらです。

画像1

CircleAvatarのbackgroundImageプロパティに画像をセットします。

child: CircleAvatar(
 radius: 40,
 backgroundColor: Colors.white,
 backgroundImage: NetworkImage('https://hatchout.net/assets/images/logo_512_transparent.png'),
),

画像2

YouTubeでもFlutter入門の動画を配信しています。
ぜひご覧ください。


Flutterラボ
hatchoutschool
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ 広告のECサイトを開発(https://ec-ad.tech/)