【Flutter】CircleAvatar|プロフィールアイコン画像を丸くする

今回はCircleAvatarの基本的な使い方を紹介します。

CircleAvatarを使えば丸いプロフィールアイコンを表示できます。

\ 世界最大級のオンライン学習サービス /

目次

CircleAvatarの使い方

CircleAvatar(
  foregroundImage: NetworkImage(image),
  radius: 100,
).

CircleAvatarで画像を表示するにはforegroundImageまたはbackgroundImageのいずれかでImageProviderを指定します。

画像の半径はradiusで指定します。

foregroundImage・backgroundImage・backgroundColor・childの違い

CircleAvatar(
  radius: 100,
  foregroundImage: null,
  backgroundColor: Colors.blue,
  child: Text(
    'BS',
    style: TextStyle(
      color: Colors.white,
      fontSize: 70,
    ),
  ),
),

CircleAvatarではforegroundImageで画像取得できなかった場合はbackgroundImageの画像が表示され、backgroundImageで画像取得できなかった場合はbackgroundColorの背景色が表示されます。

childで指定したWidgetはforegroundImageの奥backgroundImageの手前に表示されます。

一緒に読みたい

参考

  • URLをコピーしました!
目次