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

feat: Added message flagging

Browse Source
This commit is contained in:
Deven Joshi
2021-01-08 22:00:54 +05:30
parent 26f30f06d0
commit b93d616c86
3 changed files with 239 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/src/message_actions_modal.dart
+235 -50
View File
@@ -1,5 +1,6 @@
import 'dart:ui'; import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart'; import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';
@@ -13,7 +14,7 @@ import 'message_widget.dart';
import 'stream_chat.dart'; import 'stream_chat.dart';
import 'stream_chat_theme.dart'; import 'stream_chat_theme.dart';
class MessageActionsModal extends StatelessWidget { class MessageActionsModal extends StatefulWidget {
final Widget Function(BuildContext, Message) editMessageInputBuilder; final Widget Function(BuildContext, Message) editMessageInputBuilder;
final void Function(Message) onThreadReplyTap; final void Function(Message) onThreadReplyTap;
final void Function(Message) onReplyTap; final void Function(Message) onReplyTap;
@@ -26,6 +27,7 @@ class MessageActionsModal extends StatelessWidget {
final bool showResendMessage; final bool showResendMessage;
final bool showReply; final bool showReply;
final bool showThreadReply; final bool showThreadReply;
final bool showFlagButton;
final bool reverse; final bool reverse;
final ShapeBorder messageShape; final ShapeBorder messageShape;
final DisplayWidget showUserAvatar; final DisplayWidget showUserAvatar;
@@ -43,22 +45,38 @@ class MessageActionsModal extends StatelessWidget {
this.showReply = true, this.showReply = true,
this.showResendMessage = true, this.showResendMessage = true,
this.showThreadReply = true, this.showThreadReply = true,
this.showFlagButton = true,
this.showUserAvatar = DisplayWidget.show, this.showUserAvatar = DisplayWidget.show,
this.editMessageInputBuilder, this.editMessageInputBuilder,
this.messageShape, this.messageShape,
this.reverse = false, this.reverse = false,
}) : super(key: key); }) : super(key: key);
@override
_MessageActionsModalState createState() => _MessageActionsModalState();
}
class _MessageActionsModalState extends State<MessageActionsModal> {
bool showConfirmFlagModal = false;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
if (showConfirmFlagModal) {
return _showFlagDialog();
} else {
return _showMessageOptionsModal();
}
}
Widget _showMessageOptionsModal() {
final size = MediaQuery.of(context).size; final size = MediaQuery.of(context).size;
final user = StreamChat.of(context).user; final user = StreamChat.of(context).user;
final roughMaxSize = 2 * size.width / 3; final roughMaxSize = 2 * size.width / 3;
var messageTextLength = message.text.length; var messageTextLength = widget.message.text.length;
if (message.quotedMessage != null) { if (widget.message.quotedMessage != null) {
var quotedMessageLength = message.quotedMessage.text.length + 40; var quotedMessageLength = widget.message.quotedMessage.text.length + 40;
if (message.quotedMessage.attachments?.isNotEmpty == true) { if (widget.message.quotedMessage.attachments?.isNotEmpty == true) {
quotedMessageLength += 40; quotedMessageLength += 40;
} }
if (quotedMessageLength > messageTextLength) { if (quotedMessageLength > messageTextLength) {
@@ -66,8 +84,8 @@ class MessageActionsModal extends StatelessWidget {
} }
} }
final roughSentenceSize = final roughSentenceSize =
messageTextLength * messageTheme.messageText.fontSize * 1.2; messageTextLength * widget.messageTheme.messageText.fontSize * 1.2;
final divFactor = message.attachments?.isNotEmpty == true final divFactor = widget.message.attachments?.isNotEmpty == true
? 1 ? 1
: (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize)); : (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize));
@@ -95,18 +113,18 @@ class MessageActionsModal extends StatelessWidget {
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch, crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[ children: <Widget>[
if (showReactions && if (widget.showReactions &&
(message.status == MessageSendingStatus.SENT || (widget.message.status == MessageSendingStatus.SENT ||
message.status == null)) widget.message.status == null))
Align( Align(
alignment: Alignment( alignment: Alignment(
user.id == message.user.id user.id == widget.message.user.id
? (divFactor > 1.0 ? 0.0 : (1.0 - divFactor)) ? (divFactor > 1.0 ? 0.0 : (1.0 - divFactor))
: (divFactor > 1.0 ? 0.0 : -(1.0 - divFactor)), : (divFactor > 1.0 ? 0.0 : -(1.0 - divFactor)),
0.0), 0.0),
child: ReactionPicker( child: ReactionPicker(
message: message, message: widget.message,
messageTheme: messageTheme, messageTheme: widget.messageTheme,
), ),
), ),
TweenAnimationBuilder<double>( TweenAnimationBuilder<double>(
@@ -118,27 +136,28 @@ class MessageActionsModal extends StatelessWidget {
child: IgnorePointer( child: IgnorePointer(
child: MessageWidget( child: MessageWidget(
key: Key('MessageWidget'), key: Key('MessageWidget'),
reverse: reverse, reverse: widget.reverse,
message: message.copyWith( message: widget.message.copyWith(
text: message.text.length > 200 text: widget.message.text.length > 200
? '${message.text.substring(0, 200)}...' ? '${widget.message.text.substring(0, 200)}...'
: message.text, : widget.message.text,
), ),
messageTheme: messageTheme, messageTheme: widget.messageTheme,
showReactions: false, showReactions: false,
showUsername: false, showUsername: false,
showThreadReplyIndicator: false, showThreadReplyIndicator: false,
showReplyIndicator: false, showReplyIndicator: false,
showUserAvatar: showUserAvatar, showUserAvatar: widget.showUserAvatar,
showTimestamp: false, showTimestamp: false,
translateUserAvatar: false, translateUserAvatar: false,
showReactionPickerIndicator: showReactions && showReactionPickerIndicator:
(message.status == widget.showReactions &&
MessageSendingStatus.SENT || (widget.message.status ==
message.status == null), MessageSendingStatus.SENT ||
widget.message.status == null),
showInChannelIndicator: false, showInChannelIndicator: false,
showSendingIndicator: DisplayWidget.gone, showSendingIndicator: DisplayWidget.gone,
shape: messageShape, shape: widget.messageShape,
), ),
), ),
); );
@@ -172,26 +191,28 @@ class MessageActionsModal extends StatelessWidget {
children: ListTile.divideTiles( children: ListTile.divideTiles(
context: context, context: context,
tiles: [ tiles: [
if (showReply && if (widget.showReply &&
(message.status == (widget.message.status ==
MessageSendingStatus.SENT || MessageSendingStatus.SENT ||
message.status == null) && widget.message.status == null) &&
message.parentId == null) widget.message.parentId == null)
_buildReplyButton(context), _buildReplyButton(context),
if (showThreadReply && if (widget.showThreadReply &&
(message.status == (widget.message.status ==
MessageSendingStatus.SENT || MessageSendingStatus.SENT ||
message.status == null) && widget.message.status == null) &&
message.parentId == null) widget.message.parentId == null)
_buildThreadReplyButton(context), _buildThreadReplyButton(context),
if (showResendMessage) if (widget.showResendMessage)
_buildResendMessage(context), _buildResendMessage(context),
if (showEditMessage) if (widget.showEditMessage)
_buildEditMessage(context), _buildEditMessage(context),
if (showDeleteMessage) if (widget.showDeleteMessage)
_buildDeleteButton(context), _buildDeleteButton(context),
if (showCopyMessage) if (widget.showCopyMessage)
_buildCopyButton(context), _buildCopyButton(context),
if (widget.showCopyMessage)
_buildFlagButton(context),
], ],
).toList(), ).toList(),
), ),
@@ -209,6 +230,150 @@ class MessageActionsModal extends StatelessWidget {
); );
} }
Widget _showFlagDialog() {
return GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () => Navigator.maybePop(context),
child: Stack(
children: [
Positioned.fill(
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 10,
sigmaY: 10,
),
child: Container(
color: StreamChatTheme.of(context).colorTheme.overlay,
),
),
),
Center(
child: Opacity(
opacity: 0.9,
child: Material(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0),
),
clipBehavior: Clip.antiAlias,
child: Container(
width: 270.0,
height: 156.0,
alignment: Alignment.center,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
height: 19.0,
),
Text(
'Flag Message',
style: StreamChatTheme.of(context)
.textTheme
.bodyBold
.copyWith(fontSize: 17.0),
),
SizedBox(
height: 4.0,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Text(
'Do you want to send a copy of this \nmessage to a moderator for further \ninvestigation?',
style: TextStyle(fontSize: 13.5),
textAlign: TextAlign.center,
),
),
SizedBox(
height: 21.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: Center(
child: InkWell(
child: Container(
height: 44.0,
alignment: Alignment.center,
child: Text(
'Cancel',
style: StreamChatTheme.of(context)
.textTheme
.body
.copyWith(
fontSize: 17.0,
color: StreamChatTheme.of(context)
.colorTheme
.accentBlue),
),
decoration: BoxDecoration(
border: Border.symmetric(
horizontal: BorderSide(
color: StreamChatTheme.of(context)
.colorTheme
.grey),
),
),
),
onTap: () {
setState(() {
showConfirmFlagModal = false;
});
},
),
),
),
Expanded(
child: Center(
child: InkWell(
child: Container(
height: 44.0,
alignment: Alignment.center,
child: Text(
'Flag',
style: StreamChatTheme.of(context)
.textTheme
.body
.copyWith(
fontWeight: FontWeight.bold,
fontSize: 17.0,
color: StreamChatTheme.of(context)
.colorTheme
.accentBlue),
),
decoration: BoxDecoration(
border: Border.fromBorderSide(
BorderSide(
color: StreamChatTheme.of(context)
.colorTheme
.grey),
),
),
),
onTap: () {
setState(() {
showConfirmFlagModal = false;
});
final client = StreamChat.of(context).client;
client.flagMessage(widget.message.id);
},
),
),
),
],
),
],
),
),
),
),
),
],
),
);
}
Widget _buildReplyButton(BuildContext context) { Widget _buildReplyButton(BuildContext context) {
return ListTile( return ListTile(
title: Text( title: Text(
@@ -220,15 +385,34 @@ class MessageActionsModal extends StatelessWidget {
), ),
onTap: () { onTap: () {
Navigator.pop(context); Navigator.pop(context);
if (onReplyTap != null) { if (widget.onReplyTap != null) {
onReplyTap(message); widget.onReplyTap(widget.message);
} }
}, },
); );
} }
Widget _buildFlagButton(BuildContext context) {
return ListTile(
title: Text(
'Flag',
style: Theme.of(context).textTheme.headline6,
),
leading: StreamSvgIcon.flag(
color: StreamChatTheme.of(context).primaryIconTheme.color,
size: 24.0,
),
onTap: () {
setState(() {
showConfirmFlagModal = true;
});
},
);
}
Widget _buildDeleteButton(BuildContext context) { Widget _buildDeleteButton(BuildContext context) {
final isDeleteFailed = message.status == MessageSendingStatus.FAILED_DELETE; final isDeleteFailed =
widget.message.status == MessageSendingStatus.FAILED_DELETE;
return ListTile( return ListTile(
title: Text( title: Text(
isDeleteFailed ? 'Retry deleting message' : 'Delete message', isDeleteFailed ? 'Retry deleting message' : 'Delete message',
@@ -241,7 +425,7 @@ class MessageActionsModal extends StatelessWidget {
onTap: () { onTap: () {
Navigator.pop(context); Navigator.pop(context);
StreamChat.of(context).client.deleteMessage( StreamChat.of(context).client.deleteMessage(
message, widget.message,
StreamChannel.of(context).channel.cid, StreamChannel.of(context).channel.cid,
); );
}, },
@@ -258,7 +442,7 @@ class MessageActionsModal extends StatelessWidget {
color: StreamChatTheme.of(context).primaryIconTheme.color, color: StreamChatTheme.of(context).primaryIconTheme.color,
), ),
onTap: () async { onTap: () async {
await Clipboard.setData(ClipboardData(text: message.text)); await Clipboard.setData(ClipboardData(text: widget.message.text));
Navigator.pop(context); Navigator.pop(context);
}, },
); );
@@ -281,7 +465,8 @@ class MessageActionsModal extends StatelessWidget {
} }
Widget _buildResendMessage(BuildContext context) { Widget _buildResendMessage(BuildContext context) {
final isUpdateFailed = message.status == MessageSendingStatus.FAILED_UPDATE; final isUpdateFailed =
widget.message.status == MessageSendingStatus.FAILED_UPDATE;
return ListTile( return ListTile(
title: Text( title: Text(
isUpdateFailed ? 'Resend edited message' : 'Resend', isUpdateFailed ? 'Resend edited message' : 'Resend',
@@ -295,9 +480,9 @@ class MessageActionsModal extends StatelessWidget {
final client = StreamChat.of(context).client; final client = StreamChat.of(context).client;
final channel = StreamChannel.of(context).channel; final channel = StreamChannel.of(context).channel;
if (isUpdateFailed) { if (isUpdateFailed) {
client.updateMessage(message, channel.cid); client.updateMessage(widget.message, channel.cid);
} else { } else {
channel.sendMessage(message); channel.sendMessage(widget.message);
} }
}, },
); );
@@ -354,10 +539,10 @@ class MessageActionsModal extends StatelessWidget {
padding: EdgeInsets.only( padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom, bottom: MediaQuery.of(context).viewInsets.bottom,
), ),
child: editMessageInputBuilder != null child: widget.editMessageInputBuilder != null
? editMessageInputBuilder(context, message) ? widget.editMessageInputBuilder(context, widget.message)
: MessageInput( : MessageInput(
editMessage: message, editMessage: widget.message,
preMessageSending: (m) { preMessageSending: (m) {
FocusScope.of(context).unfocus(); FocusScope.of(context).unfocus();
Navigator.pop(context); Navigator.pop(context);
@@ -383,8 +568,8 @@ class MessageActionsModal extends StatelessWidget {
), ),
onTap: () { onTap: () {
Navigator.pop(context); Navigator.pop(context);
if (onThreadReplyTap != null) { if (widget.onThreadReplyTap != null) {
onThreadReplyTap(message); widget.onThreadReplyTap(widget.message);
} }
}, },
); );
lib/src/message_list_view.dart
+1
View File
@@ -800,6 +800,7 @@ class _MessageListViewState extends State<MessageListView> {
showTimestamp: !isNextUser || readList?.isNotEmpty == true, showTimestamp: !isNextUser || readList?.isNotEmpty == true,
showEditMessage: isMyMessage, showEditMessage: isMyMessage,
showDeleteMessage: isMyMessage, showDeleteMessage: isMyMessage,
showFlagButton: !isMyMessage,
borderSide: isMyMessage ? BorderSide.none : null, borderSide: isMyMessage ? BorderSide.none : null,
onThreadTap: _onThreadTap, onThreadTap: _onThreadTap,
onReplyTap: widget.onReplyTap, onReplyTap: widget.onReplyTap,
lib/src/message_widget.dart
+3
View File
@@ -133,6 +133,7 @@ class MessageWidget extends StatefulWidget {
final bool showTimestamp; final bool showTimestamp;
final bool showDeleteMessage; final bool showDeleteMessage;
final bool showEditMessage; final bool showEditMessage;
final bool showFlagButton;
final Map<String, AttachmentBuilder> attachmentBuilders; final Map<String, AttachmentBuilder> attachmentBuilders;
/// Center user avatar with bottom of the message /// Center user avatar with bottom of the message
@@ -168,6 +169,7 @@ class MessageWidget extends StatefulWidget {
this.showReactions = true, this.showReactions = true,
this.showDeleteMessage = true, this.showDeleteMessage = true,
this.showEditMessage = true, this.showEditMessage = true,
this.showFlagButton = true,
this.onUserAvatarTap, this.onUserAvatarTap,
this.onLinkTap, this.onLinkTap,
this.onMessageActions, this.onMessageActions,
@@ -718,6 +720,7 @@ class _MessageWidgetState extends State<MessageWidget> {
widget.onReplyTap != null, widget.onReplyTap != null,
showThreadReply: showThreadReply:
widget.showThreadReplyIndicator && widget.onThreadTap != null, widget.showThreadReplyIndicator && widget.onThreadTap != null,
showFlagButton: widget.showFlagButton,
), ),
); );
}); });