Created separate components for NewAlbumListItem and AlbumListItem

lib/ui/components/album_list_item_widget.dart

@@ -1,4 +1,3 @@
-import 'package:dotted_border/dotted_border.dart';
 import 'package:flutter/material.dart';
 import 'package:logging/logging.dart';
 import 'package:photos/db/files_db.dart';
@@ -7,12 +6,11 @@ import 'package:photos/theme/ente_theme.dart';
 import 'package:photos/ui/viewer/file/no_thumbnail_widget.dart';
 import 'package:photos/ui/viewer/file/thumbnail_widget.dart';
 
+///https://www.figma.com/file/SYtMyLBs5SAOkTbfMMzhqt/ente-Visual-Design?node-id=7480%3A33462&t=H5AvR79OYDnB9ekw-4
 class AlbumListItemWidget extends StatelessWidget {
   final CollectionWithThumbnail? item;
-  final bool isNew;
   const AlbumListItemWidget({
     this.item,
-    this.isNew = false,
     super.key,
   });
 
@@ -35,92 +33,69 @@ class AlbumListItemWidget extends StatelessWidget {
                   child: SizedBox(
                     height: sideOfThumbnail,
                     width: sideOfThumbnail,
-                    key: Key("collection_item:" + (item?.thumbnail?.tag ?? "")),
-                    child: isNew
-                        ? Icon(
-                            Icons.add_outlined,
-                            color: colorScheme.strokeMuted,
+                    child: item?.thumbnail != null
+                        ? ThumbnailWidget(
+                            item!.thumbnail,
+                            showFavForAlbumOnly: true,
                           )
-                        : item?.thumbnail != null
-                            ? ThumbnailWidget(
-                                item!.thumbnail,
-                                showFavForAlbumOnly: true,
-                              )
-                            : const NoThumbnailWidget(
-                                hasBorder: false,
-                              ),
+                        : const NoThumbnailWidget(
+                            hasBorder: false,
+                          ),
                   ),
                 ),
                 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 ?? ""),
-                            item != null
-                                ? FutureBuilder<int>(
-                                    future:
-                                        FilesDB.instance.collectionFileCount(
-                                      item!.collection.id,
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(item?.collection.collectionName ?? ""),
+                      item != null
+                          ? 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("AlbumListItemWidget").severe(
+                                      "Failed to fetch file count of collection id ${item!.collection.id}",
+                                    );
+                                  }
+                                  return Text(
+                                    "",
+                                    style: textTheme.small.copyWith(
+                                      color: colorScheme.textMuted,
                                     ),
-                                    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("AlbumListItemWidget").severe(
-                                            "Failed to fetch file count of collection id ${item!.collection.id}",
-                                          );
-                                        }
-                                        return Text(
-                                          "",
-                                          style: textTheme.small.copyWith(
-                                            color: colorScheme.textMuted,
-                                          ),
-                                        );
-                                      }
-                                    },
-                                  )
-                                : throw "CollectionWithThumbnail item cannot be null",
-                          ],
-                        ),
+                                  );
+                                }
+                              },
+                            )
+                          : throw "CollectionWithThumbnail item cannot be null",
+                    ],
+                  ),
                 ),
               ],
             ),
             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,
+              child: Container(
+                decoration: BoxDecoration(
+                  borderRadius: const BorderRadius.all(Radius.circular(4)),
+                  border: Border.all(
+                    color: colorScheme.strokeFainter,
+                  ),
                 ),
+                height: sideOfThumbnail,
+                width: constraints.maxWidth,
               ),
             ),
           ],

lib/ui/components/new_album_list_widget.dart

@@ -0,0 +1,73 @@
+import 'package:dotted_border/dotted_border.dart';
+import 'package:flutter/material.dart';
+import 'package:photos/theme/ente_theme.dart';
+
+///https://www.figma.com/file/SYtMyLBs5SAOkTbfMMzhqt/ente-Visual-Design?node-id=10854%3A57947&t=H5AvR79OYDnB9ekw-4
+class NewAlbumListItemWidget extends StatelessWidget {
+  const NewAlbumListItemWidget({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final textTheme = getEnteTextTheme(context);
+    final colorScheme = getEnteColorScheme(context);
+    const sideOfThumbnail = 60.0;
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        return Stack(
+          alignment: Alignment.center,
+          children: [
+            Row(
+              children: [
+                ClipRRect(
+                  borderRadius: const BorderRadius.horizontal(
+                    left: Radius.circular(4),
+                  ),
+                  child: SizedBox(
+                    height: sideOfThumbnail,
+                    width: sideOfThumbnail,
+                    child: Icon(
+                      Icons.add_outlined,
+                      color: colorScheme.strokeMuted,
+                    ),
+                  ),
+                ),
+                Padding(
+                  padding: const EdgeInsets.only(left: 12),
+                  child: Text(
+                    "New album",
+                    style:
+                        textTheme.body.copyWith(color: colorScheme.textMuted),
+                  ),
+                ),
+              ],
+            ),
+            IgnorePointer(
+              child: DottedBorder(
+                dashPattern: const [4],
+                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

@@ -19,6 +19,7 @@ import 'package:photos/ui/components/album_list_item_widget.dart';
 import 'package:photos/ui/components/bottom_of_title_bar_widget.dart';
 import 'package:photos/ui/components/button_widget.dart';
 import 'package:photos/ui/components/models/button_type.dart';
+import 'package:photos/ui/components/new_album_list_widget.dart';
 import 'package:photos/ui/components/title_bar_title_widget.dart';
 import 'package:photos/ui/viewer/gallery/collection_page.dart';
 import 'package:photos/utils/dialog_util.dart';
@@ -154,9 +155,8 @@ class _CreateCollectionSheetState extends State<CreateCollectionSheet> {
                                               _showNameAlbumDialog();
                                             },
                                             behavior: HitTestBehavior.opaque,
-                                            child: const AlbumListItemWidget(
-                                              isNew: true,
-                                            ),
+                                            child:
+                                                const NewAlbumListItemWidget(),
                                           );
                                         }
                                         final item = collectionsWithThumbnail[