From f47301745c5a5a704afff8caa226ec98972eb1fa Mon Sep 17 00:00:00 2001
From: Develeste <93141030+Develeste@users.noreply.github.com>
Date: Fri, 19 Nov 2021 01:42:48 +0900
Subject: [PATCH] Improving the UX/UI of Image widget (#470)

---
 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),
+                    )
+                  ],
+                ),
+              ),
+            ),
+          ],
         ),
       ),
     );