CircleAvatar の使い方

CircleAvatar の使い方

Flutter でユーザのプロフィール画像を丸く表示するためのアバターWidgetです。

このエントリーをはてなブックマークに追加

Twitter や Instagram のようにアイコンを丸くしたい時に使います。

使い方

プロフィール画像がある場合はNetworkImageに URL を指定してそのままbackgroundImageに指定してあげれば丸くアバターが表示されます。

CircleAvatar(
  backgroundImage: NetworkImage(userAvatarUrl),
)

UserAccountsDrawerHeaderと組み合わせた場合このようになります。

プロフィール画像がない場合はchildにイニシャルなどを指定すると丸く表示されます。

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

こちらもUserAccountsDrawerHeaderと組み合わせた場合このようになります。

コンストラクタ

CircleAvatar({
	Key key,
	Widget child,
	Color backgroundColor,
	ImageProvider backgroundImage,
	Color foregroundColor,
	double radius,
	double minRadius,
	double maxRadius
})

必須引数はありません。 使い方のところに書いたように、プロフィール画像があればbackgroundImageを指定し、ない場合はchildを指定するのがいいです。

プロパティ

  • backgroundColorColor

    背景色を指定します。

  • backgroundImageImageProvider

    背景画像を指定します。

  • childWidget

    アバターの中に表示するためのWidgetを指定します。

  • foregroundColorColor

    アバターの中に表示する文字のデフォルトの文字色を指定します。

  • maxRadiusdouble

    アバターの最大サイズを半径で指定します。

  • minRadiusdouble

    アバターの最小サイズを半径で指定します。

  • radiusdouble

    アバターのサイズを半径で指定します。

Flutter 公式ドキュメント

CircleAvatar class

このエントリーをはてなブックマークに追加