redesigned 'albums' screen

lib/ui/collections_gallery_widget.dart

@@ -7,6 +7,7 @@ import 'package:logging/logging.dart';
 import 'package:photos/core/configuration.dart';
 import 'package:photos/core/event_bus.dart';
 import 'package:photos/db/files_db.dart';
+import 'package:photos/ente_theme_data.dart';
 import 'package:photos/events/backup_folders_updated_event.dart';
 import 'package:photos/events/collection_updated_event.dart';
 import 'package:photos/events/local_photos_updated_event.dart';
@@ -104,52 +105,68 @@ class _CollectionsGalleryWidgetState extends State<CollectionsGalleryWidget>
         collectionsWithThumbnail.add(CollectionWithThumbnail(c, file));
       }
     }
-    collectionsWithThumbnail.sort((first, second) {
-      if (sortKey == AlbumSortKey.albumName) {
-        // alphabetical ASC order
-        return first.collection.name.compareTo(second.collection.name);
-      } else if (sortKey == AlbumSortKey.recentPhoto) {
-        return second.thumbnail.creationTime
-            .compareTo(first.thumbnail.creationTime);
-      } else {
-        return second.collection.updationTime
-            .compareTo(first.collection.updationTime);
-      }
-    });
+    collectionsWithThumbnail.sort(
+      (first, second) {
+        if (sortKey == AlbumSortKey.albumName) {
+          // alphabetical ASC order
+          return first.collection.name.compareTo(second.collection.name);
+        } else if (sortKey == AlbumSortKey.newestPhoto) {
+          return second.thumbnail.creationTime
+              .compareTo(first.thumbnail.creationTime);
+        } else if (sortKey == AlbumSortKey.oldestPhoto) {
+          return first.thumbnail.creationTime
+              .compareTo(second.thumbnail.creationTime);
+        } else {
+          return second.collection.updationTime
+              .compareTo(first.collection.updationTime);
+        }
+      },
+    );
     return CollectionItems(folders, collectionsWithThumbnail);
   }
 
   Widget _getCollectionsGalleryWidget(CollectionItems items) {
+    TextStyle trashAndHiddenTextStyle = Theme.of(context).textTheme.subtitle1;
+    final double sideOfThumbnail =
+        (MediaQuery.of(context).size.width / 2) - 18.5;
     return SingleChildScrollView(
       child: Container(
         margin: const EdgeInsets.only(bottom: 50),
         child: Column(
           children: [
             Padding(padding: EdgeInsets.all(6)),
-            SectionTitle("on device"),
+            SectionTitle("On device"),
             Padding(padding: EdgeInsets.all(8)),
             items.folders.isEmpty
                 ? Padding(
                     padding: const EdgeInsets.all(22),
-                    child: nothingToSeeHere,
+                    child: nothingToSeeHere(
+                        textColor:
+                            Theme.of(context).colorScheme.defaultTextColor),
                   )
-                : SizedBox(
-                    height: 170,
-                    child: Align(
-                      alignment: Alignment.centerLeft,
-                      child: items.folders.isEmpty
-                          ? nothingToSeeHere
-                          : ListView.builder(
-                              shrinkWrap: true,
-                              scrollDirection: Axis.horizontal,
-                              padding: EdgeInsets.fromLTRB(12, 0, 12, 0),
-                              physics:
-                                  ScrollPhysics(), // to disable GridView's scrolling
-                              itemBuilder: (context, index) {
-                                return DeviceFolderIcon(items.folders[index]);
-                              },
-                              itemCount: items.folders.length,
-                            ),
+                : Padding(
+                    padding: const EdgeInsets.symmetric(horizontal: 8),
+                    child: SizedBox(
+                      height: 170,
+                      child: Align(
+                        alignment: Alignment.centerLeft,
+                        child: items.folders.isEmpty
+                            ? nothingToSeeHere(
+                                textColor: Theme.of(context)
+                                    .colorScheme
+                                    .defaultTextColor)
+                            : ListView.builder(
+                                shrinkWrap: true,
+                                scrollDirection: Axis.horizontal,
+                                padding: EdgeInsets.fromLTRB(6, 0, 6, 0),
+                                physics:
+                                    ScrollPhysics(), // to disable GridView's scrolling
+                                itemBuilder: (context, index) {
+                                  return DeviceFolderIcon(items.folders[index]);
+                                },
+                                itemCount: items.folders.length,
+                              ),
+                      ),
                     ),
                   ),
             Padding(padding: EdgeInsets.all(4)),
@@ -158,115 +175,170 @@ class _CollectionsGalleryWidgetState extends State<CollectionsGalleryWidget>
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               crossAxisAlignment: CrossAxisAlignment.end,
               children: [
-                SectionTitle("on ente"),
+                SectionTitle("On ente"),
                 _sortMenu(),
               ],
             ),
             Padding(padding: EdgeInsets.all(12)),
             Configuration.instance.hasConfiguredAccount()
-                ? GridView.builder(
-                    shrinkWrap: true,
-                    padding: EdgeInsets.fromLTRB(0, 0, 12, 0),
-                    physics: ScrollPhysics(), // to disable GridView's scrolling
-                    itemBuilder: (context, index) {
-                      return _buildCollection(
-                          context, items.collections, index);
-                    },
-                    itemCount:
-                        items.collections.length + 1, // To include the + button
-                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-                      crossAxisCount: 2,
-                      mainAxisSpacing: 12,
+                ? Padding(
+                    padding: const EdgeInsets.symmetric(horizontal: 16),
+                    child: GridView.builder(
+                      shrinkWrap: true,
+                      physics:
+                          ScrollPhysics(), // to disable GridView's scrolling
+                      itemBuilder: (context, index) {
+                        return _buildCollection(
+                            context, items.collections, index);
+                      },
+                      itemCount: items.collections.length +
+                          1, // To include the + button
+                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                          crossAxisCount: 2,
+                          mainAxisSpacing: 12,
+                          crossAxisSpacing: 5,
+                          childAspectRatio:
+                              sideOfThumbnail / (sideOfThumbnail + 24)),
                     ),
                   )
-                : nothingToSeeHere,
+                : nothingToSeeHere(
+                    textColor: Theme.of(context).colorScheme.defaultTextColor),
+            SizedBox(height: 20),
             Divider(),
             Padding(padding: EdgeInsets.all(8)),
-            Row(
-              mainAxisAlignment: MainAxisAlignment.center,
-              crossAxisAlignment: CrossAxisAlignment.center,
-              mainAxisSize: MainAxisSize.min,
-              children: [
-                OutlinedButton(
-                  style: OutlinedButton.styleFrom(
-                    shape: RoundedRectangleBorder(
-                      borderRadius: BorderRadius.circular(5),
-                    ),
-                    padding: EdgeInsets.fromLTRB(20, 10, 20, 10),
-                    side: BorderSide(
-                      width: 2,
-                      color: Colors.white12,
+            Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 16),
+              child: Column(
+                children: [
+                  OutlinedButton(
+                    style: OutlinedButton.styleFrom(
+                      backgroundColor: Theme.of(context).backgroundColor,
+                      shape: RoundedRectangleBorder(
+                        borderRadius: BorderRadius.circular(8),
+                      ),
+                      padding: EdgeInsets.all(0),
+                      side: BorderSide(
+                        width: 0.5,
+                        color:
+                            Theme.of(context).iconTheme.color.withOpacity(0.24),
+                      ),
                     ),
-                  ),
-                  child: SizedBox(
-                    width: 100,
-                    child: Row(
-                      mainAxisAlignment: MainAxisAlignment.center,
-                      crossAxisAlignment: CrossAxisAlignment.center,
-                      mainAxisSize: MainAxisSize.min,
-                      children: const [
-                        Icon(
-                          Icons.archive_outlined,
-                        ),
-                        Padding(padding: EdgeInsets.all(6)),
-                        Text(
-                          "archive",
-                          style: TextStyle(
-                            color: Colors.white,
-                          ),
+                    child: Container(
+                      height: 48,
+                      width: double.infinity,
+                      child: Padding(
+                        padding: const EdgeInsets.symmetric(horizontal: 16),
+                        child: Row(
+                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                          children: [
+                            Row(
+                              children: [
+                                Icon(
+                                  Icons.delete,
+                                  color: Theme.of(context).iconTheme.color,
+                                ),
+                                Padding(padding: EdgeInsets.all(6)),
+                                RichText(
+                                    text: TextSpan(
+                                        style: trashAndHiddenTextStyle.copyWith(
+                                          color: trashAndHiddenTextStyle.color
+                                              .withOpacity(0.5),
+                                        ),
+                                        children: [
+                                      TextSpan(
+                                          text: "Trash",
+                                          style: Theme.of(context)
+                                              .textTheme
+                                              .subtitle1),
+                                      TextSpan(text: "  \u2022  "),
+                                      TextSpan(
+                                          text:
+                                              "23"), //need to query in db and bring this value
+                                    ])),
+                              ],
+                            ),
+                            Icon(
+                              Icons.chevron_right,
+                              color: Theme.of(context).iconTheme.color,
+                            ),
+                          ],
                         ),
-                      ],
+                      ),
                     ),
+                    onPressed: () async {
+                      routeToPage(
+                        context,
+                        TrashPage(),
+                      );
+                    },
                   ),
-                  onPressed: () async {
-                    routeToPage(
-                      context,
-                      ArchivePage(),
-                    );
-                  },
-                ),
-                Padding(padding: EdgeInsets.fromLTRB(18, 0, 18, 0)),
-                OutlinedButton(
-                  style: OutlinedButton.styleFrom(
-                    shape: RoundedRectangleBorder(
-                      borderRadius: BorderRadius.circular(5),
-                    ),
-                    padding: EdgeInsets.fromLTRB(20, 10, 20, 10),
-                    side: BorderSide(
-                      width: 2,
-                      color: Colors.white12,
+                  SizedBox(height: 12),
+                  OutlinedButton(
+                    style: OutlinedButton.styleFrom(
+                      backgroundColor: Theme.of(context).backgroundColor,
+                      shape: RoundedRectangleBorder(
+                        borderRadius: BorderRadius.circular(8),
+                      ),
+                      padding: EdgeInsets.all(0),
+                      side: BorderSide(
+                        width: 0.5,
+                        color:
+                            Theme.of(context).iconTheme.color.withOpacity(0.24),
+                      ),
                     ),
-                  ),
-                  child: SizedBox(
-                    width: 100,
-                    child: Row(
-                      mainAxisAlignment: MainAxisAlignment.center,
-                      crossAxisAlignment: CrossAxisAlignment.center,
-                      mainAxisSize: MainAxisSize.min,
-                      children: const [
-                        Icon(
-                          Icons.delete_outline_sharp,
-                        ),
-                        Padding(padding: EdgeInsets.all(6)),
-                        Text(
-                          "trash",
-                          style: TextStyle(
-                            color: Colors.white,
-                          ),
+                    child: Container(
+                      height: 48,
+                      width: double.infinity,
+                      child: Padding(
+                        padding: const EdgeInsets.symmetric(horizontal: 16),
+                        child: Row(
+                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                          children: [
+                            Row(
+                              children: [
+                                Icon(
+                                  Icons.visibility_off,
+                                  color: Theme.of(context).iconTheme.color,
+                                ),
+                                Padding(padding: EdgeInsets.all(6)),
+                                RichText(
+                                    text: TextSpan(
+                                        style: trashAndHiddenTextStyle.copyWith(
+                                          color: trashAndHiddenTextStyle.color
+                                              .withOpacity(0.5),
+                                        ),
+                                        children: [
+                                      TextSpan(
+                                          text: "Hidden",
+                                          style: Theme.of(context)
+                                              .textTheme
+                                              .subtitle1),
+                                      TextSpan(text: "  \u2022  "),
+                                      TextSpan(
+                                          text:
+                                              "12"), //need to query in db and bring this value
+                                    ])),
+                              ],
+                            ),
+                            Icon(
+                              Icons.chevron_right,
+                              color: Theme.of(context).iconTheme.color,
+                            ),
+                          ],
                         ),
-                      ],
+                      ),
                     ),
+                    onPressed: () async {
+                      routeToPage(
+                        context,
+                        ArchivePage(),
+                      );
+                    },
                   ),
-                  onPressed: () async {
-                    routeToPage(
-                      context,
-                      TrashPage(),
-                    );
-                  },
-                ),
-              ],
+                ],
+              ),
             ),
-            Padding(padding: EdgeInsets.fromLTRB(12, 12, 12, 72)),
+            Padding(padding: EdgeInsets.fromLTRB(12, 12, 12, 36)),
           ],
         ),
       ),
@@ -278,41 +350,48 @@ class _CollectionsGalleryWidgetState extends State<CollectionsGalleryWidget>
       String text = key.toString();
       switch (key) {
         case AlbumSortKey.albumName:
-          text = "album name";
+          text = "Name";
           break;
-        case AlbumSortKey.lastUpdated:
-          text = "last updated";
+        case AlbumSortKey.newestPhoto:
+          text = "Newest";
           break;
-        case AlbumSortKey.recentPhoto:
-          text = "recent photo";
+        case AlbumSortKey.oldestPhoto:
+          text = "Oldest";
           break;
+        case AlbumSortKey.lastUpdated:
+          text = "Last updated";
       }
-      return Text(
-        text,
-        style: TextStyle(
-          fontWeight: FontWeight.bold,
-          fontSize: 13,
-          color: Theme.of(context).colorScheme.onSurface.withOpacity(0.6),
-        ),
-      );
+      return Text(text,
+          style: Theme.of(context).textTheme.subtitle1.copyWith(
+              fontSize: 14,
+              color: Theme.of(context).iconTheme.color.withOpacity(0.7)));
     }
 
     return Padding(
       padding: const EdgeInsets.only(right: 24),
       child: PopupMenuButton(
-        offset: Offset(10, 40),
+        offset: Offset(10, 50),
         initialValue: sortKey?.index ?? 0,
         child: Align(
           child: Row(
             mainAxisAlignment: MainAxisAlignment.end,
             crossAxisAlignment: CrossAxisAlignment.center,
             children: [
-              sortOptionText(sortKey),
-              Padding(padding: EdgeInsets.only(left: 5.0)),
-              Icon(
-                Icons.sort,
-                color: Theme.of(context).buttonColor,
-                size: 20,
+              Padding(
+                padding: EdgeInsets.only(left: 5.0),
+              ),
+              Container(
+                width: 36,
+                height: 36,
+                decoration: BoxDecoration(
+                  color: Theme.of(context).hintColor.withOpacity(0.2),
+                  borderRadius: BorderRadius.circular(18),
+                ),
+                child: Icon(
+                  Icons.sort,
+                  color: Theme.of(context).iconTheme.color,
+                  size: 20,
+                ),
               ),
             ],
           ),
@@ -340,30 +419,40 @@ class _CollectionsGalleryWidgetState extends State<CollectionsGalleryWidget>
       final c = collections[index];
       return CollectionItem(c);
     } else {
-      return Container(
-        padding: EdgeInsets.fromLTRB(28, 0, 28, 58),
-        child: OutlinedButton(
-          style: OutlinedButton.styleFrom(
-            shape: RoundedRectangleBorder(
-              borderRadius: BorderRadius.circular(18.0),
-            ),
-            side: BorderSide(
-              width: 1,
-              color: Theme.of(context).buttonColor.withOpacity(0.4),
-            ),
+      return InkWell(
+        child: Container(
+          margin: EdgeInsets.fromLTRB(30, 30, 30, 54),
+          decoration: BoxDecoration(
+            // gradient: LinearGradient(
+            //     colors: [Colors.white12, Colors.transparent],
+            //     begin: Alignment.topCenter,
+            //     end: Alignment.bottomCenter,
+            //     stops: [0, 0.1]),
+            color: Theme.of(context).backgroundColor,
+            boxShadow: [
+              BoxShadow(
+                  blurRadius: 2,
+                  spreadRadius: 0,
+                  offset: Offset(0, 0),
+                  color: Theme.of(context).iconTheme.color.withOpacity(0.3))
+            ],
+            // border: Border.all(
+            //   color: Theme.of(context).iconTheme.color.withOpacity(0.1),
+            // ),
+            borderRadius: BorderRadius.circular(4),
           ),
           child: Icon(
             Icons.add,
-            color: Theme.of(context).buttonColor.withOpacity(0.7),
+            color: Theme.of(context).iconTheme.color.withOpacity(0.25),
           ),
-          onPressed: () async {
-            await showToast(
-                "long press to select photos and click + to create an album",
-                toastLength: Toast.LENGTH_LONG);
-            Bus.instance.fire(
-                TabChangedEvent(0, TabChangedEventSource.collections_page));
-          },
         ),
+        onTap: () async {
+          await showToast(
+              "long press to select photos and click + to create an album",
+              toastLength: Toast.LENGTH_LONG);
+          Bus.instance
+              .fire(TabChangedEvent(0, TabChangedEventSource.collections_page));
+        },
       );
     }
   }
@@ -419,45 +508,50 @@ class DeviceFolderIcon extends StatelessWidget {
     final isBackedUp =
         Configuration.instance.getPathsToBackUp().contains(folder.path);
     return GestureDetector(
-      child: Container(
-        height: 140,
-        width: 142,
-        padding: const EdgeInsets.all(8.0),
-        child: Column(
-          children: <Widget>[
-            ClipRRect(
-              borderRadius: BorderRadius.circular(18.0),
-              child: SizedBox(
-                child: Hero(
-                  tag: "device_folder:" + folder.path + folder.thumbnail.tag(),
-                  child: Stack(
-                    children: [
-                      ThumbnailWidget(
-                        folder.thumbnail,
-                        shouldShowSyncStatus: false,
-                        key: Key("device_folder:" +
-                            folder.path +
-                            folder.thumbnail.tag()),
-                      ),
-                      isBackedUp ? Container() : kUnsyncedIconOverlay,
-                    ],
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 2),
+        child: Container(
+          height: 140,
+          width: 120,
+          // padding: const EdgeInsets.all(8.0),
+          child: Column(
+            children: <Widget>[
+              ClipRRect(
+                borderRadius: BorderRadius.circular(4),
+                child: SizedBox(
+                  child: Hero(
+                    tag:
+                        "device_folder:" + folder.path + folder.thumbnail.tag(),
+                    child: Stack(
+                      children: [
+                        ThumbnailWidget(
+                          folder.thumbnail,
+                          shouldShowSyncStatus: false,
+                          key: Key("device_folder:" +
+                              folder.path +
+                              folder.thumbnail.tag()),
+                        ),
+                        isBackedUp ? Container() : kUnsyncedIconOverlay,
+                      ],
+                    ),
                   ),
+                  height: 120,
+                  width: 120,
                 ),
-                height: 120,
-                width: 120,
               ),
-            ),
-            Padding(
-              padding: const EdgeInsets.only(top: 10),
-              child: Text(
-                folder.name,
-                style: TextStyle(
-                  fontSize: 12,
+              Padding(
+                padding: const EdgeInsets.only(top: 10),
+                child: Text(
+                  folder.name,
+                  style: Theme.of(context)
+                      .textTheme
+                      .subtitle1
+                      .copyWith(fontSize: 12, fontFamily: "Inter"),
+                  overflow: TextOverflow.ellipsis,
                 ),
-                overflow: TextOverflow.ellipsis,
               ),
-            ),
-          ],
+            ],
+          ),
         ),
       ),
       onTap: () {
@@ -477,32 +571,48 @@ class CollectionItem extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    TextStyle albumTitleTextStyle = Theme.of(context)
+        .textTheme
+        .subtitle1
+        .copyWith(fontSize: 14, fontFamily: "Inter");
+    final double sideOfThumbnail =
+        (MediaQuery.of(context).size.width / 2) - 18.5;
     return GestureDetector(
       child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
         children: <Widget>[
           ClipRRect(
-            borderRadius: BorderRadius.circular(18.0),
+            borderRadius: BorderRadius.circular(4),
             child: SizedBox(
-              child: Hero(
-                  tag: "collection" + c.thumbnail.tag(),
-                  child: ThumbnailWidget(
-                    c.thumbnail,
-                    shouldShowArchiveStatus: c.collection.isArchived(),
-                    key: Key("collection" + c.thumbnail.tag(),),
-                  )),
-              height: 140,
-              width: 140,
-            ),
+                child: Hero(
+                    tag: "collection" + c.thumbnail.tag(),
+                    child: ThumbnailWidget(
+                      c.thumbnail,
+                      shouldShowArchiveStatus: c.collection.isArchived(),
+                      key: Key(
+                        "collection" + c.thumbnail.tag(),
+                      ),
+                    )),
+                height: sideOfThumbnail,
+                width: sideOfThumbnail),
           ),
-          Padding(padding: EdgeInsets.all(4)),
-          Expanded(
-            child: Text(
-              c.collection.name,
-              style: TextStyle(
-                fontSize: 16,
+          SizedBox(height: 4),
+          Row(
+            children: [
+              Container(
+                constraints: BoxConstraints(maxWidth: sideOfThumbnail - 40),
+                child: Text(
+                  c.collection.name,
+                  style: albumTitleTextStyle,
+                  overflow: TextOverflow.ellipsis,
+                ),
               ),
-              overflow: TextOverflow.ellipsis,
-            ),
+              Text(
+                '  \u2022  ' + '23', //need to query in db and bring this value
+                style: albumTitleTextStyle.copyWith(
+                    color: albumTitleTextStyle.color.withOpacity(0.5)),
+              ),
+            ],
           ),
         ],
       ),
@@ -535,12 +645,8 @@ class SectionTitle extends StatelessWidget {
             alignment: alignment,
             child: Text(
               title,
-              style: TextStyle(
-                fontWeight: FontWeight.bold,
-                color: Theme.of(context).buttonColor.withOpacity(opacity),
-                fontSize: 20,
-                letterSpacing: 1,
-              ),
+              style:
+                  Theme.of(context).textTheme.headline6.copyWith(fontSize: 22),
             ),
           ),
         ],

lib/ui/common_elements.dart

@@ -1,17 +1,20 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 
-final nothingToSeeHere = Center(
-  child: Padding(
-    padding: const EdgeInsets.all(8.0),
-    child: Text(
-      "nothing to see here! 👀",
-      style: TextStyle(
-        color: Colors.white30,
+Widget nothingToSeeHere({Color textColor}) {
+  return Center(
+    child: Padding(
+      padding: const EdgeInsets.all(8.0),
+      child: Text(
+        "nothing to see here! 👀",
+        style: TextStyle(
+          fontFamily: "Inter",
+          color: textColor.withOpacity(0.35),
+        ),
       ),
     ),
-  ),
-);
+  );
+}
 
 Widget button(
   String text, {

lib/ui/deduplicate_page.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:photos/core/constants.dart';
 import 'package:photos/core/event_bus.dart';
+import 'package:photos/ente_theme_data.dart';
 import 'package:photos/events/user_details_changed_event.dart';
 import 'package:photos/models/duplicate_files.dart';
 import 'package:photos/models/file.dart';
@@ -134,7 +135,9 @@ class _DeduplicatePageState extends State<DeduplicatePage> {
                 } else {
                   return Padding(
                     padding: EdgeInsets.only(top: 32),
-                    child: nothingToSeeHere,
+                    child: nothingToSeeHere(
+                        textColor:
+                            Theme.of(context).colorScheme.defaultTextColor),
                   );
                 }
               }

lib/ui/gallery.dart

@@ -5,6 +5,7 @@ import 'package:flutter/material.dart';
 import 'package:logging/logging.dart';
 import 'package:photos/core/constants.dart';
 import 'package:photos/core/event_bus.dart';
+import 'package:photos/ente_theme_data.dart';
 import 'package:photos/events/event.dart';
 import 'package:photos/events/files_updated_event.dart';
 import 'package:photos/models/file.dart';
@@ -173,7 +174,10 @@ class _GalleryState extends State<Gallery> {
         if (widget.header != null) {
           children.add(widget.header);
         }
-        children.add(Expanded(child: nothingToSeeHere));
+        children.add(Expanded(
+          child: nothingToSeeHere(
+              textColor: Theme.of(context).colorScheme.defaultTextColor),
+        ));
         if (widget.footer != null) {
           children.add(widget.footer);
         }

lib/ui/huge_listview/lazy_loading_gallery.dart

@@ -298,8 +298,9 @@ class _LazyLoadingGridViewState extends State<LazyLoadingGridView> {
         _selectFile(file);
       },
       child: Container(
-        margin: const EdgeInsets.all(2.0),
+        margin: const EdgeInsets.all(1.5),
         decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(3),
           border: widget.selectedFiles.files.contains(file)
               ? Border.all(
                   width: 4.0,
@@ -307,14 +308,17 @@ class _LazyLoadingGridViewState extends State<LazyLoadingGridView> {
                 )
               : null,
         ),
-        child: Hero(
-          tag: widget.tag + file.tag(),
-          child: ThumbnailWidget(
-            file,
-            diskLoadDeferDuration: kThumbnailDiskLoadDeferDuration,
-            serverLoadDeferDuration: kThumbnailServerLoadDeferDuration,
-            shouldShowLivePhotoOverlay: true,
-            key: Key(widget.tag + file.tag()),
+        child: ClipRRect(
+          borderRadius: BorderRadius.circular(3),
+          child: Hero(
+            tag: widget.tag + file.tag(),
+            child: ThumbnailWidget(
+              file,
+              diskLoadDeferDuration: kThumbnailDiskLoadDeferDuration,
+              serverLoadDeferDuration: kThumbnailServerLoadDeferDuration,
+              shouldShowLivePhotoOverlay: true,
+              key: Key(widget.tag + file.tag()),
+            ),
           ),
         ),
       ),

lib/utils/local_settings.dart

@@ -2,8 +2,9 @@ import 'package:shared_preferences/shared_preferences.dart';
 
 enum AlbumSortKey {
   albumName,
+  newestPhoto,
+  oldestPhoto,
   lastUpdated,
-  recentPhoto,
 }
 
 class LocalSettings {