remove reaction by event

This commit is contained in:
Salvatore Giordano
2020-02-26 16:05:06 +01:00
parent 71c76dbade
commit c177ec1224
3 changed files with 120 additions and 69 deletions
+1 -1
View File
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart'; import 'package:stream_chat_flutter/stream_chat_flutter.dart';
void main() async { void main() async {
final client = Client('qk4nn7rpcn75'); final client = Client('qk4nn7rpcn75', logLevel: Level.INFO);
await client.setUser( await client.setUser(
User(id: 'wild-breeze-7'), User(id: 'wild-breeze-7'),
+1 -1
View File
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart'; import 'package:stream_chat_flutter/stream_chat_flutter.dart';
void main() async { void main() async {
final client = Client('qk4nn7rpcn75'); final client = Client('qk4nn7rpcn75', logLevel: Level.INFO);
await client.setUser( await client.setUser(
User(id: 'wild-breeze-7'), User(id: 'wild-breeze-7'),
+118 -67
View File
@@ -3,6 +3,7 @@ import 'package:chewie/chewie.dart';
import 'package:date_format/date_format.dart'; import 'package:date_format/date_format.dart';
import 'package:flutter/foundation.dart'; import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_markdown/flutter_markdown.dart'; import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:stream_chat/stream_chat.dart'; import 'package:stream_chat/stream_chat.dart';
import 'package:stream_chat_flutter/src/stream_channel.dart'; import 'package:stream_chat_flutter/src/stream_channel.dart';
@@ -222,18 +223,19 @@ class _MessageWidgetState extends State<MessageWidget>
); );
if (widget.message.text.trim().isNotEmpty) { if (widget.message.text.trim().isNotEmpty) {
final topPadding = widget.message.latestReactions.isNotEmpty ? 36.0 : 0.0; final topPadding =
widget.message.reactionCounts?.isNotEmpty == true ? 36.0 : 0.0;
column.children.add(Stack( column.children.add(Stack(
overflow: Overflow.visible, overflow: Overflow.visible,
alignment: Alignment.centerRight,
children: <Widget>[ children: <Widget>[
widget.message.latestReactions.isNotEmpty Positioned(
? Positioned( left: isMyMessage ? 0 : null,
left: isMyMessage ? 0 : null, right: !isMyMessage ? 0 : null,
right: !isMyMessage ? 0 : null, top: 0,
top: 0, child: _buildReactions(isMyMessage)),
child: _buildReactions(isMyMessage)) AnimatedContainer(
: SizedBox(), duration: Duration(milliseconds: 300),
Container(
margin: EdgeInsets.only( margin: EdgeInsets.only(
top: nOfAttachmentWidgets > 0 ? (topPadding) : (topPadding), top: nOfAttachmentWidgets > 0 ? (topPadding) : (topPadding),
), ),
@@ -256,69 +258,111 @@ class _MessageWidgetState extends State<MessageWidget>
return GestureDetector( return GestureDetector(
child: column, child: column,
onLongPress: () { onLongPress: () {
showModalBottomSheet( _showMessageBottomSheet(context);
context: context, });
builder: (context) { }
final fontSize = 40.0;
final textStyle = TextStyle( void _showMessageBottomSheet(BuildContext context) {
fontSize: fontSize, showModalBottomSheet(
); context: context,
return Row( builder: (context) {
mainAxisAlignment: MainAxisAlignment.center, final fontSize = 40.0;
mainAxisSize: MainAxisSize.min, final textStyle = TextStyle(
children: reactionToEmoji.keys.map((reactionType) { fontSize: fontSize,
return IconButton( );
iconSize: fontSize + 10, return Row(
icon: Text( crossAxisAlignment: CrossAxisAlignment.start,
reactionToEmoji[reactionType], mainAxisAlignment: MainAxisAlignment.center,
style: textStyle, mainAxisSize: MainAxisSize.min,
), children: reactionToEmoji.keys.map((reactionType) {
onPressed: () { final ownReactionIndex = widget.message.ownReactions
.indexWhere((reaction) => reaction.type == reactionType);
return Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
IconButton(
iconSize: fontSize + 10,
icon: Text(
reactionToEmoji[reactionType],
style: textStyle,
),
onPressed: () {
if (ownReactionIndex != -1) {
removeReaction(reactionType);
} else {
sendReaction(reactionType); sendReaction(reactionType);
}, }
); },
}).toList(), ),
); ownReactionIndex != -1
}); ? Text(widget.message.ownReactions[ownReactionIndex].score
.toString())
: SizedBox(),
],
);
}).toList(),
);
}); });
} }
Widget _buildReactions(bool isMyMessage) { Widget _buildReactions(bool isMyMessage) {
return Padding( return Padding(
padding: const EdgeInsets.symmetric(vertical: 2.0), padding: const EdgeInsets.symmetric(vertical: 2.0),
child: Stack( child: GestureDetector(
overflow: Overflow.visible, onTap: () {
children: <Widget>[ _showMessageBottomSheet(context);
widget.message.latestReactions.isNotEmpty },
? Positioned( child: Stack(
left: isMyMessage ? 0 : null, overflow: Overflow.visible,
right: !isMyMessage ? 0 : null, children: <Widget>[
bottom: 1, widget.message.reactionCounts?.isNotEmpty == true
child: CustomPaint( ? Positioned(
painter: ReactionBubblePainter(), left: isMyMessage ? 0 : null,
), right: !isMyMessage ? 0 : null,
) bottom: 2,
: SizedBox(), child: CustomPaint(
AnimatedContainer( painter: ReactionBubblePainter(),
transform: Matrix4.translationValues( ),
-16 * (isMyMessage ? 1.0 : -1.0), 0, 0), )
padding: widget.message.latestReactions.isNotEmpty : SizedBox(),
? const EdgeInsets.all(8) Container(
: EdgeInsets.zero, transform: Matrix4.translationValues(
decoration: BoxDecoration( ((widget.message.reactionCounts?.length ?? 0) * 10) *
color: Colors.black, (isMyMessage ? -1.0 : 1.0),
borderRadius: BorderRadius.all(Radius.circular(14))), 0,
duration: Duration(milliseconds: 300), 0,
child: Row( ),
mainAxisSize: MainAxisSize.max, padding: widget.message.reactionCounts?.isNotEmpty == true
mainAxisAlignment: MainAxisAlignment.start, ? const EdgeInsets.all(8)
children: <Widget>[] : EdgeInsets.zero,
..addAll(widget.message.latestReactions.map((reaction) { decoration: BoxDecoration(
return Text(reactionToEmoji[reaction.type] ?? '?'); color: Colors.black,
})), borderRadius: BorderRadius.all(Radius.circular(14))),
child: (widget.message.reactionCounts != null &&
widget.message.reactionCounts.isNotEmpty)
? Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: widget.message.reactionCounts.keys
.map((reactionType) {
return Text(
reactionToEmoji[reactionType] ?? '?',
) as Widget; //TODO refactor
}).toList()
..add(Padding(
padding: const EdgeInsets.only(left: 4.0),
child: Text(
widget.message.reactionCounts.values
.fold(0, (t, v) => v + t)
.toString(),
style: TextStyle(color: Colors.white),
),
)))
: SizedBox(),
), ),
), ],
], ),
), ),
); );
} }
@@ -339,6 +383,13 @@ class _MessageWidgetState extends State<MessageWidget>
Navigator.of(context).pop(); Navigator.of(context).pop();
} }
void removeReaction(String reactionType) {
StreamChannel.of(context)
.channel
.deleteReaction(widget.message.id, reactionType);
Navigator.of(context).pop();
}
Widget _buildImage( Widget _buildImage(
bool isMyMessage, bool isMyMessage,
bool isLastUser, bool isLastUser,
@@ -455,9 +506,9 @@ class ReactionBubblePainter extends CustomPainter {
void paint(Canvas canvas, Size size) { void paint(Canvas canvas, Size size) {
final paint = Paint()..color = Colors.black; final paint = Paint()..color = Colors.black;
final path = Path(); final path = Path();
path.arcToPoint(Offset(-5, 0)); path.arcToPoint(Offset(-6, -6));
path.arcToPoint(Offset(0, 10), radius: Radius.circular(16)); path.arcToPoint(Offset(0, 10));
path.arcToPoint(Offset(5, 0), radius: Radius.circular(16)); path.arcToPoint(Offset(6, -6));
canvas.drawPath(path, paint); canvas.drawPath(path, paint);
} }