A versatile avatar component with smart fallback logic, shapes, and responsive sizing.

FxAvatar

FxAvatar is a specialized image display component that handles loading states, errors, and fallbacks automatically. It supports various shapes and integrates seamlessly with the Fluxy styling system.

Usage

FxAvatar(
  image: "https://example.com/user.jpg",
  fallback: "Jane Doe",
  size: FxAvatarSize.lg,
)

Features

Smart Fallback

If the image URL is invalid or fails to load, FxAvatar automatically generates a fallback.

String Fallback: Extracts initials from a name (e.g., "Jane Doe" -> "JD").
Widget Fallback: Renders a custom widget if provided.

Shapes

Supports three standard shapes out of the box:

circle (default)
square
rounded (rounded corners)

FxAvatar(
  image: url,
  shape: FxAvatarShape.rounded,
)

API Reference

Name	Type	Default	Description
`image`	`String?`	`null`	The URL of the avatar image.
`fallback`	`String?`	`null`	Text to generate initials from if image fails.
`fallbackWidget`	`Widget?`	`null`	Custom widget to show if image fails.
`size`	`FxAvatarSize`	`md`	The size token of the avatar.
`shape`	`FxAvatarShape`	`circle`	The shape of the avatar container.
`style`	`FxStyle?`	`null`	Custom atomic style override.
`className`	`String?`	`null`	String-based class name for shared styles.

DSL Usage

You can also use the Fx.avatar alias for a more fluent API feel.

Fx.avatar(
  image: user.photoUrl,
  fallback: user.fullName,
)
.shadow.md // Apply proxy styles

The Master Avatar Implementation

In a professional application, avatars are often part of a complex "User Header" or "Member List". Here is an example of a responsive "Profile Ribbon" using FxAvatar.

class ProfileRibbon extends StatelessWidget {
  final User user;
  
  ProfileRibbon({required this.user});

  @override
  Widget build(BuildContext context) {
    return Fx.row(
      gap: 16,
      children: [
        // 1. Dynamic Avatar with reactive state
        Fx.avatar(
          image: user.photoUrl,
          fallback: user.fullName,
          size: FxAvatarSize.lg,
          shape: FxAvatarShape.circle,
        )
        .border(2, Fx.primary) // Adding brand ring
        .p(2) // Spacing between ring and image
        .shadow.sm(),

        // 2. Info Cluster
        Fx.col(
          cross: CrossAxisAlignment.start,
          children: [
            Fx.text(user.fullName).font.lg().font.bold(),
            Fx.text(user.email).font.sm().color(FxTokens.colors.muted),
          ],
        ),
        
        Spacer(),
        
        // 3. Online Indicator
        Fx.box()
          .w(12).h(12)
          .bg(user.isOnline ? Colors.green : Colors.grey)
          .rounded.full()
      ],
    )
    .p(16)
    .bg(FxTokens.colors.card)
    .rounded(12)
    .shadow.md();
  }
}

Fluxy's avatar system automatically handles the fallback to initials if the URL is null or invalid, making it extremely robust for data-driven UIs.

FxAvatar

On this page