D1APP-87 interactive viewer on image contents

lib/widgets/didvan/icon_button.dart

@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
 class DidvanIconButton extends StatelessWidget {
   final IconData icon;
   final Color? color;
+  final Color? backgroundColor;
   final double? size;
   final double? gestureSize;
   final VoidCallback onPressed;
@@ -14,6 +15,7 @@ class DidvanIconButton extends StatelessWidget {
     this.color,
     this.size,
     this.gestureSize,
+    this.backgroundColor,
   }) : super(key: key);
 
   @override
@@ -21,7 +23,11 @@ class DidvanIconButton extends StatelessWidget {
     return InkWrapper(
       onPressed: onPressed,
       borderRadius: BorderRadius.circular(200),
-      child: SizedBox(
+      child: Container(
+        decoration: BoxDecoration(
+          color: backgroundColor,
+          shape: BoxShape.circle,
+        ),
         height: gestureSize ?? 48,
         width: gestureSize ?? 48,
         child: Icon(

lib/widgets/didvan/page_view.dart

@@ -9,6 +9,7 @@ import 'package:didvan/utils/date_time.dart';
 import 'package:didvan/widgets/animated_visibility.dart';
 import 'package:didvan/widgets/didvan/card.dart';
 import 'package:didvan/widgets/didvan/divider.dart';
+import 'package:didvan/widgets/didvan/icon_button.dart';
 import 'package:didvan/widgets/didvan/text.dart';
 import 'package:didvan/widgets/ink_wrapper.dart';
 import 'package:didvan/widgets/item_title.dart';
@@ -201,9 +202,39 @@ class _DidvanPageViewState extends State<DidvanPageView> {
       );
     }
     if (content.image != null) {
-      return SkeletonImage(
-        imageUrl: content.image!,
-        aspectRatio: 16 / 9,
+      return GestureDetector(
+        onTap: () {
+          showDialog(
+            context: context,
+            builder: (context) => Stack(
+              children: [
+                Positioned.fill(
+                  child: InteractiveViewer(
+                    child: Center(
+                      child: SkeletonImage(
+                        width: MediaQuery.of(context).size.width,
+                        height: 200,
+                        imageUrl: content.image,
+                      ),
+                    ),
+                  ),
+                ),
+                Positioned(
+                  right: 16,
+                  child: DidvanIconButton(
+                    backgroundColor: Theme.of(context).colorScheme.primary,
+                    icon: DidvanIcons.back_regular,
+                    onPressed: Navigator.of(context).pop,
+                  ),
+                ),
+              ],
+            ),
+          );
+        },
+        child: SkeletonImage(
+          imageUrl: content.image!,
+          aspectRatio: 16 / 9,
+        ),
       );
     }
     return const SizedBox();