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

  AvatarStyler get labelStyle {
    return AvatarStyler()
        .color(Colors.deepPurpleAccent)
        .size(50, 50)
        .shape(.circle())
        .wrap(.clipOval())
        .labelColor(Colors.white).iconColor(Colors.white)
        .labelFontWeight(FontWeight.bold)
        .labelFontSize(15);
  }

  AvatarStyler get iconStyle {
    return AvatarStyler()
        .color(Colors.deepOrangeAccent)
        .size(70, 70)
        .labelColor(Colors.white).iconColor(Colors.white)
        .iconSize(70)
        .shape(.circle())
        .wrap(.clipOval());
  }

  AvatarStyler get image {
    return AvatarStyler()
        .size(90, 90)
        .backgroundImageUrl('https://i.pravatar.cc/150?img=48')
        .shape(.circle());
  }
}

Fortal widgets

The application-owned Fortal preset provides a themed widget for this component:

import 'package:flutter/material.dart';
import 'ui/ui.dart';

class FortalAvatarExample extends StatelessWidget {
  const FortalAvatarExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Row(
      spacing: 16,
      children: [
        // Soft variant - Subtle background
        FortalAvatar.soft(
          label: 'AB',
          fallbackLength: 2,
        ),
        // Solid variant - Bold background
        FortalAvatar.solid(
          label: 'CD',
          fallbackLength: 2,
        ),
      ],
    );
  }
}

Constructor

import 'package:flutter/material.dart';
import 'package:remix/remix.dart';

RemixAvatar remixAvatarConstructor({
  Key? key,
  ImageProvider? backgroundImage,
  ImageProvider? foregroundImage,
  ImageErrorListener? onBackgroundImageError,
  ImageErrorListener? onForegroundImageError,
  Widget? child,
  String? label,
  RemixAvatarLabelBuilder? labelBuilder,
  IconData? icon,
  RemixAvatarIconBuilder? iconBuilder,
  AvatarStyler style = const AvatarStyler.create(),
  AvatarSpec? styleSpec,
}) => throw UnimplementedError();

Properties

Widget Properties

style → AvatarStyler

Optional. The style configuration for the avatar. Customize colors, sizing, shape, and state-based styling.

styleSpec → AvatarSpec?

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

color(Color value)

Sets background color

borderRadius(BorderRadiusGeometryMix radius)

Sets border radius

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 value)

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.

call({Key? key, ImageProvider? backgroundImage, ImageProvider? foregroundImage, ImageErrorListener? onBackgroundImageError, ImageErrorListener? onForegroundImageError, Widget? child, String? label, RemixAvatarLabelBuilder? labelBuilder, IconData? icon, RemixAvatarIconBuilder? iconBuilder})

Creates a RemixAvatar widget with this style applied.

labelStyle(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