fix: attachment builder (#326)
* feat: Changed attachment builder structure * fix: fixed image attachments * feat: Added onTaps to remaining attachments * fix: merged fixes * add trailing comma Co-authored-by: Salvatore Giordano <[email protected]>
This commit is contained in:
Deven Joshi
co-authored by
Salvatore Giordano
Salvatore Giordano
parent
1ed11a753f
commit
4b6f1f54b6
@@ -20,7 +20,11 @@ import 'extension.dart';
|
||||
import 'image_group.dart';
|
||||
import 'message_text.dart';
|
||||
|
||||
typedef AttachmentBuilder = Widget Function(BuildContext, Message, Attachment);
|
||||
typedef AttachmentBuilder = Widget Function(
|
||||
BuildContext,
|
||||
Message,
|
||||
List<Attachment>,
|
||||
);
|
||||
typedef OnQuotedMessageTap = void Function(String);
|
||||
|
||||
/// The display behaviour of a widget
|
||||
@@ -205,63 +209,142 @@ class MessageWidget extends StatefulWidget {
|
||||
this.customActions = const [],
|
||||
this.onAttachmentTap,
|
||||
}) : attachmentBuilders = {
|
||||
'image': (context, message, attachment) {
|
||||
return ImageAttachment(
|
||||
attachment: attachment,
|
||||
message: message,
|
||||
messageTheme: messageTheme,
|
||||
size: Size(
|
||||
MediaQuery.of(context).size.width * 0.8,
|
||||
MediaQuery.of(context).size.height * 0.3,
|
||||
'image': (context, message, attachments) {
|
||||
var border = RoundedRectangleBorder(
|
||||
side: BorderSide.none,
|
||||
borderRadius: attachmentBorderRadiusGeometry ?? BorderRadius.zero,
|
||||
);
|
||||
|
||||
if (attachments.length > 1) {
|
||||
return Padding(
|
||||
padding: attachmentPadding,
|
||||
child: wrapAttachmentWidget(
|
||||
context,
|
||||
Material(
|
||||
color: messageTheme.messageBackgroundColor,
|
||||
child: ImageGroup(
|
||||
size: Size(
|
||||
MediaQuery.of(context).size.width * 0.8,
|
||||
MediaQuery.of(context).size.height * 0.3,
|
||||
),
|
||||
images: attachments,
|
||||
message: message,
|
||||
messageTheme: messageTheme,
|
||||
onShowMessage: onShowMessage,
|
||||
),
|
||||
),
|
||||
border,
|
||||
reverse,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return wrapAttachmentWidget(
|
||||
context,
|
||||
ImageAttachment(
|
||||
attachment: attachments[0],
|
||||
message: message,
|
||||
messageTheme: messageTheme,
|
||||
size: Size(
|
||||
MediaQuery.of(context).size.width * 0.8,
|
||||
MediaQuery.of(context).size.height * 0.3,
|
||||
),
|
||||
onShowMessage: onShowMessage,
|
||||
onReturnAction: onReturnAction,
|
||||
onAttachmentTap: onAttachmentTap != null
|
||||
? () {
|
||||
onAttachmentTap?.call(message, attachments[0]);
|
||||
}
|
||||
: null,
|
||||
),
|
||||
onShowMessage: onShowMessage,
|
||||
onReturnAction: onReturnAction,
|
||||
onAttachmentTap: onAttachmentTap != null
|
||||
? () {
|
||||
onAttachmentTap?.call(message, attachment);
|
||||
}
|
||||
: null,
|
||||
border,
|
||||
reverse,
|
||||
);
|
||||
},
|
||||
'video': (context, message, attachment) {
|
||||
return VideoAttachment(
|
||||
attachment: attachment,
|
||||
messageTheme: messageTheme,
|
||||
size: Size(
|
||||
MediaQuery.of(context).size.width * 0.8,
|
||||
MediaQuery.of(context).size.height * 0.3,
|
||||
'video': (context, message, attachments) {
|
||||
var border = RoundedRectangleBorder(
|
||||
side: BorderSide.none,
|
||||
borderRadius: attachmentBorderRadiusGeometry ?? BorderRadius.zero,
|
||||
);
|
||||
|
||||
return wrapAttachmentWidget(
|
||||
context,
|
||||
Column(
|
||||
children: attachments.map((attachment) {
|
||||
return VideoAttachment(
|
||||
attachment: attachment,
|
||||
messageTheme: messageTheme,
|
||||
size: Size(
|
||||
MediaQuery.of(context).size.width * 0.8,
|
||||
MediaQuery.of(context).size.height * 0.3,
|
||||
),
|
||||
message: message,
|
||||
onShowMessage: onShowMessage,
|
||||
onReturnAction: onReturnAction,
|
||||
onAttachmentTap: onAttachmentTap != null
|
||||
? () {
|
||||
onAttachmentTap?.call(message, attachment);
|
||||
}
|
||||
: null,
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
message: message,
|
||||
onShowMessage: onShowMessage,
|
||||
onReturnAction: onReturnAction,
|
||||
onAttachmentTap: onAttachmentTap != null
|
||||
? () {
|
||||
onAttachmentTap?.call(message, attachment);
|
||||
}
|
||||
: null,
|
||||
border,
|
||||
reverse,
|
||||
);
|
||||
},
|
||||
'giphy': (context, message, attachment) {
|
||||
return GiphyAttachment(
|
||||
attachment: attachment,
|
||||
messageTheme: messageTheme,
|
||||
message: message,
|
||||
size: Size(
|
||||
MediaQuery.of(context).size.width * 0.8,
|
||||
MediaQuery.of(context).size.height * 0.3,
|
||||
'giphy': (context, message, attachments) {
|
||||
var border = RoundedRectangleBorder(
|
||||
side: BorderSide.none,
|
||||
borderRadius: attachmentBorderRadiusGeometry ?? BorderRadius.zero,
|
||||
);
|
||||
|
||||
return wrapAttachmentWidget(
|
||||
context,
|
||||
Column(
|
||||
children: attachments.map((attachment) {
|
||||
return GiphyAttachment(
|
||||
attachment: attachment,
|
||||
messageTheme: messageTheme,
|
||||
message: message,
|
||||
size: Size(
|
||||
MediaQuery.of(context).size.width * 0.8,
|
||||
MediaQuery.of(context).size.height * 0.3,
|
||||
),
|
||||
onShowMessage: onShowMessage,
|
||||
onReturnAction: onReturnAction,
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
onShowMessage: onShowMessage,
|
||||
onReturnAction: onReturnAction,
|
||||
border,
|
||||
reverse,
|
||||
);
|
||||
},
|
||||
'file': (context, message, attachment) {
|
||||
return FileAttachment(
|
||||
message: message,
|
||||
attachment: attachment,
|
||||
size: Size(
|
||||
MediaQuery.of(context).size.width * 0.8,
|
||||
MediaQuery.of(context).size.height * 0.3,
|
||||
'file': (context, message, attachments) {
|
||||
var border = RoundedRectangleBorder(
|
||||
side: attachmentBorderSide ??
|
||||
BorderSide(
|
||||
color: StreamChatTheme.of(context).colorTheme.greyWhisper,
|
||||
),
|
||||
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,
|
||||
);
|
||||
},
|
||||
}..addAll(customAttachmentBuilders ?? {}),
|
||||
@@ -830,55 +913,37 @@ class _MessageWidgetState extends State<MessageWidget>
|
||||
}
|
||||
|
||||
Widget _parseAttachments() {
|
||||
final images = widget.message.attachments
|
||||
?.where((element) =>
|
||||
element.type == 'image' && element.ogScrapeUrl == null)
|
||||
?.toList() ??
|
||||
[];
|
||||
Map<String, List<Attachment>> attachmentGroups = {};
|
||||
|
||||
if (images.length > 1) {
|
||||
return Padding(
|
||||
padding: widget.attachmentPadding,
|
||||
child: wrapAttachmentWidget(
|
||||
context,
|
||||
Material(
|
||||
color: widget.messageTheme.messageBackgroundColor,
|
||||
child: ImageGroup(
|
||||
size: Size(
|
||||
MediaQuery.of(context).size.width * 0.8,
|
||||
MediaQuery.of(context).size.height * 0.3,
|
||||
),
|
||||
images: images,
|
||||
message: widget.message,
|
||||
messageTheme: widget.messageTheme,
|
||||
onShowMessage: widget.onShowMessage,
|
||||
),
|
||||
),
|
||||
),
|
||||
widget.message.attachments
|
||||
.where((element) => element.ogScrapeUrl == null)
|
||||
.forEach((e) {
|
||||
if (attachmentGroups[e.type] == null) {
|
||||
attachmentGroups[e.type] = [];
|
||||
}
|
||||
|
||||
attachmentGroups[e.type].add(e);
|
||||
});
|
||||
|
||||
List<Widget> attachmentList = [];
|
||||
|
||||
attachmentGroups.forEach((type, attachments) {
|
||||
final attachmentBuilder = widget.attachmentBuilders[type];
|
||||
|
||||
if (attachmentBuilder == null) return SizedBox();
|
||||
final attachmentWidget = attachmentBuilder(
|
||||
context,
|
||||
widget.message,
|
||||
attachments,
|
||||
);
|
||||
}
|
||||
attachmentList.add(attachmentWidget);
|
||||
});
|
||||
|
||||
return Padding(
|
||||
padding: widget.attachmentPadding,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: widget.message.attachments
|
||||
?.where((element) => element.ogScrapeUrl == null)
|
||||
?.map((attachment) {
|
||||
final attachmentBuilder =
|
||||
widget.attachmentBuilders[attachment.type];
|
||||
|
||||
if (attachmentBuilder == null) return SizedBox();
|
||||
final attachmentWidget = attachmentBuilder(
|
||||
context,
|
||||
widget.message,
|
||||
attachment,
|
||||
);
|
||||
return wrapAttachmentWidget(
|
||||
context,
|
||||
attachmentWidget,
|
||||
);
|
||||
})?.insertBetween(SizedBox(
|
||||
children: attachmentList?.insertBetween(SizedBox(
|
||||
height: widget.attachmentPadding.vertical / 2,
|
||||
)) ??
|
||||
[],
|
||||
@@ -886,24 +951,6 @@ class _MessageWidgetState extends State<MessageWidget>
|
||||
);
|
||||
}
|
||||
|
||||
Widget wrapAttachmentWidget(
|
||||
BuildContext context,
|
||||
Widget attachmentWidget,
|
||||
) {
|
||||
final attachmentShape =
|
||||
widget.attachmentShape ?? _getDefaultAttachmentShape(context);
|
||||
return Material(
|
||||
clipBehavior: Clip.antiAlias,
|
||||
shape: attachmentShape,
|
||||
type: MaterialType.transparency,
|
||||
child: Transform(
|
||||
transform: Matrix4.rotationY(widget.reverse ? pi : 0),
|
||||
alignment: Alignment.center,
|
||||
child: attachmentWidget,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void onLongPress(BuildContext context) {
|
||||
if (widget.message.isEphemeral ||
|
||||
widget.message.status == MessageSendingStatus.sending) {
|
||||
|
||||
Reference in New Issue
Block a user