From cc5c3bb2a69a5e5b329c4672fcb2e52c0abd8910 Mon Sep 17 00:00:00 2001
From: lukas-heiligenbrunner <lukas.heiligenbrunner@gmail.com>
Date: Fri, 7 Oct 2022 17:32:39 +0200
Subject: [PATCH] add hover border to image tiles

---
 lib/data_provider/ssh_data_provider.dart |  6 +-
 lib/image_tile.dart                      | 99 ++++++++++++++----------
 2 files changed, 64 insertions(+), 41 deletions(-)

diff --git a/lib/data_provider/ssh_data_provider.dart b/lib/data_provider/ssh_data_provider.dart
index fbabe87..c1559de 100644
--- a/lib/data_provider/ssh_data_provider.dart
+++ b/lib/data_provider/ssh_data_provider.dart
@@ -113,8 +113,10 @@ class _SSHImageProvider extends ImageProvider<_SSHImageProvider> {
     } else {
       final file = await sftpClient.open(uri.toFilePath());
       bytes = await file.readBytes();
-      await tmpPic.create(recursive: true);
-      await tmpPic.writeAsBytes(bytes);
+      () async {
+        await tmpPic.create(recursive: true);
+        await tmpPic.writeAsBytes(bytes);
+      }();
     }
 
     if (bytes.lengthInBytes == 0) {
diff --git a/lib/image_tile.dart b/lib/image_tile.dart
index 5738bc7..61f5ee1 100644
--- a/lib/image_tile.dart
+++ b/lib/image_tile.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:gallery/data_provider/data_provider.dart';
+import 'package:gallery/hover_detector.dart';
 import 'package:gallery/utils/tile_size.dart';
 
 class ImageTile extends StatelessWidget {
@@ -20,45 +21,65 @@ class ImageTile extends StatelessWidget {
         child: Container(
           padding: const EdgeInsets.all(3),
           child: imageUri == null
-              ? Container(
-                  decoration: BoxDecoration(
-                      color: Colors.white,
-                      borderRadius: BorderRadius.all(
-                          Radius.circular(calcTileMaxWidth() / 30)),
-                      boxShadow: [
-                        BoxShadow(
-                            color: Colors.black12,
-                            spreadRadius: calcTileMaxWidth() / 150,
-                            blurRadius: calcTileMaxWidth() / 60),
-                      ]),
-                  child: child)
-              : Container(
-                  decoration: BoxDecoration(
-                      borderRadius: BorderRadius.all(
-                          Radius.circular(calcTileMaxWidth() / 30)),
-                      boxShadow: [
-                        BoxShadow(
-                            color: Colors.black12,
-                            spreadRadius: calcTileMaxWidth() / 150,
-                            blurRadius: calcTileMaxWidth() / 60),
-                      ]),
-                  child: ClipRRect(
-                      borderRadius: BorderRadius.all(
-                        Radius.circular(calcTileMaxWidth() / 30),
-                      ),
-                      child: Image(
-                        fit: BoxFit.cover,
-                        frameBuilder:
-                            (context, child, frame, wasSynchronouslyLoaded) {
-                          return frame == null
-                              ? const Center(
-                                  child: CircularProgressIndicator(),
-                                )
-                              : child;
-                        },
-                        image: dtaProvider!.getImageProvider(imageUri!),
-                      )),
-                ),
+              ? HoverDetector(
+                  defaultChild: _renderIcon(false),
+                  hoverChild: _renderIcon(true))
+              : HoverDetector(
+                  defaultChild: _renderImage(false),
+                  hoverChild: _renderImage(true)),
+        ));
+  }
+
+  Widget _renderIcon(bool border) {
+    return Container(
+        decoration: BoxDecoration(
+            color: Colors.white,
+            border: border
+                ? Border.all(color: const Color(0x7f444444), width: 3)
+                : null,
+            borderRadius:
+                BorderRadius.all(Radius.circular(calcTileMaxWidth() / 30)),
+            boxShadow: [
+              BoxShadow(
+                  color: Colors.black12,
+                  spreadRadius: calcTileMaxWidth() / 150,
+                  blurRadius: calcTileMaxWidth() / 60),
+            ]),
+        child: child);
+  }
+
+  Widget _renderImage(bool border) {
+    final image = Image(
+      fit: BoxFit.cover,
+      filterQuality: FilterQuality.high,
+      frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
+        return frame == null
+            ? const Center(
+                child: CircularProgressIndicator(),
+              )
+            : child;
+      },
+      image: dtaProvider!.getImageProvider(imageUri!),
+    );
+
+    return Container(
+        decoration: BoxDecoration(
+            border: border
+                ? Border.all(color: const Color(0x7f444444), width: 3)
+                : null,
+            borderRadius: BorderRadius.all(
+                Radius.circular(calcTileMaxWidth() / (border ? 25 : 30))),
+            boxShadow: [
+              BoxShadow(
+                  color: Colors.black12,
+                  spreadRadius: calcTileMaxWidth() / 150,
+                  blurRadius: calcTileMaxWidth() / 60),
+            ]),
+        child: ClipRRect(
+          borderRadius: BorderRadius.all(
+            Radius.circular(calcTileMaxWidth() / 30),
+          ),
+          child: image,
         ));
   }
 }