Skip to Content
Forui 0.11.0 is released 🎉

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

Usage

Basic Usage

Display a user’s profile picture with a fallback to their initials.

FAvatar( 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( 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( 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

Grouped Avatars

Last updated on