Merge pull request #1204 from GetStream/feat/animate-pinned-color

feat(ui): animate pinned message color
This commit is contained in:
Salvatore Giordano
2022-06-13 14:55:23 +02:00
committed by GitHub
2 changed files with 248 additions and 235 deletions
@@ -9,6 +9,11 @@
- [[#996]](https://github.com/GetStream/stream-chat-flutter/issues/996) Videos break bottom photo - [[#996]](https://github.com/GetStream/stream-chat-flutter/issues/996) Videos break bottom photo
carousal. carousal.
✅ Added
- [[#1011]](https://github.com/GetStream/stream-chat-flutter/issues/1011) Animate the background
color of pinned messages.
## 4.2.0 ## 4.2.0
🐞 Fixed 🐞 Fixed
@@ -596,26 +596,29 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
final showReactions = _shouldShowReactions; final showReactions = _shouldShowReactions;
final onMessageTap = widget.onMessageTap;
return Material( return Material(
type: widget.message.pinned && widget.showPinHighlight type: MaterialType.transparency,
? MaterialType.card child: AnimatedContainer(
: MaterialType.transparency, duration: const Duration(seconds: 1),
color: widget.message.pinned && widget.showPinHighlight color: widget.message.pinned && widget.showPinHighlight
? _streamChatTheme.colorTheme.highlight ? _streamChatTheme.colorTheme.highlight
: null, : _streamChatTheme.colorTheme.barsBg.withOpacity(0),
child: Portal( child: Portal(
child: InkWell( child: InkWell(
onTap: () { onTap: onMessageTap == null
widget.onMessageTap!(widget.message); ? null
}, : () => onMessageTap(widget.message),
onLongPress: widget.message.isDeleted && !isFailedState onLongPress: widget.message.isDeleted && !isFailedState
? null ? null
: () => onLongPress(context), : () => onLongPress(context),
child: Padding( child: Padding(
padding: widget.padding ?? const EdgeInsets.all(8), padding: widget.padding ?? const EdgeInsets.all(8),
child: FractionallySizedBox( child: FractionallySizedBox(
alignment: alignment: widget.reverse
widget.reverse ? Alignment.centerRight : Alignment.centerLeft, ? Alignment.centerRight
: Alignment.centerLeft,
widthFactor: 0.78, widthFactor: 0.78,
child: Column( child: Column(
crossAxisAlignment: widget.reverse crossAxisAlignment: widget.reverse
@@ -655,7 +658,8 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
_buildUserAvatar(), _buildUserAvatar(),
const SizedBox(width: 4), const SizedBox(width: 4),
], ],
if (widget.showUserAvatar == DisplayWidget.hide) if (widget.showUserAvatar ==
DisplayWidget.hide)
SizedBox(width: avatarWidth + 4), SizedBox(width: avatarWidth + 4),
Flexible( Flexible(
child: PortalTarget( child: PortalTarget(
@@ -704,18 +708,18 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
child: (widget.message.isDeleted && child: (widget.message.isDeleted &&
!isFailedState) !isFailedState)
? Container( ? Container(
// ignore: lines_longer_than_80_chars margin:
margin: EdgeInsets.symmetric( EdgeInsets.symmetric(
horizontal: horizontal:
// ignore: lines_longer_than_80_chars // ignore: lines_longer_than_80_chars
widget.showUserAvatar == widget.showUserAvatar ==
// ignore: lines_longer_than_80_chars // ignore: lines_longer_than_80_chars
DisplayWidget DisplayWidget.gone
.gone
? 0 ? 0
: 4.0, : 4.0,
), ),
child: StreamDeletedMessage( child: StreamDeletedMessage(
// ignore: lines_longer_than_80_chars
borderRadiusGeometry: widget borderRadiusGeometry: widget
.borderRadiusGeometry, .borderRadiusGeometry,
borderSide: borderSide:
@@ -728,7 +732,8 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
: Card( : Card(
clipBehavior: Clip.hardEdge, clipBehavior: Clip.hardEdge,
elevation: 0, elevation: 0,
margin: EdgeInsets.symmetric( margin:
EdgeInsets.symmetric(
horizontal: (isFailedState horizontal: (isFailedState
? 15.0 ? 15.0
: 0.0) + : 0.0) +
@@ -756,15 +761,17 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
.borderRadiusGeometry ?? .borderRadiusGeometry ??
BorderRadius.zero, BorderRadius.zero,
), ),
color: _getBackgroundColor(), color: _backgroundColor,
child: Column( child: Column(
crossAxisAlignment: crossAxisAlignment:
CrossAxisAlignment.end, CrossAxisAlignment
.end,
mainAxisSize: mainAxisSize:
MainAxisSize.min, MainAxisSize.min,
children: <Widget>[ children: <Widget>[
if (hasQuotedMessage) if (hasQuotedMessage)
_buildQuotedMessage(), _buildQuotedMessage(),
// ignore: lines_longer_than_80_chars
if (hasNonUrlAttachments) if (hasNonUrlAttachments)
_parseAttachments(), _parseAttachments(),
if (!isGiphy) if (!isGiphy)
@@ -773,7 +780,8 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
), ),
), ),
), ),
if (widget.showReactionPickerIndicator) if (widget
.showReactionPickerIndicator)
Positioned( Positioned(
right: widget.reverse ? null : 4, right: widget.reverse ? null : 4,
left: widget.reverse ? 4 : null, left: widget.reverse ? 4 : null,
@@ -802,7 +810,9 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
], ],
), ),
if (showBottomRow) if (showBottomRow)
SizedBox(height: context.textScaleFactor * 18.0), SizedBox(
height: context.textScaleFactor * 18.0,
),
], ],
), ),
), ),
@@ -811,8 +821,9 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
padding: EdgeInsets.only( padding: EdgeInsets.only(
left: !widget.reverse ? bottomRowPadding : 0, left: !widget.reverse ? bottomRowPadding : 0,
right: widget.reverse ? bottomRowPadding : 0, right: widget.reverse ? bottomRowPadding : 0,
bottom: bottom: isPinned && widget.showPinHighlight
isPinned && widget.showPinHighlight ? 6.0 : 0.0, ? 6.0
: 0.0,
), ),
child: widget.bottomRowBuilder?.call( child: widget.bottomRowBuilder?.call(
context, context,
@@ -835,6 +846,7 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
), ),
), ),
), ),
),
); );
} }
@@ -1343,12 +1355,8 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
child: Row( child: Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
StreamSvgIcon.pin( StreamSvgIcon.pin(size: 16),
size: 16, const SizedBox(width: 4),
),
const SizedBox(
width: 4,
),
Text( Text(
context.translations.pinnedByUserText( context.translations.pinnedByUserText(
pinnedBy: pinnedBy, pinnedBy: pinnedBy,
@@ -1367,7 +1375,7 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
bool get isPinned => widget.message.pinned; bool get isPinned => widget.message.pinned;
Color? _getBackgroundColor() { Color? get _backgroundColor {
if (hasQuotedMessage) { if (hasQuotedMessage) {
return widget.messageTheme.messageBackgroundColor; return widget.messageTheme.messageBackgroundColor;
} }