feat(ui): animate pinned message color
Signed-off-by: xsahil03x <[email protected]>
This commit is contained in:
Sahil Kumar
@@ -596,240 +596,251 @@ 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
|
||||||
widthFactor: 0.78,
|
: Alignment.centerLeft,
|
||||||
child: Column(
|
widthFactor: 0.78,
|
||||||
crossAxisAlignment: widget.reverse
|
child: Column(
|
||||||
? CrossAxisAlignment.end
|
crossAxisAlignment: widget.reverse
|
||||||
: CrossAxisAlignment.start,
|
? CrossAxisAlignment.end
|
||||||
mainAxisSize: MainAxisSize.min,
|
: CrossAxisAlignment.start,
|
||||||
children: <Widget>[
|
mainAxisSize: MainAxisSize.min,
|
||||||
Stack(
|
children: <Widget>[
|
||||||
clipBehavior: Clip.none,
|
Stack(
|
||||||
alignment: widget.reverse
|
clipBehavior: Clip.none,
|
||||||
? AlignmentDirectional.bottomEnd
|
alignment: widget.reverse
|
||||||
: AlignmentDirectional.bottomStart,
|
? AlignmentDirectional.bottomEnd
|
||||||
children: [
|
: AlignmentDirectional.bottomStart,
|
||||||
Padding(
|
children: [
|
||||||
padding: EdgeInsets.only(
|
|
||||||
bottom:
|
|
||||||
isPinned && widget.showPinHighlight ? 8.0 : 0.0,
|
|
||||||
),
|
|
||||||
child: Column(
|
|
||||||
crossAxisAlignment: widget.reverse
|
|
||||||
? CrossAxisAlignment.end
|
|
||||||
: CrossAxisAlignment.start,
|
|
||||||
mainAxisSize: MainAxisSize.min,
|
|
||||||
children: [
|
|
||||||
if (widget.message.pinned &&
|
|
||||||
widget.message.pinnedBy != null &&
|
|
||||||
widget.showPinHighlight)
|
|
||||||
_buildPinnedMessage(widget.message),
|
|
||||||
Row(
|
|
||||||
crossAxisAlignment: CrossAxisAlignment.end,
|
|
||||||
mainAxisSize: MainAxisSize.min,
|
|
||||||
children: <Widget>[
|
|
||||||
if (!widget.reverse &&
|
|
||||||
widget.showUserAvatar ==
|
|
||||||
DisplayWidget.show &&
|
|
||||||
widget.message.user != null) ...[
|
|
||||||
_buildUserAvatar(),
|
|
||||||
const SizedBox(width: 4),
|
|
||||||
],
|
|
||||||
if (widget.showUserAvatar == DisplayWidget.hide)
|
|
||||||
SizedBox(width: avatarWidth + 4),
|
|
||||||
Flexible(
|
|
||||||
child: PortalTarget(
|
|
||||||
visible: showReactions,
|
|
||||||
portalFollower: showReactions
|
|
||||||
? Container(
|
|
||||||
transform:
|
|
||||||
Matrix4.translationValues(
|
|
||||||
widget.reverse ? 12 : -12,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
),
|
|
||||||
constraints: const BoxConstraints(
|
|
||||||
maxWidth: 22 * 6.0,
|
|
||||||
),
|
|
||||||
child: _buildReactionIndicator(
|
|
||||||
context,
|
|
||||||
),
|
|
||||||
)
|
|
||||||
: null,
|
|
||||||
anchor: Aligned(
|
|
||||||
follower: Alignment(
|
|
||||||
widget.reverse ? 1 : -1,
|
|
||||||
-1,
|
|
||||||
),
|
|
||||||
target: Alignment(
|
|
||||||
widget.reverse ? -1 : 1,
|
|
||||||
-1,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
child: Stack(
|
|
||||||
clipBehavior: Clip.none,
|
|
||||||
children: [
|
|
||||||
Padding(
|
|
||||||
padding: widget.showReactions
|
|
||||||
? EdgeInsets.only(
|
|
||||||
top: widget
|
|
||||||
.message
|
|
||||||
.reactionCounts
|
|
||||||
?.isNotEmpty ==
|
|
||||||
true
|
|
||||||
? 18
|
|
||||||
: 0,
|
|
||||||
)
|
|
||||||
: EdgeInsets.zero,
|
|
||||||
child: (widget.message.isDeleted &&
|
|
||||||
!isFailedState)
|
|
||||||
? Container(
|
|
||||||
// ignore: lines_longer_than_80_chars
|
|
||||||
margin: EdgeInsets.symmetric(
|
|
||||||
horizontal:
|
|
||||||
// ignore: lines_longer_than_80_chars
|
|
||||||
widget.showUserAvatar ==
|
|
||||||
// ignore: lines_longer_than_80_chars
|
|
||||||
DisplayWidget
|
|
||||||
.gone
|
|
||||||
? 0
|
|
||||||
: 4.0,
|
|
||||||
),
|
|
||||||
child: StreamDeletedMessage(
|
|
||||||
borderRadiusGeometry: widget
|
|
||||||
.borderRadiusGeometry,
|
|
||||||
borderSide:
|
|
||||||
widget.borderSide,
|
|
||||||
shape: widget.shape,
|
|
||||||
messageTheme:
|
|
||||||
widget.messageTheme,
|
|
||||||
),
|
|
||||||
)
|
|
||||||
: Card(
|
|
||||||
clipBehavior: Clip.hardEdge,
|
|
||||||
elevation: 0,
|
|
||||||
margin: EdgeInsets.symmetric(
|
|
||||||
horizontal: (isFailedState
|
|
||||||
? 15.0
|
|
||||||
: 0.0) +
|
|
||||||
// ignore: lines_longer_than_80_chars
|
|
||||||
(widget.showUserAvatar ==
|
|
||||||
DisplayWidget
|
|
||||||
.gone
|
|
||||||
? 0
|
|
||||||
: 4.0),
|
|
||||||
),
|
|
||||||
shape: widget.shape ??
|
|
||||||
RoundedRectangleBorder(
|
|
||||||
side: widget
|
|
||||||
.borderSide ??
|
|
||||||
BorderSide(
|
|
||||||
color: widget
|
|
||||||
// ignore: lines_longer_than_80_chars
|
|
||||||
.messageTheme
|
|
||||||
// ignore: lines_longer_than_80_chars
|
|
||||||
.messageBorderColor ??
|
|
||||||
Colors.grey,
|
|
||||||
),
|
|
||||||
borderRadius: widget
|
|
||||||
// ignore: lines_longer_than_80_chars
|
|
||||||
.borderRadiusGeometry ??
|
|
||||||
BorderRadius.zero,
|
|
||||||
),
|
|
||||||
color: _getBackgroundColor(),
|
|
||||||
child: Column(
|
|
||||||
crossAxisAlignment:
|
|
||||||
CrossAxisAlignment.end,
|
|
||||||
mainAxisSize:
|
|
||||||
MainAxisSize.min,
|
|
||||||
children: <Widget>[
|
|
||||||
if (hasQuotedMessage)
|
|
||||||
_buildQuotedMessage(),
|
|
||||||
if (hasNonUrlAttachments)
|
|
||||||
_parseAttachments(),
|
|
||||||
if (!isGiphy)
|
|
||||||
_buildTextBubble(),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
if (widget.showReactionPickerIndicator)
|
|
||||||
Positioned(
|
|
||||||
right: widget.reverse ? null : 4,
|
|
||||||
left: widget.reverse ? 4 : null,
|
|
||||||
top: -8,
|
|
||||||
child: CustomPaint(
|
|
||||||
painter: ReactionBubblePainter(
|
|
||||||
_streamChatTheme
|
|
||||||
.colorTheme.barsBg,
|
|
||||||
Colors.transparent,
|
|
||||||
Colors.transparent,
|
|
||||||
tailCirclesSpace: 1,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
if (widget.reverse &&
|
|
||||||
widget.showUserAvatar ==
|
|
||||||
DisplayWidget.show &&
|
|
||||||
widget.message.user != null) ...[
|
|
||||||
_buildUserAvatar(),
|
|
||||||
const SizedBox(width: 4),
|
|
||||||
],
|
|
||||||
],
|
|
||||||
),
|
|
||||||
if (showBottomRow)
|
|
||||||
SizedBox(height: context.textScaleFactor * 18.0),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
if (showBottomRow)
|
|
||||||
Padding(
|
Padding(
|
||||||
padding: EdgeInsets.only(
|
padding: EdgeInsets.only(
|
||||||
left: !widget.reverse ? bottomRowPadding : 0,
|
|
||||||
right: widget.reverse ? bottomRowPadding : 0,
|
|
||||||
bottom:
|
bottom:
|
||||||
isPinned && widget.showPinHighlight ? 6.0 : 0.0,
|
isPinned && widget.showPinHighlight ? 8.0 : 0.0,
|
||||||
|
),
|
||||||
|
child: Column(
|
||||||
|
crossAxisAlignment: widget.reverse
|
||||||
|
? CrossAxisAlignment.end
|
||||||
|
: CrossAxisAlignment.start,
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: [
|
||||||
|
if (widget.message.pinned &&
|
||||||
|
widget.message.pinnedBy != null &&
|
||||||
|
widget.showPinHighlight)
|
||||||
|
_buildPinnedMessage(widget.message),
|
||||||
|
Row(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.end,
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: <Widget>[
|
||||||
|
if (!widget.reverse &&
|
||||||
|
widget.showUserAvatar ==
|
||||||
|
DisplayWidget.show &&
|
||||||
|
widget.message.user != null) ...[
|
||||||
|
_buildUserAvatar(),
|
||||||
|
const SizedBox(width: 4),
|
||||||
|
],
|
||||||
|
if (widget.showUserAvatar ==
|
||||||
|
DisplayWidget.hide)
|
||||||
|
SizedBox(width: avatarWidth + 4),
|
||||||
|
Flexible(
|
||||||
|
child: PortalTarget(
|
||||||
|
visible: showReactions,
|
||||||
|
portalFollower: showReactions
|
||||||
|
? Container(
|
||||||
|
transform:
|
||||||
|
Matrix4.translationValues(
|
||||||
|
widget.reverse ? 12 : -12,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
),
|
||||||
|
constraints: const BoxConstraints(
|
||||||
|
maxWidth: 22 * 6.0,
|
||||||
|
),
|
||||||
|
child: _buildReactionIndicator(
|
||||||
|
context,
|
||||||
|
),
|
||||||
|
)
|
||||||
|
: null,
|
||||||
|
anchor: Aligned(
|
||||||
|
follower: Alignment(
|
||||||
|
widget.reverse ? 1 : -1,
|
||||||
|
-1,
|
||||||
|
),
|
||||||
|
target: Alignment(
|
||||||
|
widget.reverse ? -1 : 1,
|
||||||
|
-1,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
child: Stack(
|
||||||
|
clipBehavior: Clip.none,
|
||||||
|
children: [
|
||||||
|
Padding(
|
||||||
|
padding: widget.showReactions
|
||||||
|
? EdgeInsets.only(
|
||||||
|
top: widget
|
||||||
|
.message
|
||||||
|
.reactionCounts
|
||||||
|
?.isNotEmpty ==
|
||||||
|
true
|
||||||
|
? 18
|
||||||
|
: 0,
|
||||||
|
)
|
||||||
|
: EdgeInsets.zero,
|
||||||
|
child: (widget.message.isDeleted &&
|
||||||
|
!isFailedState)
|
||||||
|
? Container(
|
||||||
|
// ignore: lines_longer_than_80_chars
|
||||||
|
margin:
|
||||||
|
EdgeInsets.symmetric(
|
||||||
|
horizontal:
|
||||||
|
// ignore: lines_longer_than_80_chars
|
||||||
|
widget.showUserAvatar ==
|
||||||
|
// ignore: lines_longer_than_80_chars
|
||||||
|
DisplayWidget.gone
|
||||||
|
? 0
|
||||||
|
: 4.0,
|
||||||
|
),
|
||||||
|
child: StreamDeletedMessage(
|
||||||
|
borderRadiusGeometry: widget
|
||||||
|
.borderRadiusGeometry,
|
||||||
|
borderSide:
|
||||||
|
widget.borderSide,
|
||||||
|
shape: widget.shape,
|
||||||
|
messageTheme:
|
||||||
|
widget.messageTheme,
|
||||||
|
),
|
||||||
|
)
|
||||||
|
: Card(
|
||||||
|
clipBehavior: Clip.hardEdge,
|
||||||
|
elevation: 0,
|
||||||
|
margin:
|
||||||
|
EdgeInsets.symmetric(
|
||||||
|
horizontal: (isFailedState
|
||||||
|
? 15.0
|
||||||
|
: 0.0) +
|
||||||
|
// ignore: lines_longer_than_80_chars
|
||||||
|
(widget.showUserAvatar ==
|
||||||
|
DisplayWidget
|
||||||
|
.gone
|
||||||
|
? 0
|
||||||
|
: 4.0),
|
||||||
|
),
|
||||||
|
shape: widget.shape ??
|
||||||
|
RoundedRectangleBorder(
|
||||||
|
side: widget
|
||||||
|
.borderSide ??
|
||||||
|
BorderSide(
|
||||||
|
color: widget
|
||||||
|
// ignore: lines_longer_than_80_chars
|
||||||
|
.messageTheme
|
||||||
|
// ignore: lines_longer_than_80_chars
|
||||||
|
.messageBorderColor ??
|
||||||
|
Colors.grey,
|
||||||
|
),
|
||||||
|
borderRadius: widget
|
||||||
|
// ignore: lines_longer_than_80_chars
|
||||||
|
.borderRadiusGeometry ??
|
||||||
|
BorderRadius.zero,
|
||||||
|
),
|
||||||
|
color:
|
||||||
|
_getBackgroundColor(),
|
||||||
|
child: Column(
|
||||||
|
crossAxisAlignment:
|
||||||
|
CrossAxisAlignment
|
||||||
|
.end,
|
||||||
|
mainAxisSize:
|
||||||
|
MainAxisSize.min,
|
||||||
|
children: <Widget>[
|
||||||
|
if (hasQuotedMessage)
|
||||||
|
_buildQuotedMessage(),
|
||||||
|
if (hasNonUrlAttachments)
|
||||||
|
_parseAttachments(),
|
||||||
|
if (!isGiphy)
|
||||||
|
_buildTextBubble(),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
if (widget
|
||||||
|
.showReactionPickerIndicator)
|
||||||
|
Positioned(
|
||||||
|
right: widget.reverse ? null : 4,
|
||||||
|
left: widget.reverse ? 4 : null,
|
||||||
|
top: -8,
|
||||||
|
child: CustomPaint(
|
||||||
|
painter: ReactionBubblePainter(
|
||||||
|
_streamChatTheme
|
||||||
|
.colorTheme.barsBg,
|
||||||
|
Colors.transparent,
|
||||||
|
Colors.transparent,
|
||||||
|
tailCirclesSpace: 1,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
if (widget.reverse &&
|
||||||
|
widget.showUserAvatar ==
|
||||||
|
DisplayWidget.show &&
|
||||||
|
widget.message.user != null) ...[
|
||||||
|
_buildUserAvatar(),
|
||||||
|
const SizedBox(width: 4),
|
||||||
|
],
|
||||||
|
],
|
||||||
|
),
|
||||||
|
if (showBottomRow)
|
||||||
|
SizedBox(
|
||||||
|
height: context.textScaleFactor * 18.0),
|
||||||
|
],
|
||||||
),
|
),
|
||||||
child: widget.bottomRowBuilder?.call(
|
|
||||||
context,
|
|
||||||
widget.message,
|
|
||||||
) ??
|
|
||||||
_bottomRow,
|
|
||||||
),
|
),
|
||||||
if (isFailedState)
|
if (showBottomRow)
|
||||||
Positioned(
|
Padding(
|
||||||
right: widget.reverse ? 0 : null,
|
padding: EdgeInsets.only(
|
||||||
left: widget.reverse ? null : 0,
|
left: !widget.reverse ? bottomRowPadding : 0,
|
||||||
bottom: showBottomRow ? 18 : -2,
|
right: widget.reverse ? bottomRowPadding : 0,
|
||||||
child: StreamSvgIcon.error(size: 20),
|
bottom: isPinned && widget.showPinHighlight
|
||||||
),
|
? 6.0
|
||||||
],
|
: 0.0,
|
||||||
),
|
),
|
||||||
],
|
child: widget.bottomRowBuilder?.call(
|
||||||
|
context,
|
||||||
|
widget.message,
|
||||||
|
) ??
|
||||||
|
_bottomRow,
|
||||||
|
),
|
||||||
|
if (isFailedState)
|
||||||
|
Positioned(
|
||||||
|
right: widget.reverse ? 0 : null,
|
||||||
|
left: widget.reverse ? null : 0,
|
||||||
|
bottom: showBottomRow ? 18 : -2,
|
||||||
|
child: StreamSvgIcon.error(size: 20),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
@@ -1343,12 +1354,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,
|
||||||
|
|||||||
Reference in New Issue
Block a user