Loading preview...

Installation

flutcn_ui add avatar

Usage

main.dart

import '../widgets/avatar.dart';
 
Avatar.md(
  imageUrl: 'https://avatars.githubusercontent.com/u/101595?v=4',
  fallbackText: 'User',
)

Properties

Property	Type	Default	Description
imageUrl	String?	null	URL of the image to display.
fallbackText	String?	null	Text used for the fallback — only the first letter is shown (uppercased).
size	AvatarSize	md	Size preset.
customSize	double?	null	Exact size in logical pixels when `size` is `AvatarSize.custom`.
backgroundColor	Color?	primary	Background color shown behind the fallback letter.
textColor	Color?	onPrimary	Color of the fallback letter.
textStyle	TextStyle?	—	Full text style override for the fallback letter.
borderRadius	BorderRadius?	circular(8)	Border radius used when `shape` is `BoxShape.rectangle`.
shape	BoxShape	circle	Shape of the avatar (`BoxShape.circle` or `BoxShape.rectangle`).
child	Widget?	null	Custom child widget. Overrides imageUrl and fallback.
borderWidth	double	0	Width of the border stroke.
borderColor	Color	transparent	Color of the border.

Sizes

Sm

24×24 pixels. For tight layouts like list items or inline mentions.

avatar.dart

Avatar.sm(imageUrl: 'https://example.com/avatar.png')

Md

32×32 pixels. The default size.

avatar.dart

Avatar.md(imageUrl: 'https://example.com/avatar.png')

Lg

40×40 pixels. For comment threads, user cards, and chat UIs.

avatar.dart

Avatar.lg(imageUrl: 'https://example.com/avatar.png')

Xl

48×48 pixels. For profile headers and prominent user displays.

avatar.dart

Avatar.xl(imageUrl: 'https://example.com/avatar.png')

Custom

Specify an exact size with Avatar.custom().

avatar.dart

Avatar.custom(
  size: 96,
  imageUrl: 'https://example.com/avatar.png',
)

Shapes

Circle (default)

avatar.dart

Avatar.md(
  imageUrl: 'https://example.com/avatar.png',
  shape: BoxShape.circle,
)

Rounded Rectangle

avatar.dart

Avatar.md(
  imageUrl: 'https://example.com/avatar.png',
  shape: BoxShape.rectangle,
)

Fallback

When imageUrl is null or not provided, the avatar displays the first letter of fallbackText (uppercased) over a colored background.

avatar.dart

Avatar.md(
  fallbackText: 'Omar',   // displays "O"
  backgroundColor: Colors.indigo,
  textColor: Colors.white,
)

With Border

Add a decorative border using borderWidth and borderColor.

avatar.dart

Avatar.custom(
  size: 80,
  imageUrl: 'https://example.com/avatar.png',
  borderWidth: 3,
  borderColor: Colors.amberAccent,
)

Helper Class

The Avatar helper class provides named constructors for each size.

avatar.dart

Avatar.sm(imageUrl: 'https://example.com/avatar.png')
Avatar.md(imageUrl: 'https://example.com/avatar.png')
Avatar.lg(imageUrl: 'https://example.com/avatar.png')
Avatar.xl(imageUrl: 'https://example.com/avatar.png')
Avatar.custom(
  size: 80,
  imageUrl: 'https://example.com/avatar.png',
  borderWidth: 2,
  borderColor: Colors.amberAccent,
  shape: BoxShape.circle,
)

Avatar

On this page