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

wip

Browse Source
This commit is contained in:
Salvatore Giordano
2020-10-27 09:58:15 +01:00
parent f4dcd69b1e
commit ba37258427
8 changed files with 171 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/src/message_actions_modal.dart
+8 -4
View File
@@ -79,10 +79,14 @@ class MessageActionsModal extends StatelessWidget {
child: MessageWidget(
key: Key('MessageWidget'),
reverse: reverse,
message: message.text.length > 200
? message.copyWith(
text: '${message.text.substring(0, 200)}...')
: message,
message: message.copyWith(
text: message.text.length > 200
? '${message.text.substring(0, 200)}...'
: message.text,
attachments: message.attachments.length > 1
? [message.attachments[0]]
: message.attachments,
),
messageTheme: messageTheme,
showReactions: false,
showUsername: false,
lib/src/message_list_view.dart
+1 -1
View File
@@ -543,7 +543,7 @@ class _MessageListViewState extends State<MessageListView> {
topRight: Radius.circular(16),
bottomRight: Radius.circular(16),
),
showUserAvatar: isMyMessage
showUserAvatar: !isMyMessage
? DisplayWidget.gone
: (isNextUser ? DisplayWidget.hide : DisplayWidget.show),
messageTheme: isMyMessage
lib/src/message_reactions_modal.dart
+18 -13
View File
@@ -70,10 +70,14 @@ class MessageReactionsModal extends StatelessWidget {
child: MessageWidget(
key: Key('MessageWidget'),
reverse: reverse,
message: message.text.length > 200
? message.copyWith(
text: '${message.text.substring(0, 200)}...')
: message,
message: message.copyWith(
text: message.text.length > 200
? '${message.text.substring(0, 200)}...'
: message.text,
attachments: message.attachments.length > 1
? [message.attachments[0]]
: message.attachments,
),
messageTheme: messageTheme,
showReactions: false,
showUsername: false,
@@ -175,15 +179,16 @@ class MessageReactionsModal extends StatelessWidget {
borderRadius: BorderRadius.circular(32),
),
Positioned(
child: ReactionBubble(
reactions: [reaction],
borderColor: isCurrentUser
? messageTheme.ownReactionsBorderColor
: messageTheme.otherReactionsBorderColor,
backgroundColor: isCurrentUser
? messageTheme.ownReactionsBackgroundColor
: messageTheme.otherReactionsBackgroundColor,
flipTail: !isCurrentUser,
child: Align(
alignment: Alignment.centerLeft,
child: Container(
child: ReactionBubble(
reactions: [reaction],
borderColor: messageTheme.reactionsBorderColor,
backgroundColor: messageTheme.reactionsBackgroundColor,
flipTail: !isCurrentUser,
),
),
),
bottom: 0,
left: isCurrentUser ? 0 : null,
lib/src/message_widget.dart
+39 -77
View File
@@ -239,20 +239,23 @@ class _MessageWidgetState extends State<MessageWidget> {
8,
),
Flexible(
child: Padding(
padding: widget.showReactions
? EdgeInsets.only(
top: widget.message.reactionCounts
?.isNotEmpty ==
true
? 12
: 0,
)
: EdgeInsets.zero,
child: PortalEntry(
portalAnchor: Alignment(-0.81, 0),
childAnchor: Alignment.topRight,
portal: _buildReactionIndicator(context),
child: PortalEntry(
portal: ConstrainedBox(
child: _buildReactionIndicator(context),
constraints: BoxConstraints(maxWidth: 22 * 6.0),
),
portalAnchor: Alignment(-1.0, -1.0),
childAnchor: Alignment(1, -1.0),
child: Padding(
padding: widget.showReactions
? EdgeInsets.only(
top: widget.message.reactionCounts
?.isNotEmpty ==
true
? 18
: 0,
)
: EdgeInsets.zero,
child: (widget.message.isDeleted &&
widget.message.status !=
MessageSendingStatus.FAILED_DELETE)
@@ -378,74 +381,33 @@ class _MessageWidgetState extends State<MessageWidget> {
);
}
Widget _buildReactionIndicator(BuildContext context) {
final otherReactions = widget.message.latestReactions
?.where(
(element) => element.user.id != StreamChat.of(context).user.id)
?.toList() ??
[];
Widget _buildReactionIndicator(
BuildContext context,
) {
final ownId = StreamChat.of(context).user.id;
final reactionsMap = <String, Reaction>{};
widget.message.latestReactions.forEach((element) {
if (!reactionsMap.containsKey(element.type) || element.user.id == ownId) {
reactionsMap[element.type] = element;
}
});
var rowChildren = [
if (widget.message.ownReactions?.isNotEmpty == true) ...[
Transform.translate(
offset: Offset(
widget.reverse ? -6 : 0,
0,
),
child: ReactionBubble(
key: ValueKey('${widget.message.id}.own'),
reverse: widget.reverse,
backgroundColor: widget.messageTheme.ownReactionsBackgroundColor,
borderColor: widget.messageTheme.ownReactionsBorderColor,
reactions: widget.message.ownReactions,
),
),
if (otherReactions.isEmpty)
Container(
width: 18,
),
],
if (otherReactions?.isNotEmpty == true) ...[
if (widget.message.ownReactions?.isEmpty == true)
Container(
width: 18,
),
Transform.translate(
offset: Offset(
widget.reverse ? 0 : -6,
0,
),
child: ReactionBubble(
key: ValueKey('${widget.message.id}.other'),
reactions: otherReactions,
reverse: widget.reverse,
flipTail: true,
backgroundColor: widget.messageTheme.otherReactionsBackgroundColor,
borderColor: widget.messageTheme.otherReactionsBorderColor,
),
),
]
];
if (widget.reverse) {
rowChildren = rowChildren.reversed.toList();
}
return AnimatedSwitcher(
duration: Duration(milliseconds: 300),
child: (widget.showReactions &&
(widget.message.reactionCounts?.isNotEmpty == true ||
otherReactions.isNotEmpty) &&
(widget.message.reactionCounts?.isNotEmpty == true) &&
!widget.message.isDeleted)
? Container(
child: GestureDetector(
onTap: () => _showMessageReactionsModalBottomSheet(context),
child: FractionallySizedBox(
widthFactor: 0.5,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: rowChildren,
),
? GestureDetector(
onTap: () => _showMessageReactionsModalBottomSheet(context),
child: Transform.translate(
offset: Offset(-16, 0),
child: ReactionBubble(
key: ValueKey('${widget.message.id}.reactions'),
reverse: widget.reverse,
flipTail: widget.reverse,
backgroundColor: widget.messageTheme.reactionsBackgroundColor,
borderColor: widget.messageTheme.reactionsBorderColor,
reactions: reactionsMap.values.toList(),
),
),
)
lib/src/reaction_bubble.dart
+82 -50
View File
@@ -1,6 +1,8 @@
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:stream_chat_flutter/src/reaction_icon.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
class ReactionBubble extends StatelessWidget {
@@ -25,60 +27,92 @@ class ReactionBubble extends StatelessWidget {
return Transform(
transform: Matrix4.rotationY(reverse ? pi : 0),
alignment: Alignment.center,
child: Column(
crossAxisAlignment:
flipTail ? CrossAxisAlignment.start : CrossAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
child: Stack(
alignment: Alignment.center,
children: [
Container(
padding: const EdgeInsets.all(4),
decoration: BoxDecoration(
border: Border.all(
color: borderColor,
Transform.translate(
offset: Offset(reverse ? 5 : -5, 0),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 6),
decoration: BoxDecoration(
border: Border.all(
color: borderColor,
),
color: backgroundColor,
borderRadius: BorderRadius.all(Radius.circular(14)),
),
color: backgroundColor,
borderRadius: BorderRadius.all(Radius.circular(14)),
),
child: Wrap(
spacing: 8,
children: [
...reactions.map((reaction) {
final reactionIcon = reactionIcons.firstWhere(
(r) => r.type == reaction.type,
orElse: () => null,
child: LayoutBuilder(
builder: (context, constraints) {
return Flex(
direction: Axis.horizontal,
mainAxisSize: MainAxisSize.min,
children: [
if (constraints.maxWidth < double.infinity)
...reactions
.take((constraints.maxWidth) ~/ 22)
.map((reaction) {
return _buildReaction(
reactionIcons,
reaction,
context,
);
}).toList(),
if (constraints.maxWidth == double.infinity)
...reactions.map((reaction) {
return _buildReaction(
reactionIcons,
reaction,
context,
);
}).toList(),
],
);
if (reactionIcon == null) {
return Text(
'?',
style: TextStyle(
color: StreamChatTheme.of(context).accentColor,
),
);
}
return Icon(
reactionIcon.iconData,
size: 16,
color: StreamChatTheme.of(context).accentColor,
);
}).toList(),
],
},
),
),
),
_buildReactionsTail(context),
Positioned(
bottom: 0,
left: reverse ? null : 16,
right: !reverse ? null : 16,
child: _buildReactionsTail(context),
),
],
),
);
}
Widget _buildReaction(
List<ReactionIcon> reactionIcons,
Reaction reaction,
BuildContext context,
) {
final reactionIcon = reactionIcons.firstWhere(
(r) => r.type == reaction.type,
orElse: () => null,
);
return Padding(
padding: const EdgeInsets.symmetric(
horizontal: 4.0,
),
child: Icon(
reactionIcon?.iconData ?? Icons.help_outline_rounded,
size: 16,
color: reaction.user.id == StreamChat.of(context).user.id
? StreamChatTheme.of(context).accentColor
: Colors.black.withOpacity(.5),
),
);
}
Widget _buildReactionsTail(BuildContext context) {
final tail = Transform.translate(
offset: Offset(reactions.length > 1 ? -9 : -9, 0),
offset: Offset(-5, 0),
child: CustomPaint(
painter: ReactionBubblePainter(
backgroundColor,
borderColor,
reactions.length,
),
),
);
@@ -98,12 +132,10 @@ class ReactionBubble extends StatelessWidget {
class ReactionBubblePainter extends CustomPainter {
final Color color;
final Color borderColor;
final int reactionsCount;
ReactionBubblePainter(
this.color,
this.borderColor,
this.reactionsCount,
);
@override
@@ -126,7 +158,7 @@ class ReactionBubblePainter extends CustomPainter {
final path = Path();
path.addOval(
Rect.fromCircle(
center: Offset(6, 2),
center: Offset(4, 3),
radius: 2,
),
);
@@ -140,7 +172,7 @@ class ReactionBubblePainter extends CustomPainter {
final path = Path();
path.addOval(Rect.fromCircle(
center: Offset(6, 2),
center: Offset(4, 3),
radius: 2,
));
canvas.drawPath(path, paint);
@@ -152,13 +184,13 @@ class ReactionBubblePainter extends CustomPainter {
..strokeWidth = 1
..style = PaintingStyle.stroke;
final dy = reactionsCount > 1 ? -2.0 : -3.0;
final startAngle = reactionsCount > 1 ? 1.08 : 1.16;
final sweepAngle = reactionsCount > 1 ? 0.95 : 1.1;
final dy = -2.2;
final startAngle = 1.1;
final sweepAngle = 1.2;
final path = Path();
path.addArc(
Rect.fromCircle(
center: Offset(0, dy),
center: Offset(1, dy),
radius: 4,
),
-pi * startAngle,
@@ -172,13 +204,13 @@ class ReactionBubblePainter extends CustomPainter {
..color = color
..strokeWidth = 1;
final dy = reactionsCount > 1 ? -2.0 : -3.0;
final startAngle = reactionsCount > 1 ? 1 : 1.16;
final sweepAngle = reactionsCount > 1 ? 1.2 : 1;
final dy = -2.2;
final startAngle = 1;
final sweepAngle = 1.3;
final path = Path();
path.addArc(
Rect.fromCircle(
center: Offset(0, dy),
center: Offset(1, dy),
radius: 4,
),
-pi * startAngle,
lib/src/reaction_picker.dart
+3 -4
View File
@@ -26,7 +26,7 @@ class ReactionPicker extends StatelessWidget {
fit: StackFit.passthrough,
children: [
Material(
color: messageTheme.ownReactionsBackgroundColor,
color: messageTheme.reactionsBackgroundColor,
clipBehavior: Clip.hardEdge,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),
@@ -69,9 +69,8 @@ class ReactionPicker extends StatelessWidget {
bottom: 0,
child: CustomPaint(
painter: ReactionBubblePainter(
messageTheme.ownReactionsBackgroundColor,
messageTheme.ownReactionsBorderColor,
2,
messageTheme.reactionsBackgroundColor,
messageTheme.reactionsBorderColor,
),
),
),
lib/src/stream_chat.dart
+7 -16
View File
@@ -129,14 +129,9 @@ class StreamChatState extends State<StreamChat> with WidgetsBindingObserver {
constraints: themeData?.ownMessageTheme?.avatarTheme?.constraints,
borderRadius: themeData?.ownMessageTheme?.avatarTheme?.borderRadius,
),
otherReactionsBorderColor:
themeData?.ownMessageTheme?.otherReactionsBorderColor,
otherReactionsBackgroundColor:
themeData?.ownMessageTheme?.otherReactionsBackgroundColor,
ownReactionsBackgroundColor:
themeData?.ownMessageTheme?.ownReactionsBackgroundColor,
ownReactionsBorderColor:
themeData?.ownMessageTheme?.ownReactionsBorderColor,
reactionsBorderColor: themeData?.ownMessageTheme?.reactionsBorderColor,
reactionsBackgroundColor:
themeData?.ownMessageTheme?.reactionsBackgroundColor,
),
otherMessageTheme: defaultTheme.otherMessageTheme.copyWith(
replies: themeData?.otherMessageTheme?.replies,
@@ -150,14 +145,10 @@ class StreamChatState extends State<StreamChat> with WidgetsBindingObserver {
constraints: themeData?.otherMessageTheme?.avatarTheme?.constraints,
borderRadius: themeData?.otherMessageTheme?.avatarTheme?.borderRadius,
),
otherReactionsBorderColor:
themeData?.otherMessageTheme?.otherReactionsBorderColor,
otherReactionsBackgroundColor:
themeData?.otherMessageTheme?.otherReactionsBackgroundColor,
ownReactionsBackgroundColor:
themeData?.otherMessageTheme?.ownReactionsBackgroundColor,
ownReactionsBorderColor:
themeData?.otherMessageTheme?.ownReactionsBorderColor,
reactionsBorderColor:
themeData?.otherMessageTheme?.reactionsBorderColor,
reactionsBackgroundColor:
themeData?.otherMessageTheme?.reactionsBackgroundColor,
),
accentColor: themeData?.accentColor,
secondaryColor: themeData?.secondaryColor,
lib/src/stream_chat_theme.dart
+13 -31
View File
@@ -302,12 +302,8 @@ class StreamChatThemeData {
fontSize: 12,
),
messageBackgroundColor: isDark ? Color(0xff191919) : Color(0xffEAEAEA),
ownReactionsBackgroundColor:
isDark ? Color(0xff191919) : Color(0xffEAEAEA),
ownReactionsBorderColor: isDark ? Colors.black : Colors.white,
otherReactionsBackgroundColor: isDark ? Colors.black : Colors.white,
otherReactionsBorderColor:
isDark ? Color(0xff191919) : Color(0xffEAEAEA),
reactionsBackgroundColor: isDark ? Colors.black : Colors.white,
reactionsBorderColor: isDark ? Color(0xff191919) : Color(0xffEAEAEA),
avatarTheme: AvatarTheme(
borderRadius: BorderRadius.circular(20),
constraints: BoxConstraints.tightFor(
@@ -320,12 +316,9 @@ class StreamChatThemeData {
),
),
otherMessageTheme: MessageTheme(
ownReactionsBackgroundColor:
isDark ? Color(0xff191919) : Color(0xffEAEAEA),
ownReactionsBorderColor: isDark ? Colors.black : Colors.white,
otherReactionsBackgroundColor: isDark ? Colors.black : Colors.white,
otherReactionsBorderColor:
reactionsBackgroundColor:
isDark ? Color(0xff191919) : Color(0xffEAEAEA),
reactionsBorderColor: isDark ? Colors.black : Colors.white,
messageText: TextStyle(
fontSize: 15,
color: isDark ? Colors.white : Colors.black,
@@ -457,10 +450,8 @@ class MessageTheme {
final TextStyle createdAt;
final TextStyle replies;
final Color messageBackgroundColor;
final Color ownReactionsBackgroundColor;
final Color ownReactionsBorderColor;
final Color otherReactionsBackgroundColor;
final Color otherReactionsBorderColor;
final Color reactionsBackgroundColor;
final Color reactionsBorderColor;
final AvatarTheme avatarTheme;
const MessageTheme({
@@ -469,10 +460,8 @@ class MessageTheme {
this.messageAuthor,
this.messageLinks,
this.messageBackgroundColor,
this.ownReactionsBackgroundColor,
this.ownReactionsBorderColor,
this.otherReactionsBackgroundColor,
this.otherReactionsBorderColor,
this.reactionsBackgroundColor,
this.reactionsBorderColor,
this.avatarTheme,
this.createdAt,
});
@@ -485,10 +474,8 @@ class MessageTheme {
TextStyle replies,
Color messageBackgroundColor,
AvatarTheme avatarTheme,
Color ownReactionsBackgroundColor,
Color ownReactionsBorderColor,
Color otherReactionsBackgroundColor,
Color otherReactionsBorderColor,
Color reactionsBackgroundColor,
Color reactionsBorderColor,
}) =>
MessageTheme(
messageText: messageText ?? this.messageText,
@@ -499,14 +486,9 @@ class MessageTheme {
messageBackgroundColor ?? this.messageBackgroundColor,
avatarTheme: avatarTheme ?? this.avatarTheme,
replies: replies ?? this.replies,
ownReactionsBackgroundColor:
ownReactionsBackgroundColor ?? this.ownReactionsBackgroundColor,
ownReactionsBorderColor:
ownReactionsBorderColor ?? this.ownReactionsBorderColor,
otherReactionsBackgroundColor:
otherReactionsBackgroundColor ?? this.otherReactionsBackgroundColor,
otherReactionsBorderColor:
otherReactionsBorderColor ?? this.otherReactionsBorderColor,
reactionsBackgroundColor:
reactionsBackgroundColor ?? this.reactionsBackgroundColor,
reactionsBorderColor: reactionsBorderColor ?? this.reactionsBorderColor,
);
}