FluentAvatarStyle class

The visual configuration of a FluentAvatar.

Same shape as FluentButtonStyle: every visual property is a WidgetStateProperty, every field is nullable and means "inherit", and the resolution order lowest to highest is

the colour/size/shape defaults derived from the theme
the nearest FluentAvatarTheme
the widget's own style

An avatar takes no hover, press or focus of its own, so in practice every property resolves the same value for every state. The state machinery is kept anyway: an avatar dropped inside a button or a list item is styled from that control's state set, which is exactly what buildFluentAvatar's states argument is for.

Annotations

@immutable

Constructors

FluentAvatarStyle({WidgetStateProperty<Color?>? backgroundColor, WidgetStateProperty<Color?>? foregroundColor, WidgetStateProperty<Color?>? borderColor, WidgetStateProperty<double?>? borderWidth, WidgetStateProperty<BorderRadius?>? borderRadius, WidgetStateProperty<Color?>? ringColor, WidgetStateProperty<Color?>? ringGapColor, WidgetStateProperty<double?>? ringWidth, WidgetStateProperty<TextStyle?>? textStyle, WidgetStateProperty<double?>? iconSize, WidgetStateProperty<double?>? diameter}): Creates a style. Omitted properties inherit.
const

Properties

backgroundColor → WidgetStateProperty<Color?>?: The disc behind the initials or icon. Figma's Avatar color → Background; unused when an image fills the avatar.
final
borderColor → WidgetStateProperty<Color?>?: The hairline drawn inside the avatar's own box. Figma's Avatar color → Inside stroke, which is a transparent token for every mode except Overflow (Avatar group) — and transparent tokens turn opaque in high contrast, which is the point of keeping it rather than dropping it.
final
borderRadius → WidgetStateProperty<BorderRadius?>?: Corner radius. Circular, or FluentRadius.small for the square shape.
final
borderWidth → WidgetStateProperty<double?>?: Width of borderColor. Ramps 1, 2, 3, 4 with the avatar's size.
final
diameter → WidgetStateProperty<double?>?: The avatar's own edge length. Square in every size.
final
foregroundColor → WidgetStateProperty<Color?>?: Initials and icon colour. Figma's Avatar color → Foreground.
final
hashCode → int: The hash code for this object.
no setteroverride
iconSize → WidgetStateProperty<double?>?: Icon edge length, when the avatar shows an icon rather than initials.
final
ringColor → WidgetStateProperty<Color?>?: The activity ring's stroke. Figma's Avatar color → Active stroke.
final
ringGapColor → WidgetStateProperty<Color?>?: Fills the gap between the avatar and the activity ring, so the ring reads against a coloured backdrop. Figma's Neutral/Background/1/Rest.
final
ringWidth → WidgetStateProperty<double?>?: Activity ring stroke width. Also the width of the gap inside it — Figma and React agree that the ring sits one ring-width clear of the avatar.
final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
textStyle → WidgetStateProperty<TextStyle?>?: Initials type ramp.
final

Methods

copyWith({WidgetStateProperty<Color?>? backgroundColor, WidgetStateProperty<Color?>? foregroundColor, WidgetStateProperty<Color?>? borderColor, WidgetStateProperty<double?>? borderWidth, WidgetStateProperty<BorderRadius?>? borderRadius, WidgetStateProperty<Color?>? ringColor, WidgetStateProperty<Color?>? ringGapColor, WidgetStateProperty<double?>? ringWidth, WidgetStateProperty<TextStyle?>? textStyle, WidgetStateProperty<double?>? iconSize, WidgetStateProperty<double?>? diameter}) → FluentAvatarStyle: This style with the given properties replaced.
merge(FluentAvatarStyle? other) → FluentAvatarStyle: This style with the non-null properties of other layered on top.
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
toString() → String: A string representation of this object.
inherited

Operators

operator ==(Object other) → bool: The equality operator.
override

Static Methods

from({Color? backgroundColor, Color? foregroundColor, Color? borderColor, double? borderWidth, BorderRadius? borderRadius, Color? ringColor, Color? ringGapColor, double? ringWidth, TextStyle? textStyle, double? iconSize, double? diameter}) → FluentAvatarStyle: Convenience for the common case of one value across every state.