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();
  }
}

Fortal styles

Remix includes Fortal-themed style helpers for this component:

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(),
        ),
      ],
    );
  }
}

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

Widget Properties

style → Key?

Optional.

styleSpec → Key?

Optional.

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

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)

icon(IconStyler value)

size(double width, double height)

Sets avatar size with width and height

wrap(WidgetModifierConfig value)

foregroundDecoration(DecorationMix value)

transform(Matrix4 value, AlignmentGeometry alignment = Alignment.center)

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