Improved implementation of border of AlbumListItem + minor layout change in CreateCollecitonSheet

lib/ui/components/album_list_item_widget.dart

@@ -22,99 +22,105 @@ class AlbumListItemWidget extends StatelessWidget {
     final textTheme = getEnteTextTheme(context);
     final colorScheme = getEnteColorScheme(context);
     const sideOfThumbnail = 60.0;
-    return Stack(
-      alignment: Alignment.center,
-      children: [
-        Row(
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        return Stack(
+          alignment: Alignment.center,
           children: [
-            ClipRRect(
-              borderRadius: const BorderRadius.horizontal(
-                left: Radius.circular(4),
-              ),
-              child: SizedBox(
-                height: sideOfThumbnail,
-                width: sideOfThumbnail,
-                key: Key("collection_item:" + (item.thumbnail?.tag ?? "")),
-                child: isNew
-                    ? Icon(
-                        Icons.add_outlined,
-                        color: colorScheme.strokeMuted,
-                      )
-                    : item.thumbnail != null
-                        ? ThumbnailWidget(
-                            item.thumbnail,
-                            showFavForAlbumOnly: true,
+            Row(
+              children: [
+                ClipRRect(
+                  borderRadius: const BorderRadius.horizontal(
+                    left: Radius.circular(4),
+                  ),
+                  child: SizedBox(
+                    height: sideOfThumbnail,
+                    width: sideOfThumbnail,
+                    key: Key("collection_item:" + (item.thumbnail?.tag ?? "")),
+                    child: isNew
+                        ? Icon(
+                            Icons.add_outlined,
+                            color: colorScheme.strokeMuted,
                           )
-                        : const NoThumbnailWidget(),
-              ),
-            ),
-            Padding(
-              padding: const EdgeInsets.only(left: 12),
-              child: isNew
-                  ? Text(
-                      "New album",
-                      style:
-                          textTheme.body.copyWith(color: colorScheme.textMuted),
-                    )
-                  : Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        Text(item.collection.collectionName),
-                        FutureBuilder<int>(
-                          future: FilesDB.instance
-                              .collectionFileCount(item.collection.id),
-                          builder: (context, snapshot) {
-                            if (snapshot.hasData) {
-                              final text =
-                                  snapshot.data == 1 ? " memory" : " memories";
-                              return Text(
-                                snapshot.data.toString() + text,
-                                style: textTheme.small.copyWith(
-                                  color: colorScheme.textMuted,
-                                ),
-                              );
-                            } else {
-                              if (snapshot.hasError) {
-                                logger.severe(
-                                  "Failed to fetch file count of collection id ${item.collection.id}",
-                                );
-                              }
-                              return Text(
-                                "",
-                                style: textTheme.small.copyWith(
-                                  color: colorScheme.textMuted,
-                                ),
-                              );
-                            }
-                          },
+                        : item.thumbnail != null
+                            ? ThumbnailWidget(
+                                item.thumbnail,
+                                showFavForAlbumOnly: true,
+                              )
+                            : const NoThumbnailWidget(),
+                  ),
+                ),
+                Padding(
+                  padding: const EdgeInsets.only(left: 12),
+                  child: isNew
+                      ? Text(
+                          "New album",
+                          style: textTheme.body
+                              .copyWith(color: colorScheme.textMuted),
+                        )
+                      : Column(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            Text(item.collection.collectionName),
+                            FutureBuilder<int>(
+                              future: FilesDB.instance
+                                  .collectionFileCount(item.collection.id),
+                              builder: (context, snapshot) {
+                                if (snapshot.hasData) {
+                                  final text = snapshot.data == 1
+                                      ? " memory"
+                                      : " memories";
+                                  return Text(
+                                    snapshot.data.toString() + text,
+                                    style: textTheme.small.copyWith(
+                                      color: colorScheme.textMuted,
+                                    ),
+                                  );
+                                } else {
+                                  if (snapshot.hasError) {
+                                    logger.severe(
+                                      "Failed to fetch file count of collection id ${item.collection.id}",
+                                    );
+                                  }
+                                  return Text(
+                                    "",
+                                    style: textTheme.small.copyWith(
+                                      color: colorScheme.textMuted,
+                                    ),
+                                  );
+                                }
+                              },
+                            ),
+                          ],
                         ),
-                      ],
-                    ),
+                ),
+              ],
             ),
-          ],
-        ),
-        IgnorePointer(
-          child: DottedBorder(
-            dashPattern: isNew ? [4] : [300, 0],
-            color: colorScheme.strokeFainter,
-            strokeWidth: 1,
-            padding: const EdgeInsets.all(0),
-            borderType: BorderType.RRect,
-            radius: const Radius.circular(4),
-            child: SizedBox(
-              //Have to decrease the height and width by 1 pt as the stroke
-              //dotted border gives is of strokeAlign.center, so 0.5 inside and
-              // outside. Here for the row, stroke should be inside so we
-              //decrease the size of this sizedBox by 1 (so it shrinks 0.5 from
-              //every side) so that the strokeAlign.center of this sizedBox
-              //looks like a strokeAlign.inside in the row.
-              height: sideOfThumbnail - 1,
-              //32 is to account for padding of 16pts on both sides
-              width: MediaQuery.of(context).size.width - 33,
+            IgnorePointer(
+              child: DottedBorder(
+                dashPattern: isNew ? [4] : [300, 0],
+                color: colorScheme.strokeFainter,
+                strokeWidth: 1,
+                padding: const EdgeInsets.all(0),
+                borderType: BorderType.RRect,
+                radius: const Radius.circular(4),
+                child: SizedBox(
+                  //Have to decrease the height and width by 1 pt as the stroke
+                  //dotted border gives is of strokeAlign.center, so 0.5 inside and
+                  // outside. Here for the row, stroke should be inside so we
+                  //decrease the size of this sizedBox by 1 (so it shrinks 0.5 from
+                  //every side) so that the strokeAlign.center of this sizedBox
+                  //looks like a strokeAlign.inside in the row.
+                  height: sideOfThumbnail - 1,
+                  //This width will work for this only if the row widget takes up the
+                  //full size it's parent (stack).
+                  width: constraints.maxWidth - 1,
+                ),
+              ),
             ),
-          ),
-        ),
-      ],
+          ],
+        );
+      },
     );
   }
 }

lib/ui/create_collection_sheet.dart

@@ -130,7 +130,7 @@ class _CreateCollectionSheetState extends State<CreateCollectionSheet> {
                           child: Scrollbar(
                             radius: const Radius.circular(2),
                             child: Padding(
-                              padding: const EdgeInsets.only(right: 8),
+                              padding: const EdgeInsets.only(right: 12),
                               child: FutureBuilder(
                                 future: _getCollectionsWithThumbnail(),
                                 builder: (context, snapshot) {