From 7a8fe4aa78e0934fb85ad0cb4b9a7e73edc02a3e Mon Sep 17 00:00:00 2001 From: Salvatore Giordano Date: Tue, 16 Mar 2021 13:47:46 +0100 Subject: [PATCH] fix attachment border radius --- .../lib/src/message_actions_modal.dart | 6 ++- .../lib/src/message_reactions_modal.dart | 11 +++-- .../lib/src/message_widget.dart | 46 ++++++++++++------- .../stream_chat_flutter/lib/src/utils.dart | 20 ++++---- 4 files changed, 54 insertions(+), 29 deletions(-) diff --git a/packages/stream_chat_flutter/lib/src/message_actions_modal.dart b/packages/stream_chat_flutter/lib/src/message_actions_modal.dart index 883210ba..c997d09c 100644 --- a/packages/stream_chat_flutter/lib/src/message_actions_modal.dart +++ b/packages/stream_chat_flutter/lib/src/message_actions_modal.dart @@ -5,10 +5,10 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:stream_chat_flutter/src/message_action.dart'; -import 'package:stream_chat_flutter/stream_chat_flutter.dart'; import 'package:stream_chat_flutter/src/reaction_picker.dart'; import 'package:stream_chat_flutter/src/stream_svg_icon.dart'; import 'package:stream_chat_flutter/src/utils.dart'; +import 'package:stream_chat_flutter/stream_chat_flutter.dart'; import 'extension.dart'; import 'message_input.dart'; @@ -34,6 +34,7 @@ class MessageActionsModal extends StatefulWidget { final ShapeBorder messageShape; final ShapeBorder attachmentShape; final DisplayWidget showUserAvatar; + final BorderRadius attachmentBorderRadiusGeometry; /// List of custom actions final List customActions; @@ -58,6 +59,7 @@ class MessageActionsModal extends StatefulWidget { this.attachmentShape, this.reverse = false, this.customActions = const [], + this.attachmentBorderRadiusGeometry, }) : super(key: key); @override @@ -153,6 +155,8 @@ class _MessageActionsModalState extends State { child: MessageWidget( key: Key('MessageWidget'), reverse: widget.reverse, + attachmentBorderRadiusGeometry: + widget.attachmentBorderRadiusGeometry, message: widget.message.copyWith( text: widget.message.text.length > 200 ? '${widget.message.text.substring(0, 200)}...' diff --git a/packages/stream_chat_flutter/lib/src/message_reactions_modal.dart b/packages/stream_chat_flutter/lib/src/message_reactions_modal.dart index a9e55a0a..c2a13ae7 100644 --- a/packages/stream_chat_flutter/lib/src/message_reactions_modal.dart +++ b/packages/stream_chat_flutter/lib/src/message_reactions_modal.dart @@ -1,17 +1,16 @@ import 'dart:ui'; import 'package:flutter/material.dart'; -import 'package:stream_chat_flutter/src/message_action.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/src/reaction_bubble.dart'; import 'package:stream_chat_flutter/src/reaction_picker.dart'; import 'package:stream_chat_flutter/src/stream_chat.dart'; import 'package:stream_chat_flutter/src/user_avatar.dart'; +import 'package:stream_chat_flutter/stream_chat_flutter.dart'; +import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart'; +import 'extension.dart'; import 'message_widget.dart'; import 'stream_chat_theme.dart'; -import 'extension.dart'; class MessageReactionsModal extends StatelessWidget { final Widget Function(BuildContext, Message) editMessageInputBuilder; @@ -24,6 +23,7 @@ class MessageReactionsModal extends StatelessWidget { final ShapeBorder messageShape; final ShapeBorder attachmentShape; final void Function(User) onUserAvatarTap; + final BorderRadius attachmentBorderRadiusGeometry; const MessageReactionsModal({ Key key, @@ -37,6 +37,7 @@ class MessageReactionsModal extends StatelessWidget { this.reverse = false, this.showUserAvatar = DisplayWidget.show, this.onUserAvatarTap, + this.attachmentBorderRadiusGeometry, }) : super(key: key); @override @@ -133,6 +134,8 @@ class MessageReactionsModal extends StatelessWidget { shape: messageShape, attachmentShape: attachmentShape, padding: const EdgeInsets.all(0), + attachmentBorderRadiusGeometry: + attachmentBorderRadiusGeometry, attachmentPadding: EdgeInsets.all( hasFileAttachment ? 4 : 2, ), diff --git a/packages/stream_chat_flutter/lib/src/message_widget.dart b/packages/stream_chat_flutter/lib/src/message_widget.dart index 67e38c75..3e173089 100644 --- a/packages/stream_chat_flutter/lib/src/message_widget.dart +++ b/packages/stream_chat_flutter/lib/src/message_widget.dart @@ -235,6 +235,7 @@ class MessageWidget extends StatefulWidget { ), border, reverse, + attachmentBorderRadiusGeometry ?? BorderRadius.zero, ), ); } @@ -259,6 +260,7 @@ class MessageWidget extends StatefulWidget { ), border, reverse, + attachmentBorderRadiusGeometry ?? BorderRadius.zero, ); }, 'video': (context, message, attachments) { @@ -291,6 +293,7 @@ class MessageWidget extends StatefulWidget { ), border, reverse, + attachmentBorderRadiusGeometry ?? BorderRadius.zero, ); }, 'giphy': (context, message, attachments) { @@ -318,6 +321,7 @@ class MessageWidget extends StatefulWidget { ), border, reverse, + attachmentBorderRadiusGeometry ?? BorderRadius.zero, ); }, 'file': (context, message, attachments) { @@ -329,22 +333,28 @@ class MessageWidget extends StatefulWidget { borderRadius: attachmentBorderRadiusGeometry ?? BorderRadius.zero, ); - return wrapAttachmentWidget( - context, - Column( - children: attachments.map((attachment) { - return FileAttachment( - message: message, - attachment: attachment, - size: Size( - MediaQuery.of(context).size.width * 0.8, - MediaQuery.of(context).size.height * 0.3, - ), - ); - }).toList(), - ), - border, - reverse, + return Column( + children: attachments + .map((attachment) { + return wrapAttachmentWidget( + context, + FileAttachment( + message: message, + attachment: attachment, + size: Size( + MediaQuery.of(context).size.width * 0.8, + MediaQuery.of(context).size.height * 0.3, + ), + ), + border, + reverse, + attachmentBorderRadiusGeometry ?? BorderRadius.zero, + ); + }) + .insertBetween(SizedBox( + height: attachmentPadding.vertical / 2, + )) + .toList(), ); }, }..addAll(customAttachmentBuilders ?? {}), @@ -822,6 +832,8 @@ class _MessageWidgetState extends State return StreamChannel( channel: channel, child: MessageActionsModal( + attachmentBorderRadiusGeometry: + widget.attachmentBorderRadiusGeometry, showUserAvatar: widget.message.user.id == channel.client.state.user.id ? DisplayWidget.gone @@ -869,6 +881,8 @@ class _MessageWidgetState extends State return StreamChannel( channel: channel, child: MessageReactionsModal( + attachmentBorderRadiusGeometry: + widget.attachmentBorderRadiusGeometry, showUserAvatar: widget.message.user.id == channel.client.state.user.id ? DisplayWidget.gone diff --git a/packages/stream_chat_flutter/lib/src/utils.dart b/packages/stream_chat_flutter/lib/src/utils.dart index fee747a9..8950a77c 100644 --- a/packages/stream_chat_flutter/lib/src/utils.dart +++ b/packages/stream_chat_flutter/lib/src/utils.dart @@ -356,15 +356,19 @@ Widget wrapAttachmentWidget( Widget attachmentWidget, ShapeBorder attachmentShape, bool reverse, + BorderRadius borderRadius, ) { - return Material( - clipBehavior: Clip.antiAlias, - shape: attachmentShape, - type: MaterialType.transparency, - child: Transform( - transform: Matrix4.rotationY(reverse ? pi : 0), - alignment: Alignment.center, - child: attachmentWidget, + return ClipRRect( + borderRadius: borderRadius, + child: Material( + clipBehavior: Clip.antiAlias, + shape: attachmentShape, + type: MaterialType.transparency, + child: Transform( + transform: Matrix4.rotationY(reverse ? pi : 0), + alignment: Alignment.center, + child: attachmentWidget, + ), ), ); }