Avatar

forui/example/lib/example.dart

@@ -23,10 +23,12 @@ class _ExampleState extends State<Example> {
           const SizedBox(height: 100),
           FProgress(value: 0.9),
           const SizedBox(height: 10),
-          FAlert(
-            title: const Text('Heads Up! Forui is coming to flutter!'),
-            subtitle: const Text('You can add components dfijsoi djfosfj  to your app using the cli.'),
-          )
+          const FAvatar(
+            image: NetworkImage('https://picsum.photos/'),
+            //backgroundImage: NetworkImage('https://picsum.photos/250?image=9'),
+            placeholder: Text('DC'),
+          ),
+          const SizedBox(height: 20),
         ],
       );
 }

forui/lib/src/theme/theme_data.dart

@@ -28,6 +28,9 @@ final class FThemeData with Diagnosticable {
   /// The alert styles.
   final FAlertStyles alertStyles;
 
+  /// The avatar styles.
+  final FAvatarStyle avatarStyle;
+
   /// The badge styles.
   final FBadgeStyles badgeStyles;
 
@@ -78,12 +81,13 @@ final class FThemeData with Diagnosticable {
   /// widget styles.
   FThemeData({
     required this.colorScheme,
+    required this.alertStyles,
+    required this.avatarStyle,
     required this.badgeStyles,
     required this.bottomNavigationBarStyle,
     required this.buttonStyles,
     required this.calendarStyle,
     required this.cardStyle,
-    required this.alertStyles,
     required this.checkboxStyle,
     required this.dialogStyle,
     required this.headerStyle,
@@ -110,6 +114,7 @@ final class FThemeData with Diagnosticable {
       typography: typography,
       style: style,
       alertStyles: FAlertStyles.inherit(colorScheme: colorScheme, typography: typography, style: style),
+      avatarStyle: FAvatarStyle.inherit(colorScheme: colorScheme, typography: typography),
       badgeStyles: FBadgeStyles.inherit(colorScheme: colorScheme, typography: typography, style: style),
       bottomNavigationBarStyle: FBottomNavigationBarStyle.inherit(colorScheme: colorScheme, typography: typography),
       buttonStyles: FButtonStyles.inherit(colorScheme: colorScheme, typography: typography, style: style),
@@ -149,6 +154,7 @@ final class FThemeData with Diagnosticable {
     FTypography? typography,
     FStyle? style,
     FAlertStyles? alertStyles,
+    FAvatarStyle? avatarStyle,
     FBadgeStyles? badgeStyles,
     FBottomNavigationBarStyle? bottomNavigationBarStyle,
     FButtonStyles? buttonStyles,
@@ -169,6 +175,7 @@ final class FThemeData with Diagnosticable {
         typography: typography ?? this.typography,
         style: style ?? this.style,
         alertStyles: alertStyles ?? this.alertStyles,
+        avatarStyle: avatarStyle ?? this.avatarStyle,
         badgeStyles: badgeStyles ?? this.badgeStyles,
         bottomNavigationBarStyle: bottomNavigationBarStyle ?? this.bottomNavigationBarStyle,
         buttonStyles: buttonStyles ?? this.buttonStyles,
@@ -193,6 +200,7 @@ final class FThemeData with Diagnosticable {
       ..add(DiagnosticsProperty('typography', typography, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('style', style, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('alertStyles', alertStyles, level: DiagnosticLevel.debug))
+      ..add(DiagnosticsProperty('avatarStyle', avatarStyle))
       ..add(DiagnosticsProperty('badgeStyles', badgeStyles, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('bottomNavigationBarStyle', bottomNavigationBarStyle, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('buttonStyles', buttonStyles, level: DiagnosticLevel.debug))
@@ -218,6 +226,7 @@ final class FThemeData with Diagnosticable {
           typography == other.typography &&
           style == other.style &&
           alertStyles == other.alertStyles &&
+          avatarStyle == other.avatarStyle &&
           badgeStyles == other.badgeStyles &&
           bottomNavigationBarStyle == other.bottomNavigationBarStyle &&
           buttonStyles == other.buttonStyles &&
@@ -239,6 +248,7 @@ final class FThemeData with Diagnosticable {
       typography.hashCode ^
       style.hashCode ^
       alertStyles.hashCode ^
+      avatarStyle.hashCode ^
       badgeStyles.hashCode ^
       bottomNavigationBarStyle.hashCode ^
       buttonStyles.hashCode ^

forui/lib/src/widgets/avatar.dart

@@ -0,0 +1,158 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/widgets.dart';
+
+import 'package:meta/meta.dart';
+
+import 'package:forui/forui.dart';
+
+/// An image element with a fallback for representing the user.
+///
+/// Typically used with a user's profile image, or, in the absence of
+/// such an image, the user's initials.
+///
+/// If [image] fails then [placeholder] is used.
+class FAvatar extends StatelessWidget {
+  /// The style. Defaults to [FThemeData.avatarStyle].
+  final FAvatarStyle? style;
+
+  /// The background image of the circle.
+  ///
+  /// If the [FAvatar] is to have the user's initials, use [placeholder] instead.
+  final ImageProvider image;
+
+  /// The fallback widget if [image] cannot be displayed.
+  ///
+  /// If the avatar is to just have the user's initials, they are typically
+  /// provided using a [Text] widget as the [placeholder] with a [FAvatarStyle.backgroundColor]
+  ///
+  /// If the [FAvatar] is to have an image, use [image] instead.
+  final Widget? placeholder;
+
+  /// Creates an [FAvatar].
+  const FAvatar({
+    required this.image,
+    this.style,
+    this.placeholder,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final style = this.style ?? context.theme.avatarStyle;
+
+    return Container(
+      constraints: style.constraints,
+      decoration: BoxDecoration(
+        color: style.backgroundColor,
+        shape: BoxShape.circle,
+      ),
+      clipBehavior: Clip.hardEdge,
+      child: Center(
+        child: Image(
+          image: image,
+          errorBuilder: (context, exception, stacktrace) => DefaultTextStyle(
+            style: style.text,
+            child: placeholder ?? const _Placeholder(),
+          ),
+          fit: BoxFit.cover,
+        ),
+      ),
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty('style', style))
+      ..add(DiagnosticsProperty('image', image));
+  }
+}
+
+/// [FAvatar]'s style.
+final class FAvatarStyle with Diagnosticable {
+  /// The background color.
+  final Color backgroundColor;
+
+  /// The box constraints.
+  final BoxConstraints constraints;
+
+  /// The text style for the placeholder text.
+  final TextStyle text;
+
+  /// Creates a [FAvatarStyle].
+  FAvatarStyle({
+    required this.backgroundColor,
+    required this.constraints,
+    required this.text,
+  });
+
+  /// Creates a [FCardStyle] that inherits its properties from [colorScheme] and [typography].
+  FAvatarStyle.inherit({required FColorScheme colorScheme, required FTypography typography})
+      : backgroundColor = colorScheme.muted,
+        constraints = const BoxConstraints(minHeight: 40.0, minWidth: 40.0, maxHeight: 40.0, maxWidth: 40.0),
+        text = typography.base.copyWith(
+          color: colorScheme.mutedForeground,
+          height: 0,
+        );
+
+  /// Returns a copy of this [FAvatarStyle] with the given properties replaced.
+  ///
+  /// ```dart
+  /// final style = FAvatarStyle(
+  ///   backgroundColor: ...,
+  ///   constraints: ...,
+  /// );
+  ///
+  /// final copy = style.copyWith(constraints: ...);
+  ///
+  /// print(style.backgroundColor == copy.backgroundColor); // true
+  /// print(style.constraints == copy.constraints); // false
+  /// ```
+  @useResult
+  FAvatarStyle copyWith({
+    Color? backgroundColor,
+    BoxConstraints? constraints,
+    TextStyle? text,
+  }) =>
+      FAvatarStyle(
+        backgroundColor: backgroundColor ?? this.backgroundColor,
+        constraints: constraints ?? this.constraints,
+        text: text ?? this.text,
+      );
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(ColorProperty('backgroundColor', backgroundColor))
+      ..add(DiagnosticsProperty('constraints', constraints))
+      ..add(DiagnosticsProperty('text', text));
+  }
+
+  @override
+  bool operator ==(Object other) =>
+      identical(this, other) ||
+      other is FAvatarStyle &&
+          runtimeType == other.runtimeType &&
+          backgroundColor == other.backgroundColor &&
+          constraints == other.constraints &&
+          text == other.text;
+
+  @override
+  int get hashCode => backgroundColor.hashCode ^ constraints.hashCode ^ text.hashCode;
+}
+
+class _Placeholder extends StatelessWidget {
+  const _Placeholder();
+
+  @override
+  Widget build(BuildContext context) {
+    final style = context.theme;
+
+    return FAssets.icons.userRound(
+      height: style.avatarStyle.constraints.maxHeight / 2,
+      colorFilter: ColorFilter.mode(style.colorScheme.mutedForeground, BlendMode.srcIn),
+    );
+  }
+}

forui/lib/widgets.dart

@@ -19,6 +19,7 @@ library forui.widgets;
 import 'package:forui/forui.dart';
 
 export 'src/widgets/alert/alert.dart' hide Variant;
+export 'src/widgets/avatar.dart';
 export 'src/widgets/badge/badge.dart' hide Variant;
 export 'src/widgets/bottom_navigation_bar/bottom_navigation_bar.dart';
 export 'src/widgets/button/button.dart' hide Variant;