どうも、たくチャレ(@takuchalle)です。

Twitter やインスタグラムみたいにアイコンを丸くしたい時ありますよね。

そんなときはCircleAvatar Classが使えます!

アイコン画像がある場合

一番簡単な方法はこちら。アイコン画像が置いてある URL をそのままNetworkImageに渡してそれをCircleAvatarbackgroundImageにセットするだけです。

CircleAvatar(
  backgroundImage: NetworkImage(userAvatarUrl),
)

アイコン画像がない場合

CircleAvatarが便利なところは、アイコン画像がない場合でも対応していることです。

CircleAvatar(
  backgroundColor: Colors.brown.shade800,
  child: Text('AH'),
)

丸くする方法

CircleAvatar(
  backgroundImage: NetworkImage(userAvatarUrl),
  radius: 25.0,
)

参考

公式ドキュメント

同じカテゴリの記事