Merge pull request #718 from GetStream/cds-437

feat(ui): copy linkBg theme property in message theme.

packages/stream_chat_flutter/CHANGELOG.md

@@ -11,6 +11,7 @@
 - Added `MessageInput.customOverlays` property to add custom overlays to the message input.
 - Added `MessageInput.mentionAllAppUsers` property to mention all app users in the message input.
 - The `MessageInput` now supports local search for channels with less than 100 members.
+- Added new `linkBackgroundColor` in `MessageTheme` for setting background colors of link attachments.
 
 ⚠️ Deprecated
 

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

@@ -10,6 +10,7 @@ class UrlAttachment extends StatelessWidget {
     Key? key,
     required this.urlAttachment,
     required this.hostDisplayName,
+    required this.messageTheme,
     this.textPadding = const EdgeInsets.symmetric(
       horizontal: 16,
       vertical: 8,
@@ -25,6 +26,9 @@ class UrlAttachment extends StatelessWidget {
   /// Padding for text
   final EdgeInsets textPadding;
 
+  /// [MessageThemeData] for showing image title
+  final MessageThemeData messageTheme;
+
   @override
   Widget build(BuildContext context) {
     final chatThemeData = StreamChatTheme.of(context);
@@ -58,7 +62,7 @@ class UrlAttachment extends StatelessWidget {
                         borderRadius: const BorderRadius.only(
                           topRight: Radius.circular(16),
                         ),
-                        color: chatThemeData.colorTheme.linkBg,
+                        color: messageTheme.linkBackgroundColor,
                       ),
                       child: Padding(
                         padding: const EdgeInsets.only(

packages/stream_chat_flutter/lib/src/message_widget.dart

@@ -7,6 +7,7 @@ import 'package:flutter/rendering.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_portal/flutter_portal.dart';
 import 'package:jiffy/jiffy.dart';
+import 'package:stream_chat_flutter/src/attachment/url_attachment.dart';
 import 'package:stream_chat_flutter/src/extension.dart';
 import 'package:stream_chat_flutter/src/image_group.dart';
 import 'package:stream_chat_flutter/src/message_action.dart';
@@ -15,7 +16,6 @@ import 'package:stream_chat_flutter/src/message_reactions_modal.dart';
 import 'package:stream_chat_flutter/src/quoted_message_widget.dart';
 import 'package:stream_chat_flutter/src/reaction_bubble.dart';
 import 'package:stream_chat_flutter/src/theme/themes.dart';
-import 'package:stream_chat_flutter/src/url_attachment.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
 /// Widget builder for building attachments
@@ -1002,6 +1002,7 @@ class _MessageWidgetState extends State<MessageWidget>
       urlAttachment: urlAttachment,
       hostDisplayName: hostDisplayName,
       textPadding: widget.textPadding,
+      messageTheme: widget.messageTheme,
     );
   }
 
@@ -1339,7 +1340,7 @@ class _MessageWidgetState extends State<MessageWidget>
     }
 
     if (hasUrlAttachments) {
-      return _streamChatTheme.colorTheme.linkBg;
+      return widget.messageTheme.linkBackgroundColor;
     }
 
     if (isOnlyEmoji) {

packages/stream_chat_flutter/lib/src/quoted_message_widget.dart

@@ -281,7 +281,7 @@ class QuotedMessageWidget extends StatelessWidget {
 
   Color? _getBackgroundColor(BuildContext context) {
     if (_containsLinkAttachment) {
-      return StreamChatTheme.of(context).colorTheme.linkBg;
+      return messageTheme.linkBackgroundColor;
     }
     return messageTheme.messageBackgroundColor;
   }

packages/stream_chat_flutter/lib/src/stream_chat_theme.dart

@@ -223,6 +223,7 @@ class StreamChatThemeData {
         messageLinksStyle: TextStyle(
           color: accentColor,
         ),
+        linkBackgroundColor: colorTheme.linkBg,
       ),
       otherMessageTheme: MessageThemeData(
         reactionsBackgroundColor: colorTheme.disabled,
@@ -246,6 +247,7 @@ class StreamChatThemeData {
             width: 32,
           ),
         ),
+        linkBackgroundColor: colorTheme.linkBg,
       ),
       messageInputTheme: MessageInputThemeData(
         borderRadius: BorderRadius.circular(20),

packages/stream_chat_flutter/lib/src/theme/message_theme.dart

@@ -17,6 +17,7 @@ class MessageThemeData with Diagnosticable {
     this.reactionsMaskColor,
     this.avatarTheme,
     this.createdAtStyle,
+    this.linkBackgroundColor,
   });
 
   /// Text style for message text
@@ -52,6 +53,9 @@ class MessageThemeData with Diagnosticable {
   /// Theme of the avatar
   final AvatarThemeData? avatarTheme;
 
+  /// Background color for messages with url attachments.
+  final Color? linkBackgroundColor;
+
   /// Copy with a theme
   MessageThemeData copyWith({
     TextStyle? messageTextStyle,
@@ -65,6 +69,7 @@ class MessageThemeData with Diagnosticable {
     Color? reactionsBackgroundColor,
     Color? reactionsBorderColor,
     Color? reactionsMaskColor,
+    Color? linkBackgroundColor,
   }) =>
       MessageThemeData(
         messageTextStyle: messageTextStyle ?? this.messageTextStyle,
@@ -80,6 +85,7 @@ class MessageThemeData with Diagnosticable {
             reactionsBackgroundColor ?? this.reactionsBackgroundColor,
         reactionsBorderColor: reactionsBorderColor ?? this.reactionsBorderColor,
         reactionsMaskColor: reactionsMaskColor ?? this.reactionsMaskColor,
+        linkBackgroundColor: linkBackgroundColor ?? this.linkBackgroundColor,
       );
 
   /// Linearly interpolate from one [MessageThemeData] to another.
@@ -105,6 +111,8 @@ class MessageThemeData with Diagnosticable {
         reactionsMaskColor:
             Color.lerp(a.reactionsMaskColor, b.reactionsMaskColor, t),
         repliesStyle: TextStyle.lerp(a.repliesStyle, b.repliesStyle, t),
+        linkBackgroundColor:
+            Color.lerp(a.linkBackgroundColor, b.linkBackgroundColor, t),
       );
 
   /// Merge with a theme
@@ -127,6 +135,7 @@ class MessageThemeData with Diagnosticable {
       reactionsBackgroundColor: other.reactionsBackgroundColor,
       reactionsBorderColor: other.reactionsBorderColor,
       reactionsMaskColor: other.reactionsMaskColor,
+      linkBackgroundColor: other.linkBackgroundColor,
     );
   }
 
@@ -145,7 +154,8 @@ class MessageThemeData with Diagnosticable {
           reactionsBackgroundColor == other.reactionsBackgroundColor &&
           reactionsBorderColor == other.reactionsBorderColor &&
           reactionsMaskColor == other.reactionsMaskColor &&
-          avatarTheme == other.avatarTheme;
+          avatarTheme == other.avatarTheme &&
+          linkBackgroundColor == other.linkBackgroundColor;
 
   @override
   int get hashCode =>
@@ -159,7 +169,8 @@ class MessageThemeData with Diagnosticable {
       reactionsBackgroundColor.hashCode ^
       reactionsBorderColor.hashCode ^
       reactionsMaskColor.hashCode ^
-      avatarTheme.hashCode;
+      avatarTheme.hashCode ^
+      linkBackgroundColor.hashCode;
 
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
@@ -175,6 +186,7 @@ class MessageThemeData with Diagnosticable {
       ..add(DiagnosticsProperty('avatarTheme', avatarTheme))
       ..add(ColorProperty('reactionsBackgroundColor', reactionsBackgroundColor))
       ..add(ColorProperty('reactionsBorderColor', reactionsBorderColor))
-      ..add(ColorProperty('reactionsMaskColor', reactionsMaskColor));
+      ..add(ColorProperty('reactionsMaskColor', reactionsMaskColor))
+      ..add(ColorProperty('linkBackgroundColor', linkBackgroundColor));
   }
 }

packages/stream_chat_flutter/test/src/theme/message_theme_test.dart

@@ -59,6 +59,7 @@ final _messageThemeControl = MessageThemeData(
   messageLinksStyle: TextStyle(
     color: ColorTheme.light().accentPrimary,
   ),
+  linkBackgroundColor: ColorTheme.light().linkBg,
 );
 
 final _messageThemeControlDark = MessageThemeData(
@@ -87,4 +88,5 @@ final _messageThemeControlDark = MessageThemeData(
   messageLinksStyle: TextStyle(
     color: ColorTheme.dark().accentPrimary,
   ),
+  linkBackgroundColor: ColorTheme.dark().linkBg,
 );