Avatar
A circular image component that displays user profile pictures with a fallback option. The Avatar component provides a consistent way to represent users in your application, displaying profile images with fallbacks to initials or icons when images are unavailable.
Overview
Preview
CLI
To generate and customize this style:
dart run forui style create avatar Usage
Basic Usage
Display a user’s profile picture with a fallback to their initials.
FAvatar(
style: FAvatarStyle(...),
image: const NetworkImage('https://example.com/profile.jpg'),
fallback: const Text('JD'),
);Custom Fallback
Customize the fallback content that appears when the image fails to load.
FAvatar(
style: FAvatarStyle(...),
image: const NetworkImage('https://example.com/profile.jpg'),
fallback: Icon(FIcons.user, color: context.theme.colors.mutedForeground),
);Raw Constructor
Use the raw constructor for complete customization of the avatar content.
// Raw constructor with icon
FAvatar.raw(
style: FAvatarStyle(...),
child: Icon(FIcons.baby, color: theme.colors.mutedForeground),
);
// Raw constructor with text
FAvatar.raw(child: const Text('MN'));
// Raw constructor with custom widget
FAvatar.raw(
child: Container(
decoration: BoxDecoration(
color: theme.colors.primary,
shape: BoxShape.circle,
),
child: const Icon(FIcons.star, color: Colors.white),
),
);Examples
Different Sizes
Preview
Grouped Avatars
Preview
Last updated on