feat(ui): Add support for gradient backgrounds in MessageCard (#2383)

Author: xsahil03x

packages/stream_chat_flutter/CHANGELOG.md

@@ -1,5 +1,10 @@
 ## Upcoming
 
+✅ Added
+
+- Added `messageBackgroundGradient` property to `StreamMessageThemeData` for gradient message
+  backgrounds.
+
 🐞 Fixed
 
 - Fixed `.replaceMentions` not escaping special characters in the username.

packages/stream_chat_flutter/lib/src/message_widget/message_card.dart

@@ -169,18 +169,7 @@ class _MessageCardState extends State<MessageCard> {
             (widget.showUserAvatar == DisplayWidget.gone ? 0 : 4.0),
       ),
       clipBehavior: Clip.hardEdge,
-      decoration: ShapeDecoration(
-        color: _getBackgroundColor(),
-        shape: widget.shape ??
-            RoundedRectangleBorder(
-              side: widget.borderSide ??
-                  BorderSide(
-                    color: widget.messageTheme.messageBorderColor ??
-                        Colors.transparent,
-                  ),
-              borderRadius: widget.borderRadiusGeometry ?? BorderRadius.zero,
-            ),
-      ),
+      decoration: _buildDecoration(widget.messageTheme),
       child: Column(
         mainAxisSize: MainAxisSize.min,
         crossAxisAlignment: CrossAxisAlignment.start,
@@ -234,22 +223,49 @@ class _MessageCardState extends State<MessageCard> {
     );
   }
 
-  Color? _getBackgroundColor() {
+  ShapeDecoration _buildDecoration(StreamMessageThemeData theme) {
+    final gradient = _getBackgroundGradient(theme);
+    final color = gradient == null ? _getBackgroundColor(theme) : null;
+
+    final borderColor = theme.messageBorderColor ?? Colors.transparent;
+    final borderRadius = widget.borderRadiusGeometry ?? BorderRadius.zero;
+
+    return ShapeDecoration(
+      color: color,
+      gradient: gradient,
+      shape: switch (widget.shape) {
+        final shape? => shape,
+        _ => RoundedRectangleBorder(
+            borderRadius: borderRadius,
+            side: switch (widget.borderSide) {
+              final side? => side,
+              _ => BorderSide(color: borderColor),
+            },
+          ),
+      },
+    );
+  }
+
+  Color? _getBackgroundColor(StreamMessageThemeData theme) {
     if (widget.hasQuotedMessage) {
-      return widget.messageTheme.messageBackgroundColor;
+      return theme.messageBackgroundColor;
     }
 
     final containsOnlyUrlAttachment =
         widget.hasUrlAttachments && !widget.hasNonUrlAttachments;
 
     if (containsOnlyUrlAttachment) {
-      return widget.messageTheme.urlAttachmentBackgroundColor;
+      return theme.urlAttachmentBackgroundColor;
     }
 
-    if (widget.isOnlyEmoji) {
-      return Colors.transparent;
-    }
+    if (widget.isOnlyEmoji) return null;
+
+    return theme.messageBackgroundColor;
+  }
+
+  Gradient? _getBackgroundGradient(StreamMessageThemeData theme) {
+    if (widget.isOnlyEmoji) return null;
 
-    return widget.messageTheme.messageBackgroundColor;
+    return theme.messageBackgroundGradient;
   }
 }

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

@@ -17,6 +17,7 @@ class StreamMessageThemeData with Diagnosticable {
     this.messageLinksStyle,
     this.messageDeletedStyle,
     this.messageBackgroundColor,
+    this.messageBackgroundGradient,
     this.messageBorderColor,
     this.reactionsBackgroundColor,
     this.reactionsBorderColor,
@@ -54,6 +55,11 @@ class StreamMessageThemeData with Diagnosticable {
   /// Color for messageBackgroundColor
   final Color? messageBackgroundColor;
 
+  /// Gradient for message background.
+  ///
+  /// Note: If this is set, it will override [messageBackgroundColor].
+  final Gradient? messageBackgroundGradient;
+
   /// Color for message border color
   final Color? messageBorderColor;
 
@@ -96,6 +102,7 @@ class StreamMessageThemeData with Diagnosticable {
     TextStyle? createdAtStyle,
     TextStyle? repliesStyle,
     Color? messageBackgroundColor,
+    Gradient? messageBackgroundGradient,
     Color? messageBorderColor,
     StreamAvatarThemeData? avatarTheme,
     Color? reactionsBackgroundColor,
@@ -116,6 +123,8 @@ class StreamMessageThemeData with Diagnosticable {
       messageDeletedStyle: messageDeletedStyle ?? this.messageDeletedStyle,
       messageBackgroundColor:
           messageBackgroundColor ?? this.messageBackgroundColor,
+      messageBackgroundGradient:
+          messageBackgroundGradient ?? this.messageBackgroundGradient,
       messageBorderColor: messageBorderColor ?? this.messageBorderColor,
       avatarTheme: avatarTheme ?? this.avatarTheme,
       repliesStyle: repliesStyle ?? this.repliesStyle,
@@ -154,6 +163,8 @@ class StreamMessageThemeData with Diagnosticable {
           TextStyle.lerp(a.messageDeletedStyle, b.messageDeletedStyle, t),
       messageBackgroundColor:
           Color.lerp(a.messageBackgroundColor, b.messageBackgroundColor, t),
+      messageBackgroundGradient:
+          t < 0.5 ? a.messageBackgroundGradient : b.messageBackgroundGradient,
       messageBorderColor:
           Color.lerp(a.messageBorderColor, b.messageBorderColor, t),
       messageLinksStyle:
@@ -218,6 +229,7 @@ class StreamMessageThemeData with Diagnosticable {
       repliesStyle:
           repliesStyle?.merge(other.repliesStyle) ?? other.repliesStyle,
       messageBackgroundColor: other.messageBackgroundColor,
+      messageBackgroundGradient: other.messageBackgroundGradient,
       messageBorderColor: other.messageBorderColor,
       avatarTheme: avatarTheme?.merge(other.avatarTheme) ?? other.avatarTheme,
       reactionsBackgroundColor: other.reactionsBackgroundColor,
@@ -244,6 +256,7 @@ class StreamMessageThemeData with Diagnosticable {
           messageDeletedStyle == other.messageDeletedStyle &&
           repliesStyle == other.repliesStyle &&
           messageBackgroundColor == other.messageBackgroundColor &&
+          messageBackgroundGradient == other.messageBackgroundGradient &&
           messageBorderColor == other.messageBorderColor &&
           reactionsBackgroundColor == other.reactionsBackgroundColor &&
           reactionsBorderColor == other.reactionsBorderColor &&
@@ -265,6 +278,7 @@ class StreamMessageThemeData with Diagnosticable {
       messageDeletedStyle.hashCode ^
       repliesStyle.hashCode ^
       messageBackgroundColor.hashCode ^
+      messageBackgroundGradient.hashCode ^
       messageBorderColor.hashCode ^
       reactionsBackgroundColor.hashCode ^
       reactionsBorderColor.hashCode ^
@@ -288,6 +302,8 @@ class StreamMessageThemeData with Diagnosticable {
       ..add(DiagnosticsProperty('messageDeletedStyle', messageDeletedStyle))
       ..add(DiagnosticsProperty('repliesStyle', repliesStyle))
       ..add(ColorProperty('messageBackgroundColor', messageBackgroundColor))
+      ..add(DiagnosticsProperty(
+          'messageBackgroundGradient', messageBackgroundGradient))
       ..add(ColorProperty('messageBorderColor', messageBorderColor))
       ..add(DiagnosticsProperty('avatarTheme', avatarTheme))
       ..add(ColorProperty('reactionsBackgroundColor', reactionsBackgroundColor))