diff --git a/packages/stream_chat_flutter/CHANGELOG.md b/packages/stream_chat_flutter/CHANGELOG.md index d5e21c54..01cb56a9 100644 --- a/packages/stream_chat_flutter/CHANGELOG.md +++ b/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 diff --git a/packages/stream_chat_flutter/lib/src/url_attachment.dart b/packages/stream_chat_flutter/lib/src/attachment/url_attachment.dart similarity index 94% rename from packages/stream_chat_flutter/lib/src/url_attachment.dart rename to packages/stream_chat_flutter/lib/src/attachment/url_attachment.dart index b940f227..d56bcd6a 100644 --- a/packages/stream_chat_flutter/lib/src/url_attachment.dart +++ b/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( diff --git a/packages/stream_chat_flutter/lib/src/message_widget.dart b/packages/stream_chat_flutter/lib/src/message_widget.dart index 6731e15a..4422cdf9 100644 --- a/packages/stream_chat_flutter/lib/src/message_widget.dart +++ b/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 urlAttachment: urlAttachment, hostDisplayName: hostDisplayName, textPadding: widget.textPadding, + messageTheme: widget.messageTheme, ); } @@ -1339,7 +1340,7 @@ class _MessageWidgetState extends State } if (hasUrlAttachments) { - return _streamChatTheme.colorTheme.linkBg; + return widget.messageTheme.linkBackgroundColor; } if (isOnlyEmoji) { diff --git a/packages/stream_chat_flutter/lib/src/quoted_message_widget.dart b/packages/stream_chat_flutter/lib/src/quoted_message_widget.dart index 01068abd..f1dc9711 100644 --- a/packages/stream_chat_flutter/lib/src/quoted_message_widget.dart +++ b/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; } diff --git a/packages/stream_chat_flutter/lib/src/stream_chat_theme.dart b/packages/stream_chat_flutter/lib/src/stream_chat_theme.dart index 0e50f132..3fb13238 100644 --- a/packages/stream_chat_flutter/lib/src/stream_chat_theme.dart +++ b/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), diff --git a/packages/stream_chat_flutter/lib/src/theme/message_theme.dart b/packages/stream_chat_flutter/lib/src/theme/message_theme.dart index 023a2917..7bed2ceb 100644 --- a/packages/stream_chat_flutter/lib/src/theme/message_theme.dart +++ b/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)); } } diff --git a/packages/stream_chat_flutter/test/src/theme/message_theme_test.dart b/packages/stream_chat_flutter/test/src/theme/message_theme_test.dart index 5908d864..502be84a 100644 --- a/packages/stream_chat_flutter/test/src/theme/message_theme_test.dart +++ b/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, );