Avatar

A customizable avatar component that can display an image, text label, or icon.

When to use this

User profiles: Display user profile pictures or initials
Comment sections: Show avatars next to user comments or posts
Team members: Display team member photos in lists or grids
Contact lists: Show profile images in contact or messaging interfaces

Basic implementation


import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
 
class AvatarExample extends StatelessWidget {
  const AvatarExample({super.key});
 
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      spacing: 16,
      children: [
        RemixAvatar(
          label: 'LF',
          style: labelStyle,
        ),
        RemixAvatar(
          icon: Icons.person,
          style: iconStyle,
        ),
        RemixAvatar(
          style: image,
        ),
      ],
    );
  }
 
  RemixAvatarStyle get labelStyle {
    return RemixAvatarStyle()
        .textColor(Colors.deepPurpleAccent)
        .size(50, 50)
        .shapeCircle()
        .wrapClipOval()
        .labelColor(Colors.white)
        .labelFontWeight(FontWeight.bold)
        .labelFontSize(15);
  }
 
  RemixAvatarStyle get iconStyle {
    return RemixAvatarStyle()
        .textColor(Colors.deepOrangeAccent)
        .size(70, 70)
        .iconColor(Colors.white)
        .iconSize(70)
        .icon(IconStyler().wrapTranslate(x: 0, y: 12))
        .shapeCircle()
        .wrapClipOval();
  }
 
  RemixAvatarStyle get image {
    return RemixAvatarStyle()
        .size(90, 90)
        .backgroundImageUrl('https://i.pravatar.cc/150?img=48')
        .shapeCircle();
  }
}

Interactive preview

Resolving preview metadata...

Fortal styles

Remix includes Fortal-themed style helpers for this component:

Fortal variants


import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
 
class FortalAvatarExample extends StatelessWidget {
  const FortalAvatarExample({super.key});
 
  @override
  Widget build(BuildContext context) {
    return Row(
      spacing: 16,
      children: [
        // Soft variant - Subtle background
        RemixAvatar(
          label: 'AB',
          style: FortalAvatarStyles.soft(),
        ),
        // Solid variant - Bold background
        RemixAvatar(
          label: 'CD',
          style: FortalAvatarStyles.solid(),
        ),
      ],
    );
  }
}

See the FortalAvatarStyles source code for all available options.

Constructor


const RemixAvatar({
  Key? key,
  ImageProvider? backgroundImage,
  ImageProvider? foregroundImage,
  ImageErrorListener? onBackgroundImageError,
  ImageErrorListener? onForegroundImageError,
  Widget? child,
  String? label,
  RemixAvatarLabelBuilder? labelBuilder,
  IconData? icon,
  RemixAvatarIconBuilder? iconBuilder,
  RemixAvatarStyle style = const RemixAvatarStyle.create(),
  RemixAvatarSpec? styleSpec,
})

Properties

Prop	Type	Required / Default Value
`style`	`RemixAvatarStyle`	Optional. The style configuration for the avatar. Customize colors, sizing, shape, and state-based styling.
`styleSpec`	`RemixAvatarSpec?`	Optional. A pre-resolved style spec that bypasses style resolution. Useful for performance when sharing resolved styles across multiple instances.
`key`	`Key?`	Optional. Controls how one widget replaces another widget in the tree.
`backgroundImage`	`ImageProvider?`	Optional. The background image to display in the avatar.
`foregroundImage`	`ImageProvider?`	Optional. The foreground image to display in the avatar.
`onBackgroundImageError`	`ImageErrorListener?`	Optional. Callback function called when the background image fails to load.
`onForegroundImageError`	`ImageErrorListener?`	Optional. Callback function called when the foreground image fails to load.
`child`	`Widget?`	Optional. Custom content to display inside the avatar. When provided the caller is responsible for applying typography.
`label`	`String?`	Optional. Optional text rendered within the avatar using the text spec.
`labelBuilder`	`RemixAvatarLabelBuilder?`	Optional. Optional builder that exposes the resolved [TextSpec] for custom label rendering while keeping the configured typography.
`icon`	`IconData?`	Optional. Optional icon rendered when no [child] or [label] is provided.
`iconBuilder`	`RemixAvatarIconBuilder?`	Optional. Optional builder that exposes the resolved [IconSpec] for custom icon rendering while preserving configured icon styling.

Style Methods

Method	Description
`square(double size)`	Sets avatar size to a square
`sizeWH(double width, double height)`	Sets avatar size with width and height (alias)
`color(Color value)`	Sets background color
`borderRadius(BorderRadiusGeometryMix radius)`	Sets border radius
`textColor(Color value)`	Sets text color
`iconColor(Color value)`	Sets icon color
`padding(EdgeInsetsGeometryMix value)`	Sets padding
`margin(EdgeInsetsGeometryMix value)`	Sets margin
`alignment(Alignment value)`	Sets container alignment
`decoration(DecorationMix value)`	Sets decoration
`constraints(BoxConstraintsMix value)`	Sets constraints
`animate(AnimationConfig animation)`	Sets animation
`clipBehavior(Clip clip)`	Sets the clip behavior for the avatar container.
`label(TextStyler value)`	Configures the label text style using a TextStyler.
`icon(IconStyler value)`	Configures the icon style using an IconStyler.
`size(double width, double height)`	Sets avatar size with width and height
`wrap(WidgetModifierConfig value)`	Applies widget modifiers such as clipping, opacity, or scaling.
`foregroundDecoration(DecorationMix value)`	Sets a foreground decoration painted on top of the component.
`transform(Matrix4 value, AlignmentGeometry alignment = Alignment.center)`	Applies a matrix transformation to the component.
`labelTextStyle(TextStyleMix value)`	Sets label/text style using TextStyleMix directly
`labelColor(Color value)`	Sets label/text color
`labelFontSize(double value)`	Sets label/text font size
`labelFontWeight(FontWeight value)`	Sets label/text font weight
`labelFontStyle(FontStyle value)`	Sets label/text font style (italic/normal)
`labelLetterSpacing(double value)`	Sets label/text letter spacing
`labelDecoration(TextDecoration value)`	Sets label/text decoration (underline, strikethrough, etc.)
`labelFontFamily(String value)`	Sets label/text font family
`labelHeight(double value)`	Sets label/text line height
`labelWordSpacing(double value)`	Sets label/text word spacing
`labelDecorationColor(Color value)`	Sets label/text decoration color
`iconSize(double value)`	Sets icon size
`iconOpacity(double value)`	Sets icon opacity
`iconWeight(double value)`	Sets icon weight (useful for variable icons like Material Symbols)
`iconGrade(double value)`	Sets icon grade (useful for Material Icons)
`iconFill(double value)`	Sets icon fill (useful for Material Icons filled variants)
`iconOpticalSize(double value)`	Sets icon optical size (useful for Material Icons)
`iconBlendMode(BlendMode value)`	Sets icon blend mode
`iconTextDirection(TextDirection value)`	Sets icon text direction
`iconShadows(List<ShadowMix> value)`	Sets icon shadows
`iconShadow(ShadowMix value)`	Sets single icon shadow