add reactions

This commit is contained in:
Salvatore Giordano
2020-02-25 18:10:58 +01:00
parent 9c64f804b5
commit ca4bef0ad0
3 changed files with 102 additions and 73 deletions
+1 -1
View File
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
void main() async {
final client = Client('qk4nn7rpcn75');
final client = Client('qk4nn7rpcn75', logLevel: Level.INFO);
await client.setUser(
User(id: 'wild-breeze-7'),
+1 -1
View File
@@ -287,7 +287,7 @@ class _MessageListViewState extends State<MessageListView> {
? widget.threadBuilder(context, message)
: null);
};
} else {
} else if (widget.threadBuilder != null) {
_onThreadTap = (message) {
Navigator.push(
context,
+100 -71
View File
@@ -222,21 +222,34 @@ class _MessageWidgetState extends State<MessageWidget>
);
if (widget.message.text.trim().isNotEmpty) {
column.children.add(Container(
margin: EdgeInsets.only(
top: nOfAttachmentWidgets > 0 ? 5 : 0,
),
decoration: _buildBoxDecoration(
isMyMessage, isLastUser || nOfAttachmentWidgets > 0),
padding: EdgeInsets.all(10),
constraints: BoxConstraints.loose(Size.fromWidth(300)),
child: MarkdownBody(
data: '${widget.message.text}',
onTapLink: (link) {
_launchURL(link);
},
styleSheet: MarkdownStyleSheet.fromTheme(Theme.of(context)),
),
final topPadding = widget.message.latestReactions.isNotEmpty ? 36.0 : 0.0;
column.children.add(Stack(
overflow: Overflow.visible,
children: <Widget>[
widget.message.latestReactions.isNotEmpty
? Positioned(
left: isMyMessage ? 0 : null,
right: !isMyMessage ? 0 : null,
top: 0,
child: _buildReactions(isMyMessage))
: SizedBox(),
Container(
margin: EdgeInsets.only(
top: nOfAttachmentWidgets > 0 ? (topPadding) : (topPadding),
),
decoration: _buildBoxDecoration(
isMyMessage, isLastUser || nOfAttachmentWidgets > 0),
padding: EdgeInsets.all(10),
constraints: BoxConstraints.loose(Size.fromWidth(300)),
child: MarkdownBody(
data: '${widget.message.text}',
onTapLink: (link) {
_launchURL(link);
},
styleSheet: MarkdownStyleSheet.fromTheme(Theme.of(context)),
),
),
],
));
}
@@ -253,73 +266,72 @@ class _MessageWidgetState extends State<MessageWidget>
return Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
IconButton(
children: reactionToEmoji.keys.map((reactionType) {
return IconButton(
iconSize: fontSize + 10,
icon: Text(
'♥️',
reactionToEmoji[reactionType],
style: textStyle,
),
onPressed: () {
sendReaction('love');
sendReaction(reactionType);
},
),
IconButton(
iconSize: fontSize + 10,
icon: Text(
'😂',
style: textStyle,
),
onPressed: () {
sendReaction('haha');
},
),
IconButton(
iconSize: fontSize + 10,
icon: Text(
'👍',
style: textStyle,
),
onPressed: () {
sendReaction('like');
},
),
IconButton(
iconSize: fontSize + 10,
icon: Text(
'😕',
style: textStyle,
),
onPressed: () {
sendReaction('sad');
},
),
IconButton(
iconSize: fontSize + 10,
icon: Text(
'😡',
style: textStyle,
),
onPressed: () {
sendReaction('angry');
},
),
IconButton(
iconSize: fontSize + 10,
icon: Text(
'😲',
style: textStyle,
),
onPressed: () {
sendReaction('wow');
},
),
],
);
}).toList(),
);
});
});
}
Widget _buildReactions(bool isMyMessage) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 2.0),
child: Stack(
overflow: Overflow.visible,
children: <Widget>[
widget.message.latestReactions.isNotEmpty
? Positioned(
left: isMyMessage ? 0 : null,
right: !isMyMessage ? 0 : null,
bottom: 1,
child: CustomPaint(
painter: ReactionBubblePainter(),
),
)
: SizedBox(),
AnimatedContainer(
transform: Matrix4.translationValues(
-16 * (isMyMessage ? 1.0 : -1.0), 0, 0),
padding: widget.message.latestReactions.isNotEmpty
? const EdgeInsets.all(8)
: EdgeInsets.zero,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.all(Radius.circular(14))),
duration: Duration(milliseconds: 300),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[]
..addAll(widget.message.latestReactions.map((reaction) {
return Text(reactionToEmoji[reaction.type] ?? '?');
})),
),
),
],
),
);
}
final Map<String, String> reactionToEmoji = {
'love': '♥️',
'haha': '😂',
'like': '👍',
'sad': '😕',
'angry': '😡',
'wow': '😲',
};
void sendReaction(String reactionType) {
StreamChannel.of(context)
.channelClient
@@ -437,3 +449,20 @@ class _MessageWidgetState extends State<MessageWidget>
return widget.message.attachments.isNotEmpty;
}
}
class ReactionBubblePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()..color = Colors.black;
final path = Path();
path.arcToPoint(Offset(-5, 0));
path.arcToPoint(Offset(0, 10), radius: Radius.circular(16));
path.arcToPoint(Offset(5, 0), radius: Radius.circular(16));
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}