Fix rectangle avatars

lib/widgets/avatar.dart

@@ -59,38 +59,39 @@ class Avatar extends StatelessWidget {
               borderRadius: borderRadius,
               side: border ?? BorderSide.none,
             ),
-            clipBehavior: Clip.hardEdge,
+            clipBehavior: Clip.antiAlias,
-            child: noPic
+            child: MxcImage(
-                ? Container(
+              client: client,
-                    decoration: BoxDecoration(color: name?.lightColorAvatar),
+              borderRadius: borderRadius,
-                    alignment: Alignment.center,
+              key: ValueKey(mxContent.toString()),
-                    child: Text(
+              cacheKey: '${mxContent}_$size',
-                      fallbackLetters,
+              uri: mxContent,
-                      textAlign: TextAlign.center,
+              fit: BoxFit.cover,
-                      style: TextStyle(
+              width: size,
-                        fontFamily: 'RobotoMono',
+              height: size,
-                        color: Colors.white,
+              placeholder: (_) => noPic
-                        fontWeight: FontWeight.bold,
+                  ? Container(
-                        fontSize: (size / 2.5).roundToDouble(),
+                      decoration: BoxDecoration(color: name?.lightColorAvatar),
+                      alignment: Alignment.center,
+                      child: Text(
+                        fallbackLetters,
+                        textAlign: TextAlign.center,
+                        style: TextStyle(
+                          fontFamily: 'RobotoMono',
+                          color: Colors.white,
+                          fontWeight: FontWeight.bold,
+                          fontSize: (size / 2.5).roundToDouble(),
+                        ),
                       ),
-                    ),
+                    )
-                  )
+                  : Center(
-                : MxcImage(
-                    client: client,
-                    key: ValueKey(mxContent.toString()),
-                    cacheKey: '${mxContent}_$size',
-                    uri: mxContent,
-                    fit: BoxFit.cover,
-                    width: size,
-                    height: size,
-                    placeholder: (_) => Center(
                       child: Icon(
                         Icons.person_2,
                         color: theme.colorScheme.tertiary,
                         size: size / 1.5,
                       ),
                     ),
-                  ),
+            ),
           ),
         ),
         if (presenceUserId != null)
@@ -146,4 +147,4 @@ class Avatar extends StatelessWidget {
       ),
     );
   }
-}
+}

lib/widgets/mxc_image.dart

@@ -26,6 +26,7 @@ class MxcImage extends StatefulWidget {
   final Widget Function(BuildContext context)? placeholder;
   final String? cacheKey;
   final Client? client;
+  final BorderRadius borderRadius;
 
   const MxcImage({
     this.uri,
@@ -42,6 +43,7 @@ class MxcImage extends StatefulWidget {
     this.thumbnailMethod = ThumbnailMethod.scale,
     this.cacheKey,
     this.client,
+    this.borderRadius = BorderRadius.zero,
     super.key,
   });
 
@@ -140,9 +142,11 @@ class _MxcImageState extends State<MxcImage> {
     final hasData = data != null && data.isNotEmpty;
 
     return AnimatedSwitcher(
-        duration: const Duration(milliseconds: 128),
+        duration: FluffyThemes.animationDuration,
         child: hasData
-            ? Image.memory(
+            ? ClipRRect(
+              borderRadius: widget.borderRadius,
+              child: Image.memory(
                 data,
                 width: widget.width,
                 height: widget.height,
@@ -165,7 +169,8 @@ class _MxcImageState extends State<MxcImage> {
                     ),
                   );
                 },
-              )
+              ),
+            )
             : placeholder(context));
   }
 }