Avatar

A circular image component for user profile pictures, with a fallback to initials or an icon when there's no image. Three shapes — circular, square, rounded — share the same parameters.

View source on GitHub ↗

FBAvatar.circular(imageUrl: user.photoUrl, size: 48);
FBAvatar.circular(initials: 'JD', size: 48); // no image? falls back to initials
FBAvatar.square(initials: 'JD', backgroundColor: Colors.teal);

CLI

Install this component into your project:

avatar

$flutter_beautify add avatar

Variants

FBAvatar.circular() · FBAvatar.square() · FBAvatar.rounded() — the plain FBAvatar(...) constructor forwards to .circular().

Key parameters

Parameter	Type	Default
imageUrl	String?	—
initials	String?	— used when imageUrl is null
size	double	48
backgroundColor	Color?	ambient colorScheme.primary
onTap	VoidCallback?	—

Usage

import 'package:your_app/widgets/avatar.dart';

FBAvatar.circular(
  imageUrl: user.photoUrl,
  size: 56,
  onTap: () => openProfile(user.id),
);