Allow swiping fullscreen images to exit view. (#242)

* Allow swiping fullscreen images to exit view.

* Track scale in image and prevent swipe to exit when image is scaled.
Double tap to reset image transform.

* Animate double tap to reset image transform.

* Add extended_image dependency and update AdvancedImage to use.

* Add warning to log on image load failure.

Author: olorin99

lib/src/widgets/image.dart

@@ -1,8 +1,8 @@
 import 'dart:io';
 import 'dart:math';
-
 import 'package:blurhash_ffi/blurhash_ffi.dart';
 import 'package:flutter/material.dart';
+import 'package:interstellar/src/controller/controller.dart';
 import 'package:interstellar/src/models/image.dart';
 import 'package:interstellar/src/utils/share.dart';
 import 'package:interstellar/src/utils/utils.dart';
@@ -11,6 +11,8 @@ import 'package:interstellar/src/widgets/loading_button.dart';
 import 'package:interstellar/src/widgets/wrapper.dart';
 import 'package:interstellar/src/widgets/super_hero.dart';
 import 'package:material_symbols_icons/symbols.dart';
+import 'package:extended_image/extended_image.dart';
+import 'package:provider/provider.dart';
 
 class AdvancedImage extends StatelessWidget {
   final ImageModel image;
@@ -34,11 +36,11 @@ class AdvancedImage extends StatelessWidget {
         ? null
         : sqrt(1080 / (image.blurHashWidth! * image.blurHashHeight!));
 
-    return SuperHero(
-      tag: image.toString() + (hero ?? ''),
-      child: Wrapper(
-        shouldWrap: openTitle != null,
-        parentBuilder: (child) => GestureDetector(
+    return Wrapper(
+      shouldWrap: openTitle != null,
+      parentBuilder: (child) => SuperHero(
+        tag: image.toString() + (hero ?? ''),
+        child: GestureDetector(
           onTap: () => pushRoute(
             context,
             builder: (context) => AdvancedImagePage(
@@ -50,30 +52,51 @@ class AdvancedImage extends StatelessWidget {
           ),
           child: child,
         ),
-        child: Wrapper(
-          shouldWrap: enableBlur,
-          parentBuilder: (child) => Blur(child),
-          child: Stack(
-            alignment: Alignment.center,
-            fit: StackFit.passthrough,
-            children: [
-              if (image.blurHash != null)
-                Image(
-                  fit: fit,
-                  image: BlurhashFfiImage(
-                    image.blurHash!,
-                    decodingWidth: (blurHashSizeFactor! * image.blurHashWidth!)
-                        .ceil(),
-                    decodingHeight: (blurHashSizeFactor * image.blurHashHeight!)
-                        .ceil(),
-                    scale: blurHashSizeFactor,
-                  ),
-                ),
-              Image.network(image.src, fit: fit),
-            ],
-          ),
+      ),
+      child: Wrapper(
+        shouldWrap: enableBlur,
+        parentBuilder: (child) => Blur(child),
+        child: Stack(
+          alignment: Alignment.center,
+          fit: StackFit.passthrough,
+          children: [
+            ExtendedImage.network(
+              image.src,
+              fit: fit,
+              enableSlideOutPage: true,
+              heroBuilderForSlidingPage: (child) {
+                return SuperHero(
+                  tag: image.toString() + (hero ?? ''),
+                  child: child,
+                );
+              },
+              cache: true,
+              mode: ExtendedImageMode.gesture,
+              loadStateChanged: (state) {
+                if (state.extendedImageLoadState == LoadState.loading &&
+                    image.blurHash != null) {
+                  return ExtendedImage(
+                    fit: fit,
+                    image: BlurhashFfiImage(
+                      image.blurHash!,
+                      decodingWidth:
+                          (blurHashSizeFactor! * image.blurHashWidth!).ceil(),
+                      decodingHeight:
+                          (blurHashSizeFactor * image.blurHashHeight!).ceil(),
+                      scale: blurHashSizeFactor,
+                    ),
+                    enableSlideOutPage: true,
+                  );
+                } else if (state.extendedImageLoadState == LoadState.failed) {
+                  context.read<AppController>().logger.w('Image failed to load: ${image.src}');
+                }
+                return null;
+              },
+            ),
+          ],
         ),
       ),
+      // ),
     );
   }
 }
@@ -97,6 +120,11 @@ class AdvancedImagePage extends StatefulWidget {
 }
 
 class _AdvancedImagePageState extends State<AdvancedImagePage> {
+  @override
+  void initState() {
+    super.initState();
+  }
+
   @override
   Widget build(BuildContext context) {
     const shadows = <Shadow>[
@@ -136,14 +164,13 @@ class _AdvancedImagePageState extends State<AdvancedImagePage> {
       body: Stack(
         children: [
           Positioned.fill(
-            child: InteractiveViewer(
+            child: ExtendedImageSlidePage(
+              slideAxis: SlideAxis.both,
               child: SafeArea(
-                child: Center(
-                  child: AdvancedImage(
-                    widget.image,
-                    hero: widget.hero,
-                    fit: widget.fit,
-                  ),
+                child: AdvancedImage(
+                  widget.image,
+                  hero: widget.hero,
+                  // fit: widget.fit,
                 ),
               ),
             ),

pubspec.lock

@@ -249,6 +249,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "5.0.1"
+  extended_image:
+    dependency: "direct main"
+    description:
+      name: extended_image
+      sha256: f6cbb1d798f51262ed1a3d93b4f1f2aa0d76128df39af18ecb77fa740f88b2e0
+      url: "https://pub.dev"
+    source: hosted
+    version: "10.0.1"
+  extended_image_library:
+    dependency: transitive
+    description:
+      name: extended_image_library
+      sha256: "1f9a24d3a00c2633891c6a7b5cab2807999eb2d5b597e5133b63f49d113811fe"
+      url: "https://pub.dev"
+    source: hosted
+    version: "5.0.1"
   fake_async:
     dependency: transitive
     description:
@@ -501,6 +517,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.4.0"
+  http_client_helper:
+    dependency: transitive
+    description:
+      name: http_client_helper
+      sha256: "8a9127650734da86b5c73760de2b404494c968a3fd55602045ffec789dac3cb1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.0"
   http_multi_server:
     dependency: transitive
     description:

pubspec.yaml

@@ -53,6 +53,7 @@ dependencies:
   simplytranslate: ^2.2.2
   visibility_detector: ^0.4.0+2
   logger: ^2.6.1
+  extended_image: ^10.0.1
 
 dev_dependencies:
   flutter_lints: ^5.0.0