From 5e7c85597a63838de70e5ea39e902a2d404bb8c9 Mon Sep 17 00:00:00 2001
From: Thibault Deckers <thibault.deckers@gmail.com>
Date: Tue, 22 Dec 2020 10:02:19 +0900
Subject: [PATCH] fixes for thumbnail checkered background with box fit

---
 .../collection/thumbnail/decorated.dart       |  1 +
 lib/widgets/collection/thumbnail/vector.dart  | 75 ++++++++++---------
 2 files changed, 40 insertions(+), 36 deletions(-)

diff --git a/lib/widgets/collection/thumbnail/decorated.dart b/lib/widgets/collection/thumbnail/decorated.dart
index a92d4e550..073656a6a 100644
--- a/lib/widgets/collection/thumbnail/decorated.dart
+++ b/lib/widgets/collection/thumbnail/decorated.dart
@@ -43,6 +43,7 @@ class DecoratedThumbnail extends StatelessWidget {
           );
 
     child = Stack(
+      alignment: Alignment.center,
       children: [
         child,
         Positioned(
diff --git a/lib/widgets/collection/thumbnail/vector.dart b/lib/widgets/collection/thumbnail/vector.dart
index c589da062..384fae2e8 100644
--- a/lib/widgets/collection/thumbnail/vector.dart
+++ b/lib/widgets/collection/thumbnail/vector.dart
@@ -1,5 +1,3 @@
-import 'dart:math';
-
 import 'package:aves/image_providers/uri_picture_provider.dart';
 import 'package:aves/model/image_entry.dart';
 import 'package:aves/model/settings/entry_background.dart';
@@ -23,42 +21,47 @@ class ThumbnailVectorImage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final pictureProvider = UriPicture(
-      uri: entry.uri,
-      mimeType: entry.mimeType,
-    );
-
-    final child = Center(
-      child: Selector<Settings, EntryBackground>(
-        selector: (context, s) => s.vectorBackground,
-        builder: (context, background, child) {
-          if (background == EntryBackground.transparent) {
-            return SvgPicture(
-              pictureProvider,
-              width: extent,
-              height: extent,
-            );
-          }
-
-          final longestSide = max(entry.width, entry.height);
-          final picture = SvgPicture(
-            pictureProvider,
-            width: extent * (entry.width / longestSide),
-            height: extent * (entry.height / longestSide),
+    final child = Selector<Settings, EntryBackground>(
+      selector: (context, s) => s.vectorBackground,
+      builder: (context, background, child) {
+        const fit = BoxFit.contain;
+        if (background == EntryBackground.checkered) {
+          return LayoutBuilder(
+            builder: (context, constraints) {
+              final availableSize = constraints.biggest;
+              final fitSize = applyBoxFit(fit, entry.displaySize, availableSize).destination;
+              final offset = fitSize / 2 - availableSize / 2;
+              final child = DecoratedBox(
+                decoration: CheckeredDecoration(checkSize: extent / 8, offset: offset),
+                child: SvgPicture(
+                  UriPicture(
+                    uri: entry.uri,
+                    mimeType: entry.mimeType,
+                  ),
+                  width: fitSize.width,
+                  height: fitSize.height,
+                  fit: fit,
+                ),
+              );
+              // the thumbnail is centered for correct decoration sizing
+              // when constraints are tight during hero animation
+              return constraints.isTight ? Center(child: child) : child;
+            },
           );
+        }
 
-          Decoration decoration;
-          if (background == EntryBackground.checkered) {
-            decoration = CheckeredDecoration(checkSize: extent / 8);
-          } else if (background.isColor) {
-            decoration = BoxDecoration(color: background.color);
-          }
-          return DecoratedBox(
-            decoration: decoration,
-            child: picture,
-          );
-        },
-      ),
+        final colorFilter = background.isColor ? ColorFilter.mode(background.color, BlendMode.dstOver) : null;
+        return SvgPicture(
+          UriPicture(
+            uri: entry.uri,
+            mimeType: entry.mimeType,
+            colorFilter: colorFilter,
+          ),
+          width: extent,
+          height: extent,
+          fit: fit,
+        );
+      },
     );
     return heroTag == null
         ? child