talksik/stream-chat-flutter
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #430 from GetStream/rfac/transform

Browse Source 
refactor: transform
This commit is contained in:
Salvatore Giordano
2021-05-18 14:54:41 +02:00
committed by GitHub
parent de3f720ced 2d1c99cab7
commit 99afb0ba8e
10 changed files with 446 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/stream_chat_flutter/lib/src/deleted_message.dart
+21 -31
View File
@@ -1,5 +1,3 @@
import 'dart:math';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:stream_chat_flutter/src/stream_chat_theme.dart'; import 'package:stream_chat_flutter/src/stream_chat_theme.dart';
@@ -33,36 +31,28 @@ class DeletedMessage extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final chatThemeData = StreamChatTheme.of(context); final chatThemeData = StreamChatTheme.of(context);
return Transform( return Material(
transform: Matrix4.rotationY(reverse ? pi : 0), color: messageTheme.messageBackgroundColor,
alignment: Alignment.center, shape: shape ??
child: Material( RoundedRectangleBorder(
color: messageTheme.messageBackgroundColor, borderRadius: borderRadiusGeometry ?? BorderRadius.zero,
shape: shape ?? side: borderSide ??
RoundedRectangleBorder( BorderSide(
borderRadius: borderRadiusGeometry ?? BorderRadius.zero, color: Theme.of(context).brightness == Brightness.dark
side: borderSide ?? ? chatThemeData.colorTheme.white.withAlpha(24)
BorderSide( : chatThemeData.colorTheme.black.withAlpha(24),
color: Theme.of(context).brightness == Brightness.dark ),
? chatThemeData.colorTheme.white.withAlpha(24)
: chatThemeData.colorTheme.black.withAlpha(24),
),
),
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 8,
horizontal: 16,
), ),
child: Transform( child: Padding(
transform: Matrix4.rotationY(reverse ? pi : 0), padding: const EdgeInsets.symmetric(
alignment: Alignment.center, vertical: 8,
child: Text( horizontal: 16,
'Message deleted', ),
style: messageTheme.messageText?.copyWith( child: Text(
fontStyle: FontStyle.italic, 'Message deleted',
color: messageTheme.createdAt?.color, style: messageTheme.messageText?.copyWith(
), fontStyle: FontStyle.italic,
), color: messageTheme.createdAt?.color,
), ),
), ),
), ),
packages/stream_chat_flutter/lib/src/extension.dart
+12
View File
@@ -104,3 +104,15 @@ extension BuildContextX on BuildContext {
double get textScaleFactor => double get textScaleFactor =>
MediaQuery.maybeOf(this)?.textScaleFactor ?? 1.0; MediaQuery.maybeOf(this)?.textScaleFactor ?? 1.0;
} }
/// Extension on [BorderRadius]
extension FlipBorder on BorderRadius {
/// Flips borders (Y)
BorderRadius mirrorBorderIfReversed({bool reverse = true}) => reverse
? BorderRadius.only(
topLeft: topRight,
topRight: topLeft,
bottomLeft: bottomRight,
bottomRight: bottomLeft)
: this;
}
packages/stream_chat_flutter/lib/src/message_actions_modal.dart
+10 -8
View File
@@ -173,12 +173,12 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
Align( Align(
alignment: Alignment( alignment: Alignment(
user?.id == widget.message.user?.id user?.id == widget.message.user?.id
? (divFactor > 1.0 ? (divFactor >= 1.0
? 0.0 ? -0.2
: (1.0 - divFactor)) : (1.2 - divFactor))
: (divFactor > 1.0 : (divFactor >= 1.0
? 0.0 ? 0.2
: -(1.0 - divFactor)), : -(1.2 - divFactor)),
0), 0),
child: ReactionPicker( child: ReactionPicker(
message: widget.message, message: widget.message,
@@ -189,8 +189,10 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
child: MessageWidget( child: MessageWidget(
key: const Key('MessageWidget'), key: const Key('MessageWidget'),
reverse: widget.reverse, reverse: widget.reverse,
attachmentBorderRadiusGeometry: attachmentBorderRadiusGeometry: widget
widget.attachmentBorderRadiusGeometry, .attachmentBorderRadiusGeometry
?.mirrorBorderIfReversed(
reverse: !widget.reverse),
message: widget.message.copyWith( message: widget.message.copyWith(
text: widget.message.text!.length > 200 text: widget.message.text!.length > 200
// ignore: lines_longer_than_80_chars // ignore: lines_longer_than_80_chars
packages/stream_chat_flutter/lib/src/message_list_view.dart
+32 -13
View File
@@ -980,25 +980,44 @@ class _MessageListViewState extends State<MessageListView> {
onReplyTap: widget.onReplyTap, onReplyTap: widget.onReplyTap,
attachmentBorderRadiusGeometry: BorderRadius.only( attachmentBorderRadiusGeometry: BorderRadius.only(
topLeft: Radius.circular(attachmentBorderRadius), topLeft: Radius.circular(attachmentBorderRadius),
bottomLeft: Radius.circular( bottomLeft: isMyMessage
(timeDiff >= 1 || !isNextUserSame) && ? Radius.circular(attachmentBorderRadius)
!(hasReplies || isThreadMessage || hasFileAttachment) : Radius.circular(
? 0 (timeDiff >= 1 || !isNextUserSame) &&
: attachmentBorderRadius, !(hasReplies || isThreadMessage || hasFileAttachment)
), ? 0
: attachmentBorderRadius,
),
topRight: Radius.circular(attachmentBorderRadius), topRight: Radius.circular(attachmentBorderRadius),
bottomRight: Radius.circular(attachmentBorderRadius), bottomRight: isMyMessage
? Radius.circular(
(timeDiff >= 1 || !isNextUserSame) &&
!(hasReplies || isThreadMessage || hasFileAttachment)
? 0
: attachmentBorderRadius,
)
: Radius.circular(attachmentBorderRadius),
), ),
attachmentPadding: EdgeInsets.all(hasFileAttachment ? 4 : 2), attachmentPadding: EdgeInsets.all(hasFileAttachment ? 4 : 2),
borderRadiusGeometry: BorderRadius.only( borderRadiusGeometry: BorderRadius.only(
topLeft: const Radius.circular(16), topLeft: const Radius.circular(16),
bottomLeft: Radius.circular( bottomLeft: isMyMessage
(timeDiff >= 1 || !isNextUserSame) && !(hasReplies || isThreadMessage) ? const Radius.circular(16)
? 0 : Radius.circular(
: 16, (timeDiff >= 1 || !isNextUserSame) &&
), !(hasReplies || isThreadMessage)
? 0
: 16,
),
topRight: const Radius.circular(16), topRight: const Radius.circular(16),
bottomRight: const Radius.circular(16), bottomRight: isMyMessage
? Radius.circular(
(timeDiff >= 1 || !isNextUserSame) &&
!(hasReplies || isThreadMessage)
? 0
: 16,
)
: const Radius.circular(16),
), ),
textPadding: EdgeInsets.symmetric( textPadding: EdgeInsets.symmetric(
vertical: 8, vertical: 8,
packages/stream_chat_flutter/lib/src/message_reactions_modal.dart
+9 -7
View File
@@ -112,12 +112,12 @@ class MessageReactionsModal extends StatelessWidget {
Align( Align(
alignment: Alignment( alignment: Alignment(
user!.id == message.user!.id user!.id == message.user!.id
? (divFactor > 1.0 ? (divFactor >= 1.0
? 0.0 ? -0.2
: (1.0 - divFactor)) : (1.2 - divFactor))
: (divFactor > 1.0 : (divFactor >= 1.0
? 0.0 ? 0.2
: -(1.0 - divFactor)), : -(1.2 - divFactor)),
0), 0),
child: ReactionPicker( child: ReactionPicker(
message: message, message: message,
@@ -144,7 +144,9 @@ class MessageReactionsModal extends StatelessWidget {
attachmentShape: attachmentShape, attachmentShape: attachmentShape,
padding: const EdgeInsets.all(0), padding: const EdgeInsets.all(0),
attachmentBorderRadiusGeometry: attachmentBorderRadiusGeometry:
attachmentBorderRadiusGeometry, attachmentBorderRadiusGeometry
?.mirrorBorderIfReversed(
reverse: !reverse),
attachmentPadding: EdgeInsets.all( attachmentPadding: EdgeInsets.all(
hasFileAttachment ? 4 : 2, hasFileAttachment ? 4 : 2,
), ),
packages/stream_chat_flutter/lib/src/message_widget.dart
+240 -252
View File
@@ -1,4 +1,3 @@
import 'dart:math';
import 'dart:ui'; import 'dart:ui';
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
@@ -131,8 +130,6 @@ class MessageWidget extends StatefulWidget {
), ),
border, border,
reverse, reverse,
attachmentBorderRadiusGeometry as BorderRadius? ??
BorderRadius.zero,
), ),
); );
} }
@@ -157,8 +154,6 @@ class MessageWidget extends StatefulWidget {
), ),
border, border,
reverse, reverse,
attachmentBorderRadiusGeometry as BorderRadius? ??
BorderRadius.zero,
); );
}, },
'video': (context, message, attachments) { 'video': (context, message, attachments) {
@@ -191,8 +186,6 @@ class MessageWidget extends StatefulWidget {
), ),
border, border,
reverse, reverse,
attachmentBorderRadiusGeometry as BorderRadius? ??
BorderRadius.zero,
); );
}, },
'giphy': (context, message, attachments) { 'giphy': (context, message, attachments) {
@@ -219,8 +212,6 @@ class MessageWidget extends StatefulWidget {
), ),
border, border,
reverse, reverse,
attachmentBorderRadiusGeometry as BorderRadius? ??
BorderRadius.zero,
); );
}, },
'file': (context, message, attachments) { 'file': (context, message, attachments) {
@@ -248,8 +239,6 @@ class MessageWidget extends StatefulWidget {
), ),
border, border,
reverse, reverse,
attachmentBorderRadiusGeometry as BorderRadius? ??
BorderRadius.zero,
); );
}) })
.insertBetween(SizedBox( .insertBetween(SizedBox(
@@ -472,184 +461,176 @@ class _MessageWidgetState extends State<MessageWidget>
: () => onLongPress(context), : () => onLongPress(context),
child: Padding( child: Padding(
padding: widget.padding ?? const EdgeInsets.all(8), padding: widget.padding ?? const EdgeInsets.all(8),
child: Transform( child: FractionallySizedBox(
alignment: Alignment.center, alignment:
transform: Matrix4.rotationY(widget.reverse ? pi : 0), widget.reverse ? Alignment.centerRight : Alignment.centerLeft,
child: FractionallySizedBox( widthFactor: 0.78,
alignment: Alignment.centerLeft, child: Column(
widthFactor: 0.78, crossAxisAlignment: widget.reverse
child: Column( ? CrossAxisAlignment.end
crossAxisAlignment: CrossAxisAlignment.start, : CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: <Widget>[ children: <Widget>[
Stack( Stack(
clipBehavior: Clip.none, clipBehavior: Clip.none,
alignment: AlignmentDirectional.bottomStart, alignment: widget.reverse
children: [ ? AlignmentDirectional.bottomEnd
Column( : AlignmentDirectional.bottomStart,
crossAxisAlignment: CrossAxisAlignment.start, children: [
mainAxisSize: MainAxisSize.min, Column(
children: [ crossAxisAlignment: widget.reverse
Row( ? CrossAxisAlignment.end
crossAxisAlignment: CrossAxisAlignment.end, : CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: <Widget>[ children: [
if (widget.showUserAvatar == Row(
DisplayWidget.show && crossAxisAlignment: CrossAxisAlignment.end,
widget.message.user != null) ...[ mainAxisSize: MainAxisSize.min,
_buildUserAvatar(), children: <Widget>[
const SizedBox(width: 4), if (widget.showUserAvatar == DisplayWidget.show &&
], widget.message.user != null) ...[
if (widget.showUserAvatar == DisplayWidget.hide) _buildUserAvatar(),
SizedBox(width: avatarWidth + 4), const SizedBox(width: 4),
Flexible( ],
child: PortalEntry( if (widget.showUserAvatar == DisplayWidget.hide)
portal: Container( SizedBox(width: avatarWidth + 4),
transform: Flexible(
Matrix4.translationValues(-12, 0, 0), child: PortalEntry(
constraints: const BoxConstraints( portal: Container(
maxWidth: 22 * 6.0), transform: Matrix4.translationValues(
child: _buildReactionIndicator(context), widget.reverse ? 12 : -12, 0, 0),
), constraints: const BoxConstraints(
portalAnchor: const Alignment(-1, -1), maxWidth: 22 * 6.0),
childAnchor: const Alignment(1, -1), child: _buildReactionIndicator(context),
child: Stack( ),
clipBehavior: Clip.none, portalAnchor:
children: [ Alignment(widget.reverse ? 1 : -1, -1),
Padding( childAnchor:
padding: widget.showReactions Alignment(widget.reverse ? -1 : 1, -1),
? EdgeInsets.only( child: Stack(
top: widget clipBehavior: Clip.none,
.message children: [
.reactionCounts Padding(
?.isNotEmpty == padding: widget.showReactions
true ? EdgeInsets.only(
? 18 top: widget
: 0, .message
) .reactionCounts
: EdgeInsets.zero, ?.isNotEmpty ==
child: (widget.message.isDeleted && true
!isFailedState) ? 18
? Transform( : 0,
alignment: Alignment.center, )
transform: Matrix4.rotationY( : EdgeInsets.zero,
widget.reverse ? pi : 0), child: (widget.message.isDeleted &&
child: Container( !isFailedState)
// ignore: lines_longer_than_80_chars ? Container(
margin: EdgeInsets.symmetric( // ignore: lines_longer_than_80_chars
horizontal: margin: EdgeInsets.symmetric(
// ignore: lines_longer_than_80_chars horizontal:
widget.showUserAvatar ==
// ignore: lines_longer_than_80_chars
DisplayWidget.gone
? 0
: 4.0),
child: DeletedMessage(
reverse: widget.reverse,
// ignore: lines_longer_than_80_chars
borderRadiusGeometry: widget
.borderRadiusGeometry,
borderSide:
widget.borderSide,
shape: widget.shape,
messageTheme:
widget.messageTheme,
),
),
)
: Card(
clipBehavior: Clip.antiAlias,
elevation: 0,
margin: EdgeInsets.symmetric(
horizontal: (isFailedState
? 15.0
: 0.0) +
// ignore: lines_longer_than_80_chars // ignore: lines_longer_than_80_chars
(widget.showUserAvatar == widget.showUserAvatar ==
// ignore: lines_longer_than_80_chars
DisplayWidget DisplayWidget
.gone .gone
? 0 ? 0
: 4.0), : 4.0),
), child: DeletedMessage(
shape: widget.shape ?? borderRadiusGeometry: widget
RoundedRectangleBorder( .borderRadiusGeometry,
side: widget borderSide: widget.borderSide,
.borderSide ?? shape: widget.shape,
BorderSide( messageTheme:
color: widget widget.messageTheme,
// 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) : Card(
Positioned( clipBehavior: Clip.antiAlias,
right: 4, elevation: 0,
top: -8, margin: EdgeInsets.symmetric(
child: Transform( horizontal: (isFailedState
transform: Matrix4.rotationY( ? 15.0
widget.reverse ? pi : 0), : 0.0) +
child: CustomPaint( // ignore: lines_longer_than_80_chars
painter: ReactionBubblePainter( (widget.showUserAvatar ==
StreamChatTheme.of(context) DisplayWidget.gone
.colorTheme ? 0
.white, : 4.0),
Colors.transparent, ),
Colors.transparent, shape: widget.shape ??
tailCirclesSpace: 1, 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.of(context)
.colorTheme
.white,
Colors.transparent,
Colors.transparent,
tailCirclesSpace: 1,
), ),
), ),
], ),
), ],
), ),
), ),
], ),
), ],
if (showBottomRow) ),
SizedBox(height: context.textScaleFactor * 18.0), if (showBottomRow)
], SizedBox(height: context.textScaleFactor * 18.0),
],
),
if (showBottomRow)
Padding(
padding: EdgeInsets.only(left: leftPadding),
child: _bottomRow,
), ),
if (showBottomRow) if (isFailedState)
Padding( Positioned(
padding: EdgeInsets.only(left: leftPadding), left: widget.reverse ? 0 : null,
child: _bottomRow, right: widget.reverse ? null : 0,
), bottom: showBottomRow ? 18 : -2,
if (isFailedState) child: StreamSvgIcon.error(size: 20),
Positioned( ),
left: widget.reverse ? 0 : null, ],
right: widget.reverse ? null : 0, ),
bottom: showBottomRow ? 18 : -2, ],
child: StreamSvgIcon.error(size: 20),
),
],
),
],
),
), ),
), ),
), ),
@@ -681,24 +662,20 @@ class _MessageWidgetState extends State<MessageWidget>
Widget get _bottomRow { Widget get _bottomRow {
if (isDeleted) { if (isDeleted) {
final chatThemeData = StreamChatTheme.of(context); final chatThemeData = StreamChatTheme.of(context);
return Transform( return Row(
transform: Matrix4.rotationY(widget.reverse ? pi : 0), mainAxisSize: MainAxisSize.min,
alignment: Alignment.center, children: [
child: Row( StreamSvgIcon.eye(
mainAxisSize: MainAxisSize.min, color: chatThemeData.colorTheme.grey,
children: [ size: 16,
StreamSvgIcon.eye( ),
color: chatThemeData.colorTheme.grey, const SizedBox(width: 8),
size: 16, Text(
), 'Only visible to you',
const SizedBox(width: 8), style: chatThemeData.textTheme.footnote
Text( .copyWith(color: chatThemeData.colorTheme.grey),
'Only visible to you', ),
style: chatThemeData.textTheme.footnote ],
.copyWith(color: chatThemeData.colorTheme.grey),
),
],
),
); );
} }
@@ -765,8 +742,10 @@ class _MessageWidgetState extends State<MessageWidget>
return Row( return Row(
crossAxisAlignment: CrossAxisAlignment.end, crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment:
widget.reverse ? MainAxisAlignment.end : MainAxisAlignment.start,
children: [ children: [
if (showThreadTail) if (showThreadTail && !widget.reverse)
Container( Container(
margin: EdgeInsets.only( margin: EdgeInsets.only(
bottom: context.textScaleFactor * bottom: context.textScaleFactor *
@@ -777,18 +756,15 @@ class _MessageWidgetState extends State<MessageWidget>
painter: _ThreadReplyPainter( painter: _ThreadReplyPainter(
context: context, context: context,
color: widget.messageTheme.messageBorderColor, color: widget.messageTheme.messageBorderColor,
reverse: widget.reverse,
), ),
), ),
), ),
...children.map( ...children.map(
(child) { (child) {
Widget mappedChild = Transform( Widget mappedChild = SizedBox(
transform: Matrix4.rotationY(widget.reverse ? pi : 0), height: context.textScaleFactor * 14,
alignment: Alignment.center, child: child,
child: SizedBox(
height: context.textScaleFactor * 14,
child: child,
),
); );
if (child.key == usernameKey) { if (child.key == usernameKey) {
mappedChild = Flexible(child: mappedChild); mappedChild = Flexible(child: mappedChild);
@@ -796,6 +772,21 @@ class _MessageWidgetState extends State<MessageWidget>
return mappedChild; return mappedChild;
}, },
), ),
if (showThreadTail && widget.reverse)
Container(
margin: EdgeInsets.only(
bottom: context.textScaleFactor *
((widget.messageTheme.replies?.fontSize ?? 1) / 2),
),
child: CustomPaint(
size: const Size(16, 32) * context.textScaleFactor,
painter: _ThreadReplyPainter(
context: context,
color: widget.messageTheme.messageBorderColor,
reverse: widget.reverse,
),
),
),
].insertBetween(const SizedBox(width: 8)), ].insertBetween(const SizedBox(width: 8)),
); );
} }
@@ -1078,56 +1069,47 @@ class _MessageWidgetState extends State<MessageWidget>
return child; return child;
} }
Widget _buildUserAvatar() => Transform( Widget _buildUserAvatar() => Transform.translate(
transform: Matrix4.rotationY(widget.reverse ? pi : 0), offset: Offset(
alignment: Alignment.center, 0,
child: Transform.translate( widget.translateUserAvatar
offset: Offset( ? (widget.messageTheme.avatarTheme?.constraints.maxHeight ?? 40) /
0, 2
widget.translateUserAvatar : 0,
? (widget.messageTheme.avatarTheme?.constraints.maxHeight ?? ),
40) / child: UserAvatar(
2 user: widget.message.user!,
: 0, onTap: widget.onUserAvatarTap,
), constraints: widget.messageTheme.avatarTheme!.constraints,
child: UserAvatar( borderRadius: widget.messageTheme.avatarTheme!.borderRadius,
user: widget.message.user!, showOnlineStatus: false,
onTap: widget.onUserAvatarTap,
constraints: widget.messageTheme.avatarTheme!.constraints,
borderRadius: widget.messageTheme.avatarTheme!.borderRadius,
showOnlineStatus: false,
),
), ),
); );
Widget _buildTextBubble() { Widget _buildTextBubble() {
if (widget.message.text!.trim().isEmpty) return const Offstage(); if (widget.message.text!.trim().isEmpty) return const Offstage();
return Transform( return Column(
transform: Matrix4.rotationY(widget.reverse ? pi : 0), crossAxisAlignment: CrossAxisAlignment.start,
alignment: Alignment.center, children: [
child: Column( Padding(
crossAxisAlignment: CrossAxisAlignment.start, padding: isOnlyEmoji ? EdgeInsets.zero : widget.textPadding,
children: [ child: widget.textBuilder != null
Padding( ? widget.textBuilder!(context, widget.message)
padding: isOnlyEmoji ? EdgeInsets.zero : widget.textPadding, : MessageText(
child: widget.textBuilder != null onLinkTap: widget.onLinkTap,
? widget.textBuilder!(context, widget.message) message: widget.message,
: MessageText( onMentionTap: widget.onMentionTap,
onLinkTap: widget.onLinkTap, messageTheme: isOnlyEmoji
message: widget.message, ? widget.messageTheme.copyWith(
onMentionTap: widget.onMentionTap, messageText:
messageTheme: isOnlyEmoji widget.messageTheme.messageText!.copyWith(
? widget.messageTheme.copyWith( fontSize: 42,
messageText: ))
widget.messageTheme.messageText!.copyWith( : widget.messageTheme,
fontSize: 42, ),
)) ),
: widget.messageTheme, if (hasUrlAttachments && !hasQuotedMessage) _buildUrlAttachment(),
), ],
),
if (hasUrlAttachments && !hasQuotedMessage) _buildUrlAttachment(),
],
),
); );
} }
@@ -1172,10 +1154,15 @@ class _MessageWidgetState extends State<MessageWidget>
} }
class _ThreadReplyPainter extends CustomPainter { class _ThreadReplyPainter extends CustomPainter {
const _ThreadReplyPainter({this.context, required this.color}); const _ThreadReplyPainter({
this.context,
required this.color,
this.reverse = false,
});
final Color? color; final Color? color;
final BuildContext? context; final BuildContext? context;
final bool reverse;
@override @override
void paint(Canvas canvas, Size size) { void paint(Canvas canvas, Size size) {
@@ -1186,12 +1173,13 @@ class _ThreadReplyPainter extends CustomPainter {
..strokeCap = StrokeCap.round; ..strokeCap = StrokeCap.round;
final path = Path() final path = Path()
..moveTo(0, 0) ..moveTo(reverse ? size.width : 0, 0)
..quadraticBezierTo(0, size.height * 0.38, 0, size.height * 0.50) ..quadraticBezierTo(reverse ? size.width : 0, size.height * 0.38,
reverse ? size.width : 0, size.height * 0.50)
..quadraticBezierTo( ..quadraticBezierTo(
0, reverse ? size.width : 0,
size.height, size.height,
size.width, reverse ? 0 : size.width,
size.height, size.height,
); );
canvas.drawPath(path, paint); canvas.drawPath(path, paint);
packages/stream_chat_flutter/lib/src/quoted_message_widget.dart
+22 -36
View File
@@ -1,5 +1,3 @@
import 'dart:math';
import 'package:cached_network_image/cached_network_image.dart'; import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart'; import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
@@ -133,21 +131,17 @@ class QuotedMessageWidget extends StatelessWidget {
if (_hasAttachments) _parseAttachments(context), if (_hasAttachments) _parseAttachments(context),
if (msg.text!.isNotEmpty) if (msg.text!.isNotEmpty)
Flexible( Flexible(
child: Transform( child: MessageText(
transform: Matrix4.rotationY(reverse ? pi : 0), message: msg,
alignment: Alignment.center, messageTheme: isOnlyEmoji && _containsText
child: MessageText( ? messageTheme.copyWith(
message: msg, messageText: messageTheme.messageText?.copyWith(
messageTheme: isOnlyEmoji && _containsText fontSize: 32,
? messageTheme.copyWith( ))
messageText: messageTheme.messageText?.copyWith( : messageTheme.copyWith(
fontSize: 32, messageText: messageTheme.messageText?.copyWith(
)) fontSize: 12,
: messageTheme.copyWith( )),
messageText: messageTheme.messageText?.copyWith(
fontSize: 12,
)),
),
), ),
), ),
].insertBetween(const SizedBox(width: 8)); ].insertBetween(const SizedBox(width: 8));
@@ -218,15 +212,11 @@ class QuotedMessageWidget extends StatelessWidget {
} }
} }
child = AbsorbPointer(child: child); child = AbsorbPointer(child: child);
return Transform( return Material(
transform: Matrix4.rotationY(reverse ? pi : 0), clipBehavior: Clip.antiAlias,
alignment: Alignment.center, type: MaterialType.transparency,
child: Material( shape: attachment.type == 'file' ? null : _getDefaultShape(context),
clipBehavior: Clip.antiAlias, child: child,
type: MaterialType.transparency,
shape: attachment.type == 'file' ? null : _getDefaultShape(context),
child: child,
),
); );
} }
@@ -235,17 +225,13 @@ class QuotedMessageWidget extends StatelessWidget {
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
); );
Widget _buildUserAvatar() => Transform( Widget _buildUserAvatar() => UserAvatar(
transform: Matrix4.rotationY(reverse ? pi : 0), user: message.user!,
alignment: Alignment.center, constraints: const BoxConstraints.tightFor(
child: UserAvatar( height: 24,
user: message.user!, width: 24,
constraints: const BoxConstraints.tightFor(
height: 24,
width: 24,
),
showOnlineStatus: false,
), ),
showOnlineStatus: false,
); );
Map<String, QuotedMessageAttachmentThumbnailBuilder> Map<String, QuotedMessageAttachmentThumbnailBuilder>
packages/stream_chat_flutter/lib/src/reaction_bubble.dart
+95 -74
View File
@@ -51,69 +51,66 @@ class ReactionBubble extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
final reactionIcons = StreamChatTheme.of(context).reactionIcons; final reactionIcons = StreamChatTheme.of(context).reactionIcons;
final totalReactions = reactions.length; final totalReactions = reactions.length;
final offset = totalReactions > 1 ? 16.0 : 2.0; final offset =
return Transform( totalReactions > 1 ? 16.0.mirrorConditionally(flipTail) : 2.0;
transform: Matrix4.rotationY(reverse ? pi : 0), return Stack(
alignment: Alignment.center, alignment: Alignment.center,
child: Stack( children: [
alignment: Alignment.center, Transform.translate(
children: [ offset: Offset(-offset, 0),
Transform.translate( child: Container(
offset: Offset(reverse ? offset : -offset, 0), padding: const EdgeInsets.all(2),
decoration: BoxDecoration(
color: maskColor,
borderRadius: const BorderRadius.all(Radius.circular(16)),
),
child: Container( child: Container(
padding: const EdgeInsets.all(2), padding: EdgeInsets.symmetric(
decoration: BoxDecoration( vertical: 4,
color: maskColor, horizontal: totalReactions > 1 ? 4.0 : 0,
borderRadius: const BorderRadius.all(Radius.circular(16)),
), ),
child: Container( decoration: BoxDecoration(
padding: EdgeInsets.symmetric( border: Border.all(
vertical: 4, color: borderColor,
horizontal: totalReactions > 1 ? 4 : 0,
), ),
decoration: BoxDecoration( color: backgroundColor,
border: Border.all( borderRadius: const BorderRadius.all(Radius.circular(14)),
color: borderColor, ),
), child: LayoutBuilder(
color: backgroundColor, builder: (context, constraints) => Flex(
borderRadius: const BorderRadius.all(Radius.circular(14)), direction: Axis.horizontal,
), mainAxisSize: MainAxisSize.min,
child: LayoutBuilder( children: [
builder: (context, constraints) => Flex( if (constraints.maxWidth < double.infinity)
direction: Axis.horizontal, ...reactions
mainAxisSize: MainAxisSize.min, .take((constraints.maxWidth) ~/ 24)
children: [ .map((reaction) => _buildReaction(
if (constraints.maxWidth < double.infinity) reactionIcons,
...reactions reaction,
.take((constraints.maxWidth) ~/ 24) context,
.map((reaction) => _buildReaction( ))
reactionIcons, .toList(),
reaction, if (constraints.maxWidth == double.infinity)
context, ...reactions
)) .map((reaction) => _buildReaction(
.toList(), reactionIcons,
if (constraints.maxWidth == double.infinity) reaction,
...reactions context,
.map((reaction) => _buildReaction( ))
reactionIcons, .toList(),
reaction, ],
context,
))
.toList(),
],
),
), ),
), ),
), ),
), ),
Positioned( ),
bottom: 2, Positioned(
left: reverse ? null : 13, bottom: 2,
right: !reverse ? null : 13, left: reverse ? null : 13,
child: _buildReactionsTail(context), right: reverse ? 13 : null,
), child: _buildReactionsTail(context),
], ),
), ],
); );
} }
@@ -158,13 +155,11 @@ class ReactionBubble extends StatelessWidget {
borderColor, borderColor,
maskColor, maskColor,
tailCirclesSpace: tailCirclesSpacing, tailCirclesSpace: tailCirclesSpacing,
flipTail: !flipTail,
numberOfReactions: reactions.length,
), ),
); );
return Transform( return tail;
transform: Matrix4.rotationY(flipTail ? 0 : pi),
alignment: Alignment.center,
child: tail,
);
} }
} }
@@ -176,6 +171,8 @@ class ReactionBubblePainter extends CustomPainter {
this.borderColor, this.borderColor,
this.maskColor, { this.maskColor, {
this.tailCirclesSpace = 0, this.tailCirclesSpace = 0,
this.flipTail = false,
this.numberOfReactions = 0,
}); });
/// Color of bubble /// Color of bubble
@@ -190,6 +187,12 @@ class ReactionBubblePainter extends CustomPainter {
/// Tail circle space /// Tail circle space
final double tailCirclesSpace; final double tailCirclesSpace;
/// Flip tail
final bool flipTail;
/// Number of reactions on the page
final int numberOfReactions;
@override @override
void paint(Canvas canvas, Size size) { void paint(Canvas canvas, Size size) {
_drawOvalMask(size, canvas); _drawOvalMask(size, canvas);
@@ -213,8 +216,9 @@ class ReactionBubblePainter extends CustomPainter {
final path = Path() final path = Path()
..addOval( ..addOval(
Rect.fromCircle( Rect.fromCircle(
center: center: const Offset(4, 3).mirrorConditionally(flipTail) +
const Offset(4, 3) + Offset(tailCirclesSpace, tailCirclesSpace), Offset(tailCirclesSpace, tailCirclesSpace)
.mirrorConditionally(flipTail),
radius: 4, radius: 4,
), ),
); );
@@ -230,8 +234,9 @@ class ReactionBubblePainter extends CustomPainter {
final path = Path() final path = Path()
..addOval( ..addOval(
Rect.fromCircle( Rect.fromCircle(
center: center: const Offset(4, 3).mirrorConditionally(flipTail) +
const Offset(4, 3) + Offset(tailCirclesSpace, tailCirclesSpace), Offset(tailCirclesSpace, tailCirclesSpace)
.mirrorConditionally(flipTail),
radius: 2, radius: 2,
), ),
); );
@@ -245,7 +250,9 @@ class ReactionBubblePainter extends CustomPainter {
final path = Path() final path = Path()
..addOval(Rect.fromCircle( ..addOval(Rect.fromCircle(
center: const Offset(4, 3) + Offset(tailCirclesSpace, tailCirclesSpace), center: const Offset(4, 3).mirrorConditionally(flipTail) +
Offset(tailCirclesSpace, tailCirclesSpace)
.mirrorConditionally(flipTail),
radius: 2, radius: 2,
)); ));
canvas.drawPath(path, paint); canvas.drawPath(path, paint);
@@ -258,12 +265,12 @@ class ReactionBubblePainter extends CustomPainter {
..style = PaintingStyle.stroke; ..style = PaintingStyle.stroke;
const dy = -2.2; const dy = -2.2;
const startAngle = 1.1; final startAngle = flipTail ? -0.1 : 1.1;
const sweepAngle = 1.2; final sweepAngle = flipTail ? -1.2 : (numberOfReactions > 1 ? 1.2 : 0.9);
final path = Path() final path = Path()
..addArc( ..addArc(
Rect.fromCircle( Rect.fromCircle(
center: const Offset(1, dy), center: const Offset(1, dy).mirrorConditionally(flipTail),
radius: 4, radius: 4,
), ),
-pi * startAngle, -pi * startAngle,
@@ -278,12 +285,12 @@ class ReactionBubblePainter extends CustomPainter {
..strokeWidth = 1; ..strokeWidth = 1;
const dy = -2.2; const dy = -2.2;
const startAngle = 1; final startAngle = flipTail ? -0.0 : 1.0;
const sweepAngle = 1.3; final sweepAngle = flipTail ? -1.3 : 1.3;
final path = Path() final path = Path()
..addArc( ..addArc(
Rect.fromCircle( Rect.fromCircle(
center: const Offset(1, dy), center: const Offset(1, dy).mirrorConditionally(flipTail),
radius: 4, radius: 4,
), ),
-pi * startAngle, -pi * startAngle,
@@ -299,12 +306,12 @@ class ReactionBubblePainter extends CustomPainter {
..style = PaintingStyle.fill; ..style = PaintingStyle.fill;
const dy = -2.2; const dy = -2.2;
const startAngle = 1.1; final startAngle = flipTail ? -0.1 : 1.1;
const sweepAngle = 1.2; final sweepAngle = flipTail ? -1.2 : 1.2;
final path = Path() final path = Path()
..addArc( ..addArc(
Rect.fromCircle( Rect.fromCircle(
center: const Offset(1, dy), center: const Offset(1, dy).mirrorConditionally(flipTail),
radius: 6, radius: 6,
), ),
-pi * startAngle, -pi * startAngle,
@@ -316,3 +323,17 @@ class ReactionBubblePainter extends CustomPainter {
@override @override
bool shouldRepaint(CustomPainter oldDelegate) => true; bool shouldRepaint(CustomPainter oldDelegate) => true;
} }
/// Extension on [Offset]
extension YTransformer on Offset {
/// Flips x coordinate when flip is true
// ignore: avoid_positional_boolean_parameters
Offset mirrorConditionally(bool flip) => Offset(flip ? -dx : dx, dy);
}
/// Extension on [Offset]
extension IntTransformer on double {
/// Flips x coordinate when flip is true
// ignore: avoid_positional_boolean_parameters
double mirrorConditionally(bool flip) => flip ? -this : this;
}
packages/stream_chat_flutter/lib/src/utils.dart
+5 -15
View File
@@ -1,5 +1,3 @@
import 'dart:math';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart'; import 'package:stream_chat_flutter/stream_chat_flutter.dart';
import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart'; import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
@@ -332,18 +330,10 @@ Widget wrapAttachmentWidget(
ShapeBorder attachmentShape, ShapeBorder attachmentShape,
// ignore: avoid_positional_boolean_parameters // ignore: avoid_positional_boolean_parameters
bool reverse, bool reverse,
BorderRadius borderRadius,
) => ) =>
ClipRRect( Material(
borderRadius: borderRadius, clipBehavior: Clip.antiAlias,
child: Material( shape: attachmentShape,
clipBehavior: Clip.antiAlias, type: MaterialType.transparency,
shape: attachmentShape, child: attachmentWidget,
type: MaterialType.transparency,
child: Transform(
transform: Matrix4.rotationY(reverse ? pi : 0),
alignment: Alignment.center,
child: attachmentWidget,
),
),
); );
packages/stream_chat_flutter/test/src/goldens/reaction_bubble_2.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB