💄 Better attachment layout

lib/widgets/attachments/attachment_list.dart

@@ -1,4 +1,4 @@
-import 'dart:math' show min;
+import 'dart:math' as math;
 import 'dart:ui';
 
 import 'package:carousel_slider/carousel_slider.dart';
@@ -16,9 +16,11 @@ class AttachmentList extends StatefulWidget {
   final String parentId;
   final List<String> attachmentsId;
   final bool isGrid;
+  final bool isColumn;
   final bool isForceGrid;
   final bool autoload;
   final double flatMaxHeight;
+  final double columnMaxWidth;
 
   final double? width;
   final double? viewport;
@@ -28,9 +30,11 @@ class AttachmentList extends StatefulWidget {
     required this.parentId,
     required this.attachmentsId,
     this.isGrid = false,
+    this.isColumn = false,
     this.isForceGrid = false,
     this.autoload = false,
     this.flatMaxHeight = 720,
+    this.columnMaxWidth = 480,
     this.width,
     this.viewport,
   });
@@ -105,13 +109,14 @@ class _AttachmentListState extends State<AttachmentList> {
     }
   }
 
-  Widget _buildEntry(Attachment? element, int idx) {
+  Widget _buildEntry(Attachment? element, int idx, {double? width}) {
     return AttachmentListEntry(
       item: element,
       parentId: widget.parentId,
-      width: widget.width,
+      width: width ?? widget.width,
       badgeContent: '${idx + 1}/${_attachmentsMeta.length}',
-      showBadge: _attachmentsMeta.length > 1 && !widget.isGrid,
+      showBadge:
+          _attachmentsMeta.length > 1 && !widget.isGrid && !widget.isColumn,
       showBorder: widget.attachmentsId.length > 1,
       showMature: _showMature,
       autoload: widget.autoload,
@@ -142,6 +147,43 @@ class _AttachmentListState extends State<AttachmentList> {
       );
     }
 
+    if (widget.isColumn) {
+      var idx = 0;
+      const radius = BorderRadius.all(Radius.circular(8));
+      return Wrap(
+        spacing: 8,
+        runSpacing: 8,
+        children: widget.attachmentsId.map((x) {
+          final element = _attachmentsMeta[idx];
+          idx++;
+          if (element == null) return const SizedBox();
+          double ratio = element.metadata!['ratio']?.toDouble() ?? 16 / 9;
+          return Container(
+            constraints: BoxConstraints(
+              maxWidth: widget.columnMaxWidth,
+              maxHeight: 640,
+            ),
+            child: AspectRatio(
+              aspectRatio: ratio,
+              child: Container(
+                decoration: BoxDecoration(
+                  border: Border.all(
+                    color: Theme.of(context).dividerColor,
+                    width: 1,
+                  ),
+                  borderRadius: radius,
+                ),
+                child: ClipRRect(
+                  borderRadius: radius,
+                  child: _buildEntry(element, idx),
+                ),
+              ),
+            ),
+          );
+        }).toList(),
+      );
+    }
+
     final isNotPureImage = _attachmentsMeta.any(
       (x) => x?.mimetype.split('/').firstOrNull != 'image',
     );
@@ -153,7 +195,7 @@ class _AttachmentListState extends State<AttachmentList> {
         physics: const NeverScrollableScrollPhysics(),
         shrinkWrap: true,
         gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-          crossAxisCount: min(3, widget.attachmentsId.length),
+          crossAxisCount: math.min(3, widget.attachmentsId.length),
           mainAxisSpacing: 8.0,
           crossAxisSpacing: 8.0,
         ),
@@ -213,6 +255,7 @@ class AttachmentListEntry extends StatelessWidget {
   final Attachment? item;
   final String? badgeContent;
   final double? width;
+  final double? height;
   final bool showBorder;
   final bool showBadge;
   final bool showMature;
@@ -227,6 +270,7 @@ class AttachmentListEntry extends StatelessWidget {
     this.item,
     this.badgeContent,
     this.width,
+    this.height,
     this.showBorder = false,
     this.showBadge = false,
     this.showMature = false,
@@ -251,6 +295,7 @@ class AttachmentListEntry extends StatelessWidget {
     return GestureDetector(
       child: Container(
         width: width ?? MediaQuery.of(context).size.width,
+        height: height,
         decoration: BoxDecoration(
           border: showBorder
               ? Border.symmetric(

lib/widgets/chat/chat_event.dart

@@ -75,7 +75,7 @@ class ChatEvent extends StatelessWidget {
         key: Key('m${item.uuid}attachments'),
         parentId: item.uuid,
         attachmentsId: attachments,
-        viewport: 1,
+        isColumn: true,
       ),
     );
   }
@@ -189,7 +189,7 @@ class ChatEvent extends StatelessWidget {
             ],
           ).paddingOnly(right: 12),
           _buildAttachment(context, isMinimal: isContentPreviewing)
-              .paddingOnly(left: isContentPreviewing ? 12 : 0),
+              .paddingOnly(left: isContentPreviewing ? 12 : 56),
         ],
       );
     } else if (isQuote) {
@@ -221,8 +221,7 @@ class ChatEvent extends StatelessWidget {
                     ],
                   ),
                   _buildContent().paddingOnly(left: 0.5),
-                  _buildAttachment(context, isMinimal: true)
-                      .paddingOnly(left: 0),
+                  _buildAttachment(context, isMinimal: true),
                 ],
               ),
             ),
@@ -284,7 +283,7 @@ class ChatEvent extends StatelessWidget {
               ),
             ],
           ).paddingSymmetric(horizontal: 12),
-          _buildAttachment(context),
+          _buildAttachment(context).paddingOnly(left: 56),
         ],
       );
     }

lib/widgets/posts/post_item.dart

@@ -289,6 +289,35 @@ class _PostItemState extends State<PostItem> {
     );
   }
 
+  Widget _buildAttachments() {
+    final List<String> attachments = item.body['attachments'] is List
+        ? List.from(item.body['attachments']?.whereType<String>())
+        : List.empty();
+
+    if (attachments.length > 3) {
+      return AttachmentList(
+        parentId: widget.item.id.toString(),
+        attachmentsId: attachments,
+        autoload: true,
+        isGrid: true,
+      ).paddingOnly(left: 36, top: 4, bottom: 4);
+    } else if (attachments.length > 1) {
+      return AttachmentList(
+        parentId: widget.item.id.toString(),
+        attachmentsId: attachments,
+        autoload: true,
+        isColumn: true,
+      ).paddingOnly(left: 60, right: 24);
+    } else {
+      return AttachmentList(
+        flatMaxHeight: MediaQuery.of(context).size.width,
+        parentId: widget.item.id.toString(),
+        attachmentsId: attachments,
+        autoload: true,
+      );
+    }
+  }
+
   double _contentHeight = 0;
 
   @override
@@ -467,17 +496,11 @@ class _PostItemState extends State<PostItem> {
             ],
           ).paddingOnly(
             top: 10,
-            bottom: hasAttachment ? 10 : 0,
+            bottom: attachments.length == 1 ? 10 : 0,
             right: 16,
             left: 16,
           ),
-          AttachmentList(
-            flatMaxHeight: MediaQuery.of(context).size.width,
-            parentId: widget.item.id.toString(),
-            attachmentsId: attachments,
-            autoload: true,
-            isGrid: attachments.length > 1,
-          ),
+          _buildAttachments(),
           if (widget.isShowReply || widget.isReactable)
             PostQuickAction(
               isShowReply: widget.isShowReply,
@@ -490,8 +513,8 @@ class _PostItemState extends State<PostItem> {
                 });
               },
             ).paddingOnly(
-              top: hasAttachment ? 10 : 6,
-              left: hasAttachment ? 24 : 60,
+              top: attachments.length == 1 ? 10 : 6,
+              left: attachments.length == 1 ? 24 : 60,
               right: 16,
               bottom: 10,
             )