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
+1 -11
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,10 +31,7 @@ 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),
alignment: Alignment.center,
child: Material(
color: messageTheme.messageBackgroundColor, color: messageTheme.messageBackgroundColor,
shape: shape ?? shape: shape ??
RoundedRectangleBorder( RoundedRectangleBorder(
@@ -53,9 +48,6 @@ class DeletedMessage extends StatelessWidget {
vertical: 8, vertical: 8,
horizontal: 16, horizontal: 16,
), ),
child: Transform(
transform: Matrix4.rotationY(reverse ? pi : 0),
alignment: Alignment.center,
child: Text( child: Text(
'Message deleted', 'Message deleted',
style: messageTheme.messageText?.copyWith( style: messageTheme.messageText?.copyWith(
@@ -64,8 +56,6 @@ class DeletedMessage extends StatelessWidget {
), ),
), ),
), ),
),
),
); );
} }
} }
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
+24 -5
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
? Radius.circular(attachmentBorderRadius)
: Radius.circular(
(timeDiff >= 1 || !isNextUserSame) && (timeDiff >= 1 || !isNextUserSame) &&
!(hasReplies || isThreadMessage || hasFileAttachment) !(hasReplies || isThreadMessage || hasFileAttachment)
? 0 ? 0
: attachmentBorderRadius, : 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)
: Radius.circular(
(timeDiff >= 1 || !isNextUserSame) &&
!(hasReplies || isThreadMessage)
? 0 ? 0
: 16, : 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
+61 -73
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,30 +461,33 @@ 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(
alignment: Alignment.center,
transform: Matrix4.rotationY(widget.reverse ? pi : 0),
child: FractionallySizedBox( child: FractionallySizedBox(
alignment: Alignment.centerLeft, alignment:
widget.reverse ? Alignment.centerRight : Alignment.centerLeft,
widthFactor: 0.78, widthFactor: 0.78,
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: widget.reverse
? CrossAxisAlignment.end
: 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
? AlignmentDirectional.bottomEnd
: AlignmentDirectional.bottomStart,
children: [ children: [
Column( Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: widget.reverse
? CrossAxisAlignment.end
: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
Row( Row(
crossAxisAlignment: CrossAxisAlignment.end, crossAxisAlignment: CrossAxisAlignment.end,
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: <Widget>[ children: <Widget>[
if (widget.showUserAvatar == if (widget.showUserAvatar == DisplayWidget.show &&
DisplayWidget.show &&
widget.message.user != null) ...[ widget.message.user != null) ...[
_buildUserAvatar(), _buildUserAvatar(),
const SizedBox(width: 4), const SizedBox(width: 4),
@@ -505,14 +497,16 @@ class _MessageWidgetState extends State<MessageWidget>
Flexible( Flexible(
child: PortalEntry( child: PortalEntry(
portal: Container( portal: Container(
transform: transform: Matrix4.translationValues(
Matrix4.translationValues(-12, 0, 0), widget.reverse ? 12 : -12, 0, 0),
constraints: const BoxConstraints( constraints: const BoxConstraints(
maxWidth: 22 * 6.0), maxWidth: 22 * 6.0),
child: _buildReactionIndicator(context), child: _buildReactionIndicator(context),
), ),
portalAnchor: const Alignment(-1, -1), portalAnchor:
childAnchor: const Alignment(1, -1), Alignment(widget.reverse ? 1 : -1, -1),
childAnchor:
Alignment(widget.reverse ? -1 : 1, -1),
child: Stack( child: Stack(
clipBehavior: Clip.none, clipBehavior: Clip.none,
children: [ children: [
@@ -530,32 +524,25 @@ class _MessageWidgetState extends State<MessageWidget>
: EdgeInsets.zero, : EdgeInsets.zero,
child: (widget.message.isDeleted && child: (widget.message.isDeleted &&
!isFailedState) !isFailedState)
? Transform( ? Container(
alignment: Alignment.center,
transform: Matrix4.rotationY(
widget.reverse ? pi : 0),
child: Container(
// ignore: lines_longer_than_80_chars // ignore: lines_longer_than_80_chars
margin: EdgeInsets.symmetric( margin: 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.gone DisplayWidget
.gone
? 0 ? 0
: 4.0), : 4.0),
child: DeletedMessage( child: DeletedMessage(
reverse: widget.reverse,
// ignore: lines_longer_than_80_chars
borderRadiusGeometry: widget borderRadiusGeometry: widget
.borderRadiusGeometry, .borderRadiusGeometry,
borderSide: borderSide: widget.borderSide,
widget.borderSide,
shape: widget.shape, shape: widget.shape,
messageTheme: messageTheme:
widget.messageTheme, widget.messageTheme,
), ),
),
) )
: Card( : Card(
clipBehavior: Clip.antiAlias, clipBehavior: Clip.antiAlias,
@@ -566,15 +553,13 @@ class _MessageWidgetState extends State<MessageWidget>
: 0.0) + : 0.0) +
// ignore: lines_longer_than_80_chars // ignore: lines_longer_than_80_chars
(widget.showUserAvatar == (widget.showUserAvatar ==
DisplayWidget DisplayWidget.gone
.gone
? 0 ? 0
: 4.0), : 4.0),
), ),
shape: widget.shape ?? shape: widget.shape ??
RoundedRectangleBorder( RoundedRectangleBorder(
side: widget side: widget.borderSide ??
.borderSide ??
BorderSide( BorderSide(
color: widget color: widget
// ignore: lines_longer_than_80_chars // ignore: lines_longer_than_80_chars
@@ -607,11 +592,9 @@ class _MessageWidgetState extends State<MessageWidget>
), ),
if (widget.showReactionPickerIndicator) if (widget.showReactionPickerIndicator)
Positioned( Positioned(
right: 4, right: widget.reverse ? null : 4,
left: widget.reverse ? 4 : null,
top: -8, top: -8,
child: Transform(
transform: Matrix4.rotationY(
widget.reverse ? pi : 0),
child: CustomPaint( child: CustomPaint(
painter: ReactionBubblePainter( painter: ReactionBubblePainter(
StreamChatTheme.of(context) StreamChatTheme.of(context)
@@ -623,7 +606,6 @@ class _MessageWidgetState extends State<MessageWidget>
), ),
), ),
), ),
),
], ],
), ),
), ),
@@ -654,7 +636,6 @@ class _MessageWidgetState extends State<MessageWidget>
), ),
), ),
), ),
),
); );
} }
@@ -681,10 +662,7 @@ 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),
alignment: Alignment.center,
child: Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
StreamSvgIcon.eye( StreamSvgIcon.eye(
@@ -698,7 +676,6 @@ class _MessageWidgetState extends State<MessageWidget>
.copyWith(color: chatThemeData.colorTheme.grey), .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),
alignment: Alignment.center,
child: SizedBox(
height: context.textScaleFactor * 14, height: context.textScaleFactor * 14,
child: child, 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,15 +1069,11 @@ class _MessageWidgetState extends State<MessageWidget>
return child; return child;
} }
Widget _buildUserAvatar() => Transform( Widget _buildUserAvatar() => Transform.translate(
transform: Matrix4.rotationY(widget.reverse ? pi : 0),
alignment: Alignment.center,
child: Transform.translate(
offset: Offset( offset: Offset(
0, 0,
widget.translateUserAvatar widget.translateUserAvatar
? (widget.messageTheme.avatarTheme?.constraints.maxHeight ?? ? (widget.messageTheme.avatarTheme?.constraints.maxHeight ?? 40) /
40) /
2 2
: 0, : 0,
), ),
@@ -1097,15 +1084,11 @@ class _MessageWidgetState extends State<MessageWidget>
borderRadius: widget.messageTheme.avatarTheme!.borderRadius, borderRadius: widget.messageTheme.avatarTheme!.borderRadius,
showOnlineStatus: false, 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),
alignment: Alignment.center,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Padding( Padding(
@@ -1127,7 +1110,6 @@ class _MessageWidgetState extends State<MessageWidget>
), ),
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
+2 -16
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,9 +131,6 @@ class QuotedMessageWidget extends StatelessWidget {
if (_hasAttachments) _parseAttachments(context), if (_hasAttachments) _parseAttachments(context),
if (msg.text!.isNotEmpty) if (msg.text!.isNotEmpty)
Flexible( Flexible(
child: Transform(
transform: Matrix4.rotationY(reverse ? pi : 0),
alignment: Alignment.center,
child: MessageText( child: MessageText(
message: msg, message: msg,
messageTheme: isOnlyEmoji && _containsText messageTheme: isOnlyEmoji && _containsText
@@ -149,7 +144,6 @@ class QuotedMessageWidget extends StatelessWidget {
)), )),
), ),
), ),
),
].insertBetween(const SizedBox(width: 8)); ].insertBetween(const SizedBox(width: 8));
return Container( return Container(
@@ -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),
alignment: Alignment.center,
child: Material(
clipBehavior: Clip.antiAlias, clipBehavior: Clip.antiAlias,
type: MaterialType.transparency, type: MaterialType.transparency,
shape: attachment.type == 'file' ? null : _getDefaultShape(context), shape: attachment.type == 'file' ? null : _getDefaultShape(context),
child: child, 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),
alignment: Alignment.center,
child: UserAvatar(
user: message.user!, user: message.user!,
constraints: const BoxConstraints.tightFor( constraints: const BoxConstraints.tightFor(
height: 24, height: 24,
width: 24, width: 24,
), ),
showOnlineStatus: false, showOnlineStatus: false,
),
); );
Map<String, QuotedMessageAttachmentThumbnailBuilder> Map<String, QuotedMessageAttachmentThumbnailBuilder>
packages/stream_chat_flutter/lib/src/reaction_bubble.dart
+49 -28
View File
@@ -51,15 +51,13 @@ 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,
child: Stack(
alignment: Alignment.center, alignment: Alignment.center,
children: [ children: [
Transform.translate( Transform.translate(
offset: Offset(reverse ? offset : -offset, 0), offset: Offset(-offset, 0),
child: Container( child: Container(
padding: const EdgeInsets.all(2), padding: const EdgeInsets.all(2),
decoration: BoxDecoration( decoration: BoxDecoration(
@@ -69,7 +67,7 @@ class ReactionBubble extends StatelessWidget {
child: Container( child: Container(
padding: EdgeInsets.symmetric( padding: EdgeInsets.symmetric(
vertical: 4, vertical: 4,
horizontal: totalReactions > 1 ? 4 : 0, horizontal: totalReactions > 1 ? 4.0 : 0,
), ),
decoration: BoxDecoration( decoration: BoxDecoration(
border: Border.all( border: Border.all(
@@ -109,11 +107,10 @@ class ReactionBubble extends StatelessWidget {
Positioned( Positioned(
bottom: 2, bottom: 2,
left: reverse ? null : 13, left: reverse ? null : 13,
right: !reverse ? null : 13, right: reverse ? 13 : null,
child: _buildReactionsTail(context), 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
+1 -11
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,
child: Material(
clipBehavior: Clip.antiAlias, clipBehavior: Clip.antiAlias,
shape: attachmentShape, shape: attachmentShape,
type: MaterialType.transparency, type: MaterialType.transparency,
child: Transform(
transform: Matrix4.rotationY(reverse ? pi : 0),
alignment: Alignment.center,
child: attachmentWidget, 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