From 8574521899b595641430b0479719cab8d9aae24c Mon Sep 17 00:00:00 2001
From: Develeste <93141030+Develeste@users.noreply.github.com>
Date: Fri, 19 Nov 2021 01:13:33 +0900
Subject: [PATCH] Improving the UX/UI of Image widget

Currently, Back function is applied when the image touching. This can be operated by accident when zooming in the user's image.
So explicitly place the close button in the upper right corner
---
 lib/src/widgets/image.dart | 55 ++++++++++++++++++++++++++++++++------
 1 file changed, 47 insertions(+), 8 deletions(-)

diff --git a/lib/src/widgets/image.dart b/lib/src/widgets/image.dart
index b9df48ce..49b97c10 100644
--- a/lib/src/widgets/image.dart
+++ b/lib/src/widgets/image.dart
@@ -10,20 +10,59 @@ class ImageTapWrapper extends StatelessWidget {
 
   final ImageProvider? imageProvider;
 
-  @override
+@override
   Widget build(BuildContext context) {
     return Scaffold(
       body: Container(
         constraints: BoxConstraints.expand(
           height: MediaQuery.of(context).size.height,
         ),
-        child: GestureDetector(
-          onTapDown: (_) {
-            Navigator.pop(context);
-          },
-          child: PhotoView(
-            imageProvider: imageProvider,
-          ),
+        child: Stack(
+          children: [
+            PhotoView(
+              imageProvider: imageProvider,
+              loadingBuilder: (context, event) {
+                return Container(
+                  color: Colors.black,
+                  child: Center(
+                    child: CircularProgressIndicator(),
+                  ),
+                );
+              },
+            ),
+            Positioned(
+              right: 10.0,
+              top: MediaQuery.of(context).padding.top + 10.0,
+              child: InkWell(
+                onTap: () {
+                  Navigator.pop(context);
+                },
+                child: Stack(
+                  children: [
+                    Opacity(
+                      opacity: 0.2,
+                      child: Container(
+                        height: 30.0,
+                        width: 30.0,
+                        decoration: BoxDecoration(
+                          shape: BoxShape.circle,
+                          color: Colors.black87,
+                        ),
+                      ),
+                    ),
+                    Positioned(
+                      top: 0,
+                      bottom: 0,
+                      left: 0,
+                      right: 0,
+                      child: Icon(Icons.close,
+                          color: Colors.grey[400], size: 28.0),
+                    )
+                  ],
+                ),
+              ),
+            ),
+          ],
         ),
       ),
     );