feat: zoom widget de imagem

lib/widgets/mxc_image_viewer.dart

@@ -13,47 +13,61 @@ class MxcImageViewer extends StatelessWidget {
 
   const MxcImageViewer(this.mxContent, {super.key});
 
+  /// The viewer is opened with `showDialog` on the root navigator, so closing
+  /// it must always target the root navigator.
+  static void _close(BuildContext context) =>
+      Navigator.of(context, rootNavigator: true).pop();
+
   @override
   Widget build(BuildContext context) {
     final iconButtonStyle = IconButton.styleFrom(
       backgroundColor: Colors.black.withAlpha(200),
       foregroundColor: Colors.white,
     );
-    return GestureDetector(
-      onTap: () => Navigator.of(context).pop(),
-      child: Scaffold(
-        backgroundColor: Colors.black.withAlpha(128),
-        extendBodyBehindAppBar: true,
-        appBar: AppBar(
-          elevation: 0,
-          leading: IconButton(
-            style: iconButtonStyle,
-            icon: const Icon(Icons.close),
-            onPressed: Navigator.of(context).pop,
-            color: Colors.white,
-            tooltip: L10n.of(context).close,
+    return PopScope<Object?>(
+      // Claim the system back button for the viewer so that it is dismissed
+      // instead of letting the router navigate away underneath it.
+      canPop: false,
+      onPopInvokedWithResult: (didPop, _) {
+        if (didPop) return;
+        _close(context);
+      },
+      child: GestureDetector(
+        onTap: () => _close(context),
+        child: Scaffold(
+          backgroundColor: Colors.black.withAlpha(128),
+          extendBodyBehindAppBar: true,
+          appBar: AppBar(
+            elevation: 0,
+            leading: IconButton(
+              style: iconButtonStyle,
+              icon: const Icon(Icons.close),
+              onPressed: () => _close(context),
+              color: Colors.white,
+              tooltip: L10n.of(context).close,
+            ),
+            backgroundColor: Colors.transparent,
           ),
-          backgroundColor: Colors.transparent,
-        ),
-        body: InteractiveViewer(
-          minScale: 1.0,
-          maxScale: 10.0,
-          onInteractionEnd: (endDetails) {
-            if (endDetails.velocity.pixelsPerSecond.dy >
-                MediaQuery.sizeOf(context).height * 1.5) {
-              Navigator.of(context, rootNavigator: false).pop();
-            }
-          },
-          child: Center(
-            child: GestureDetector(
-              // Ignore taps to not go back here:
-              onTap: () {},
-              child: MxcImage(
-                key: ValueKey(mxContent.toString()),
-                uri: mxContent,
-                fit: BoxFit.contain,
-                isThumbnail: false,
-                animated: true,
+          body: InteractiveViewer(
+            minScale: 1.0,
+            maxScale: 10.0,
+            onInteractionEnd: (endDetails) {
+              if (endDetails.velocity.pixelsPerSecond.dy >
+                  MediaQuery.sizeOf(context).height * 1.5) {
+                _close(context);
+              }
+            },
+            child: Center(
+              child: GestureDetector(
+                // Ignore taps to not go back here:
+                onTap: () {},
+                child: MxcImage(
+                  key: ValueKey(mxContent.toString()),
+                  uri: mxContent,
+                  fit: BoxFit.contain,
+                  isThumbnail: false,
+                  animated: true,
+                ),
               ),
             ),
           ),