Merge pull request #1558 from GetStream/fix/handle-url-attachment-error

packages/stream_chat_flutter/CHANGELOG.md

@@ -12,6 +12,8 @@
   instead of material indicator.
 - [[#1490]](https://github.com/GetStream/stream-chat-flutter/issues/1490) Fixed `editMessageInputBuilder` property not
   used in `MessageActionsModal.editMessage` option.
+- [[#1544]](https://github.com/GetStream/stream-chat-flutter/issues/1544) Fixed error thrown when unable to fetch
+  image/data in Message link preview.
 
 ## 6.1.0
 

packages/stream_chat_flutter/lib/src/attachment/url_attachment.dart

@@ -1,5 +1,6 @@
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
+import 'package:shimmer/shimmer.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
 /// {@template streamUrlAttachment}
@@ -64,10 +65,29 @@ class StreamUrlAttachment extends StatelessWidget {
                   ),
                   child: Stack(
                     children: [
-                      CachedNetworkImage(
-                        width: double.infinity,
-                        imageUrl: urlAttachment.imageUrl!,
-                        fit: BoxFit.cover,
+                      AspectRatio(
+                        // Default aspect ratio for Open Graph images.
+                        // https://www.kapwing.com/resources/what-is-an-og-image-make-and-format-og-images-for-your-blog-or-webpage
+                        aspectRatio: 1.91 / 1,
+                        child: CachedNetworkImage(
+                          imageUrl: urlAttachment.imageUrl!,
+                          fit: BoxFit.cover,
+                          placeholder: (context, __) {
+                            final image = Image.asset(
+                              'images/placeholder.png',
+                              fit: BoxFit.cover,
+                              package: 'stream_chat_flutter',
+                            );
+                            final colorTheme =
+                                StreamChatTheme.of(context).colorTheme;
+                            return Shimmer.fromColors(
+                              baseColor: colorTheme.disabled,
+                              highlightColor: colorTheme.inputBg,
+                              child: image,
+                            );
+                          },
+                          errorWidget: (_, __, ___) => const AttachmentError(),
+                        ),
                       ),
                       Positioned(
                         left: 0,