feat(ui): Add support for gradient backgrounds in MessageCard #2383
Conversation
This commit introduces the ability to use gradients as backgrounds for message cards. A new `messageBackgroundGradient` property has been added to `StreamMessageThemeData`. When this property is set, it will take precedence over the `messageBackgroundColor`. The `MessageCard` widget has been updated to: - Use a new `_buildDecoration` method to construct the `ShapeDecoration`. - Prioritize `messageBackgroundGradient` over `messageBackgroundColor` when determining the background. - Ensure that only-emoji messages do not have a background color or gradient.
WalkthroughAdds a nullable Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant MC as MessageCard
participant T as StreamMessageThemeData
participant D as _buildDecoration()
participant UI as Flutter Render
Note over MC,T: Build/paint phase
MC->>T: Read colors, borders, shape, messageBackgroundGradient
MC->>D: _buildDecoration(theme)
alt theme.messageBackgroundGradient != null and not only-emoji
D-->>MC: ShapeDecoration(gradient=theme.messageBackgroundGradient, shape, border)
else
D-->>MC: ShapeDecoration(color=_getBackgroundColor(theme), shape, border)
end
MC->>UI: Paint with ShapeDecoration
UI-->>MC: Rendered bubble
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches🧪 Generate unit tests
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro Disabled knowledge base sources:
📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (10)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
xsahil03x
force-pushed
the
feat/message-background-gradient
branch
from
54f0011 to
4573f3c
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
packages/stream_chat_flutter/CHANGELOG.md (1)
3-6: Clarify precedence and emoji-only behavior in the note.Suggest amending the bullet to explicitly state: gradient overrides both messageBackgroundColor and urlAttachmentBackgroundColor, and is skipped for emoji-only messages. This avoids surprises for users styling URL-only messages.
packages/stream_chat_flutter/lib/src/theme/message_theme.dart (2)
165-167: Use Gradient.lerp for smoother theme transitions.Current step switch at t<0.5 produces a hard jump. Prefer Gradient.lerp(a,b,t) which handles matching gradient types gracefully.
Apply:
- messageBackgroundGradient: - t < 0.5 ? a.messageBackgroundGradient : b.messageBackgroundGradient, + messageBackgroundGradient: + Gradient.lerp(a.messageBackgroundGradient, b.messageBackgroundGradient, t),
95-106: Confirm copyWith nullability semantics.copyWith cannot clear an existing gradient to null due to
??fallback. If clearing should be possible, introduce_sentinelparams (Flutter pattern) or aclearMessageBackgroundGradientflag.Also applies to: 123-127
packages/stream_chat_flutter/lib/src/message_widget/message_card.dart (2)
226-247: Avoid painting a transparent border; drop border for emoji-only.If
messageBorderColorresolves to fully transparent (or the message is emoji-only), useBorderSide.noneto skip unnecessary painting and avoid outlines on emoji-only bubbles.Apply:
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), - }, + side: switch (widget.borderSide) { + final side? => side, + _ => (widget.isOnlyEmoji || borderColor.alpha == 0) + ? BorderSide.none + : BorderSide(color: borderColor), + }, ), }, );
266-270: Do not override urlAttachmentBackgroundColor with gradient (unless intended).With the current logic, any configured gradient overrides urlAttachmentBackgroundColor for URL-only messages. If the intent is to keep URL-only cards on their dedicated background, gate the gradient similarly to color selection.
Apply:
Gradient? _getBackgroundGradient(StreamMessageThemeData theme) { if (widget.isOnlyEmoji) return null; + final containsOnlyUrlAttachment = + widget.hasUrlAttachments && !widget.hasNonUrlAttachments; + if (containsOnlyUrlAttachment) return null; return theme.messageBackgroundGradient; }If overriding URL backgrounds is desired, please confirm and consider noting it in the CHANGELOG entry.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (3)
packages/stream_chat_flutter/CHANGELOG.md(8 hunks)packages/stream_chat_flutter/lib/src/message_widget/message_card.dart(2 hunks)packages/stream_chat_flutter/lib/src/theme/message_theme.dart(9 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (9)
- GitHub Check: analyze_legacy_versions
- GitHub Check: analyze
- GitHub Check: stream_chat_flutter_core
- GitHub Check: stream_chat_flutter
- GitHub Check: stream_chat_localizations
- GitHub Check: stream_chat_persistence
- GitHub Check: build (ios)
- GitHub Check: test
- GitHub Check: build (android)
🔇 Additional comments (4)
packages/stream_chat_flutter/lib/src/theme/message_theme.dart (2)
58-61: Good addition; doc clearly states precedence.Property addition and docs look solid.
304-305: Diagnostics entry: LGTM.Exposes the field in debug info as expected.
packages/stream_chat_flutter/lib/src/message_widget/message_card.dart (2)
171-173: Refactor to _buildDecoration: LGTM.Encapsulating decoration logic improves readability and keeps build lean.
249-264: Color fallback logic: LGTM.Respects quoted/url-only/emoji-only cases for solid color paths.
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #2383 +/- ##
==========================================
+ Coverage 63.76% 63.78% +0.01%
==========================================
Files 412 412
Lines 25821 25834 +13
==========================================
+ Hits 16466 16477 +11
- Misses 9355 9357 +2 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Submit a pull request
Fixes: FLU-260
Description of the pull request
This PR introduces the ability to use gradients as backgrounds for message cards.
A new
messageBackgroundGradientproperty has been added toStreamMessageThemeData. When this property is set, it will take precedence over themessageBackgroundColor.The
MessageCardwidget has been updated to:_buildDecorationmethod to construct theShapeDecoration.messageBackgroundGradientovermessageBackgroundColorwhen determining the background.Summary by CodeRabbit
New Features
Documentation
Notes