add hover border to image tiles

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) {

lib/hover_detector.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+
+class HoverDetector extends StatefulWidget {
+  const HoverDetector(
+      {Key? key, required this.defaultChild, required this.hoverChild})
+      : super(key: key);
+  final Widget defaultChild;
+  final Widget hoverChild;
+
+  @override
+  State<HoverDetector> createState() => _HoverDetectorState();
+}
+
+class _HoverDetectorState extends State<HoverDetector> {
+  bool amIHovering = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return MouseRegion(
+      child: amIHovering ? widget.hoverChild : widget.defaultChild,
+      onEnter: (PointerEvent details) => setState(() => amIHovering = true),
+      onExit: (PointerEvent details) => setState(() => amIHovering = false),
+    );
+  }
+}

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,
         ));
   }
 }