Avatar#
사용자 프로필 이미지 또는 이니셜을 표시하는 아바타 컴포넌트입니다.
사용법#
// 이미지 아바타
CouiAvatar(
imageUrl: 'https://example.com/photo.jpg',
size: AvatarSize.md,
)
// 이니셜 아바타
CouiAvatar.text(
text: '홍',
size: AvatarSize.lg,
)
// 상태 표시
CouiAvatar(
imageUrl: user.photoUrl,
status: AvatarStatus.online,
)
// 그룹
CouiAvatarGroup(
avatars: users.map((u) => CouiAvatar(imageUrl: u.photoUrl)).toList(),
maxCount: 3,
)
Avatar(
imageUrl: 'https://example.com/photo.jpg',
size: AvatarSize.md,
)
Avatar.text(text: '홍', size: AvatarSize.lg)
AvatarGroup(
avatars: users.map((u) => Avatar(imageUrl: u.photoUrl)).toList(),
maxCount: 3,
)
Props / Parameters#
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
imageUrl |
String? |
null |
프로필 이미지 URL |
text | String? | null | 이니셜 텍스트 |
size | AvatarSize | md | 아바타 크기 |
shape |
AvatarShape |
circle |
아바타 모양 |
status |
AvatarStatus? |
null |
온라인 상태 표시 |
fallback |
Widget? |
null |
이미지 로드 실패 시 대체 위젯 |
변형 (Variants)#
크기#
| 크기 | 값 | 픽셀 |
|---|---|---|
| XS | AvatarSize.xs | 24px |
| SM | AvatarSize.sm | 32px |
| MD | AvatarSize.md | 40px |
| LG | AvatarSize.lg | 56px |
| XL | AvatarSize.xl | 72px |
모양#
CouiAvatar(imageUrl: url, shape: AvatarShape.circle)
CouiAvatar(imageUrl: url, shape: AvatarShape.rounded)
CouiAvatar(imageUrl: url, shape: AvatarShape.square)
상태#
CouiAvatar(imageUrl: url, status: AvatarStatus.online)
CouiAvatar(imageUrl: url, status: AvatarStatus.offline)
CouiAvatar(imageUrl: url, status: AvatarStatus.busy)
CouiAvatar(imageUrl: url, status: AvatarStatus.away)