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

add image group

Browse Source
This commit is contained in:
Salvatore Giordano
2020-07-23 11:02:46 +02:00
parent d03a70e39a
commit 02a3642894
4 changed files with 183 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/src/group_image.dart
+1 -11
View File
@@ -17,16 +17,6 @@ class GroupImage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final secondRow = images
.skip(2)
.map((url) => Flexible(
child: CachedNetworkImage(
imageUrl: url,
fit: BoxFit.cover,
),
))
.toList();
return GestureDetector(
onTap: onTap,
child: ClipRRect(
@@ -81,7 +71,7 @@ class GroupImage extends StatelessWidget {
))
.toList(),
),
)
),
],
),
),
lib/src/image_attachment.dart
+3 -3
View File
@@ -17,8 +17,8 @@ class ImageAttachment extends StatelessWidget {
Key key,
@required this.attachment,
@required this.message,
@required this.size,
this.messageTheme,
this.size,
}) : super(key: key);
@override
@@ -30,8 +30,8 @@ class ImageAttachment extends StatelessWidget {
attachment: attachment,
);
}
return SizedBox.fromSize(
size: size,
return ConstrainedBox(
constraints: BoxConstraints.loose(size),
child: Stack(
children: <Widget>[
Column(
lib/src/image_group.dart
+99
View File
@@ -0,0 +1,99 @@
import 'package:flutter/material.dart';
import 'package:stream_chat/stream_chat.dart';
import 'package:stream_chat_flutter/src/message_widget.dart';
class ImageGroup extends StatelessWidget {
const ImageGroup({
Key key,
@required this.imageBuilder,
@required this.images,
@required this.message,
this.size,
}) : super(key: key);
final AttachmentBuilder imageBuilder;
final List<Attachment> images;
final Message message;
final Size size;
@override
Widget build(BuildContext context) {
return ConstrainedBox(
constraints: BoxConstraints.loose(size),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
FittedBox(
fit: BoxFit.cover,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
imageBuilder(
context,
message,
images[0],
),
Padding(
padding: const EdgeInsets.only(left: 4.0),
child: imageBuilder(
context,
message,
images[1],
),
),
],
),
),
if (images.length >= 3)
Padding(
padding: const EdgeInsets.only(top: 2.0),
child: FittedBox(
fit: BoxFit.cover,
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
imageBuilder(
context,
message,
images[2],
),
if (images.length >= 4)
Padding(
padding: const EdgeInsets.only(left: 4.0),
child: Stack(
children: <Widget>[
imageBuilder(
context,
message,
images[3],
),
if (images.length > 4)
Positioned.fill(
child: Material(
color: Colors.black38,
child: InkWell(
onTap: () {},
child: Center(
child: Text(
'${images.length - 4} +',
style: TextStyle(
color: Colors.white,
fontSize: 28,
),
),
),
),
),
),
],
),
),
],
),
),
),
],
),
);
}
}
lib/src/message_widget.dart
+80 -50
View File
@@ -8,6 +8,7 @@ import 'package:flutter_portal/flutter_portal.dart';
import 'package:jiffy/jiffy.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
import 'image_group.dart';
import 'message_actions_bottom_sheet.dart';
import 'message_text.dart';
@@ -272,6 +273,7 @@ class _MessageWidgetState extends State<MessageWidget> {
: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
..._parseAttachments(context),
if (widget.message.text
@@ -523,6 +525,30 @@ class _MessageWidgetState extends State<MessageWidget> {
}
List<Widget> _parseAttachments(BuildContext context) {
final images = widget.message.attachments
.where((element) => element.type == 'image')
.toList();
if (images.length > 1) {
final imageBuilder = widget.attachmentBuilders['image'];
return [
wrapAttachmentWidget(
context,
Material(
color: widget.messageTheme.messageBackgroundColor,
child: ImageGroup(
size: Size.fromWidth(
MediaQuery.of(context).size.width * 0.8,
),
imageBuilder: imageBuilder,
images: images,
message: widget.message,
),
),
),
];
}
return widget.message.attachments?.map((attachment) {
final attachmentBuilder = widget.attachmentBuilders[attachment.type];
@@ -530,61 +556,65 @@ class _MessageWidgetState extends State<MessageWidget> {
return SizedBox();
}
return Padding(
padding: EdgeInsets.only(
bottom: 4,
),
child: GestureDetector(
onTap: () => retryMessage(context),
onLongPress: () => onLongPress(context),
child: Material(
color: _getBackgroundColor(),
clipBehavior: Clip.hardEdge,
shape: widget.attachmentShape ??
widget.shape ??
ContinuousRectangleBorder(
side: widget.attachmentBorderSide ??
widget.borderSide ??
BorderSide(
color:
Theme.of(context).brightness == Brightness.dark
? Colors.white.withAlpha(24)
: Colors.black.withAlpha(24),
),
borderRadius: widget.attachmentBorderRadiusGeometry ??
widget.borderRadiusGeometry ??
BorderRadius.zero,
final attachmentWidget = attachmentBuilder(
context,
widget.message,
attachment,
);
return wrapAttachmentWidget(context, attachmentWidget);
})?.toList() ??
[];
}
Padding wrapAttachmentWidget(BuildContext context, Widget attachmentWidget) {
return Padding(
padding: EdgeInsets.only(
bottom: 4,
),
child: GestureDetector(
onTap: () => retryMessage(context),
onLongPress: () => onLongPress(context),
child: Material(
color: _getBackgroundColor(),
clipBehavior: Clip.hardEdge,
shape: widget.attachmentShape ??
widget.shape ??
ContinuousRectangleBorder(
side: widget.attachmentBorderSide ??
widget.borderSide ??
BorderSide(
color: Theme.of(context).brightness == Brightness.dark
? Colors.white.withAlpha(24)
: Colors.black.withAlpha(24),
),
child: Padding(
padding: widget.attachmentPadding,
child: ClipRRect(
borderRadius: BorderRadius.circular(6),
child: Transform(
transform: Matrix4.rotationY(widget.reverse ? pi : 0),
alignment: Alignment.center,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
getFailedMessageWidget(
context,
padding: const EdgeInsets.all(8.0),
),
attachmentBuilder(
context,
widget.message,
attachment,
),
],
),
borderRadius: widget.attachmentBorderRadiusGeometry ??
widget.borderRadiusGeometry ??
BorderRadius.zero,
),
child: Padding(
padding: widget.attachmentPadding,
child: ClipRRect(
borderRadius: BorderRadius.circular(6),
child: Transform(
transform: Matrix4.rotationY(widget.reverse ? pi : 0),
alignment: Alignment.center,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
getFailedMessageWidget(
context,
padding: const EdgeInsets.all(8.0),
),
),
attachmentWidget,
],
),
),
),
);
})?.toList() ??
[];
),
),
),
);
}
void onLongPress(BuildContext context) {