Minor refactor and UI changes

lib/ui/collections/collection_item_widget.dart

@@ -1,8 +1,7 @@
-import 'dart:math';
-
 import 'package:flutter/material.dart';
 import 'package:photos/db/files_db.dart';
 import 'package:photos/models/collection_items.dart';
+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';
 import 'package:photos/ui/viewer/gallery/collection_page.dart';
@@ -10,23 +9,19 @@ import 'package:photos/utils/navigation_util.dart';
 
 class CollectionItem extends StatelessWidget {
   final CollectionWithThumbnail c;
+  final double sideOfThumbnail;
+
   CollectionItem(
-    this.c, {
+    this.c,
+    this.sideOfThumbnail, {
     Key? key,
   }) : super(key: Key(c.collection.id.toString()));
 
   @override
   Widget build(BuildContext context) {
-    const double horizontalPaddingOfGridRow = 16;
-    const double crossAxisSpacingOfGrid = 9;
-    final Size size = MediaQuery.of(context).size;
-    final int albumsCountInOneRow = max(size.width ~/ 220.0, 2);
-    final double totalWhiteSpaceOfRow = (horizontalPaddingOfGridRow * 2) +
-        (albumsCountInOneRow - 1) * crossAxisSpacingOfGrid;
-    final TextStyle albumTitleTextStyle =
-        Theme.of(context).textTheme.subtitle1!.copyWith(fontSize: 14);
-    final double sideOfThumbnail = (size.width / albumsCountInOneRow) -
-        (totalWhiteSpaceOfRow / albumsCountInOneRow);
+    final enteColorScheme = getEnteColorScheme(context);
+    final enteTextTheme = getEnteTextTheme(context);
+
     final String heroTag =
         "collection" + (c.thumbnail?.tag ?? c.collection.id.toString());
     return GestureDetector(
@@ -50,34 +45,31 @@ class CollectionItem extends StatelessWidget {
               ),
             ),
           ),
-          const SizedBox(height: 4),
-          Row(
+          Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
             children: [
-              Container(
-                constraints: BoxConstraints(maxWidth: sideOfThumbnail - 40),
-                child: Text(
-                  c.collection.name ?? "Unnamed",
-                  style: albumTitleTextStyle,
-                  overflow: TextOverflow.ellipsis,
-                ),
+              Text(
+                c.collection.name ?? "Unnamed",
+                style: enteTextTheme.small,
+                overflow: TextOverflow.ellipsis,
               ),
               FutureBuilder<int>(
                 future: FilesDB.instance.collectionFileCount(c.collection.id),
                 builder: (context, snapshot) {
                   if (snapshot.hasData && snapshot.data! > 0) {
-                    return RichText(
-                      text: TextSpan(
-                        style: albumTitleTextStyle.copyWith(
-                          color: albumTitleTextStyle.color!.withOpacity(0.5),
-                        ),
-                        children: [
-                          const TextSpan(text: "  \u2022  "),
-                          TextSpan(text: snapshot.data.toString()),
-                        ],
+                    return Text(
+                      snapshot.data.toString(),
+                      style: enteTextTheme.small.copyWith(
+                        color: enteColorScheme.textMuted,
                       ),
                     );
                   } else {
-                    return const SizedBox.shrink();
+                    return Text(
+                      "",
+                      style: enteTextTheme.small.copyWith(
+                        color: enteColorScheme.textMuted,
+                      ),
+                    );
                   }
                 },
               ),

lib/ui/collections/remote_collections_grid_view_widget.dart

@@ -8,6 +8,15 @@ import 'package:photos/ui/collections/collection_item_widget.dart';
 import 'package:photos/ui/collections/create_new_album_widget.dart';
 
 class RemoteCollectionsGridViewWidget extends StatelessWidget {
+  /*
+  Aspect ratio 1:1 Max width 224 Fixed gap 8
+  Width changes dynamically with screen width such that we can fit 2 in one row.
+  Keep the width integral (center the albums to distribute excess pixels)
+   */
+  static const maxThumbnailWidth = 224.0;
+  static const fixedGapBetweenAlbum = 8.0;
+  static const minGapForHorizontalPadding = 8.0;
+
   final List<CollectionWithThumbnail> collections;
 
   const RemoteCollectionsGridViewWidget(
@@ -17,13 +26,18 @@ class RemoteCollectionsGridViewWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    const double horizontalPaddingOfGridRow = 16;
-    const double crossAxisSpacingOfGrid = 9;
-    final Size size = MediaQuery.of(context).size;
-    final int albumsCountInOneRow = max(size.width ~/ 220.0, 2);
-    final double sideOfThumbnail = (size.width / albumsCountInOneRow) -
-        horizontalPaddingOfGridRow -
-        ((crossAxisSpacingOfGrid / 2) * (albumsCountInOneRow - 1));
+    final double screenWidth = MediaQuery.of(context).size.width;
+    final int albumsCountInOneRow = max(screenWidth ~/ maxThumbnailWidth, 2);
+    final double gapBetweenAlbums =
+        (albumsCountInOneRow - 1) * fixedGapBetweenAlbum;
+    // gapOnSizeOfAlbums will be
+    final double gapOnSizeOfAlbums = minGapForHorizontalPadding +
+        (screenWidth - gapBetweenAlbums - (2 * minGapForHorizontalPadding)) %
+            albumsCountInOneRow;
+
+    final double sideOfThumbnail =
+        (screenWidth - gapOnSizeOfAlbums - gapBetweenAlbums) /
+            albumsCountInOneRow;
 
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 16),
@@ -33,7 +47,7 @@ class RemoteCollectionsGridViewWidget extends StatelessWidget {
         // to disable GridView's scrolling
         itemBuilder: (context, index) {
           if (index < collections.length) {
-            return CollectionItem(collections[index]);
+            return CollectionItem(collections[index], sideOfThumbnail);
           } else {
             return const CreateNewAlbumWidget();
           }
@@ -42,9 +56,9 @@ class RemoteCollectionsGridViewWidget extends StatelessWidget {
         // To include the + button
         gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
           crossAxisCount: albumsCountInOneRow,
-          mainAxisSpacing: 12,
-          crossAxisSpacing: crossAxisSpacingOfGrid,
-          childAspectRatio: sideOfThumbnail / (sideOfThumbnail + 24),
+          mainAxisSpacing: 4,
+          crossAxisSpacing: gapBetweenAlbums,
+          childAspectRatio: sideOfThumbnail / (sideOfThumbnail + 50),
         ), //24 is height of album title
       ),
     );