Not work with InteractiveViewer

[Kiruel]

Hi ! Thanks for this package it's really nice to have !

I got a problem when I try to add in the child a InteractiveViewer to be able to zoom into the widget (an image). The dismiss interaction not work anymore.

Simple example to show the problem:

class ImageZoomPage extends HookConsumerWidget {
  const ImageZoomPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    const imageUrl =
        'https://thumbs.dreamstime.com/b/url-text-displayed-touch-screen-modern-tablet-hands-holding-white-mobile-device-66853601.jpg';
    return DismissiblePage(
      onDismissed: () {
        context.router.pop();
      },
      direction: DismissiblePageDismissDirection.multi,
      child: Hero(
        tag: 'image',
        child: InteractiveViewer( // <-- Here the InteractiveViewer broke the DismissiblePage
          minScale: 0.1,
          maxScale: 3.0,
          clipBehavior: Clip.none,
          child: CachedNetworkImage(
            fit: BoxFit.fitWidth,
            cacheKey: imageUrl,
            imageUrl: imageUrl,
          ),
        ),
      ),
    );
  }
}

I have missing something ?

[Tkko]

Hey @Kiruel, I'm planing to update the package in a few days which will make DismissiblePage compatible with scroll views, but it won't work properly alongside with the InteractiveViewer. One suggestion would be to replace the InteractiveViewer with PhotoView.

class ImageZoomPage extends StatefulWidget {
  final String imagePath;

  const ImageZoomPage({required this.imagePath});

  @override
  State<ImageZoomPage> createState() => _ImageZoomPageState();
}

class _ImageZoomPageState extends State<ImageZoomPage> {
  bool _isDismissibleEnabled = true;

  @override
  Widget build(BuildContext context) {
    final initialScale = .5;
    return DismissiblePage(
      onDismissed: () {
        Navigator.of(context).pop();
      },
      disabled: !_isDismissibleEnabled,
      direction: DismissiblePageDismissDirection.multi,
      child: PhotoView(
        minScale: initialScale,
        maxScale: 3.0,
        initialScale: initialScale,
        heroAttributes: PhotoViewHeroAttributes(tag: widget.imagePath),
        wantKeepAlive: true,
        onScaleEnd: (_, __, PhotoViewControllerValue controller) {
          if (controller.scale == initialScale) {
            setState(() => _isDismissibleEnabled = true);
          } else if (_isDismissibleEnabled == true) {
            setState(() => _isDismissibleEnabled = false);
          }
        },
        imageProvider: AssetImage(widget.imagePath),
      ),
    );
  }
}

[Kiruel]

Thanks for the feedback, I will looking for it !

[Kiruel]

This is not a workarround, still the photo_view is nice, but when I put DismissiblePage on top, I got to much glitch (black screen etc...). I will waiting for the new version when it will be ready to test again. I close the issue for now, feel free to re-open.

[gidrokolbaska]

Have this been addressed in the package? @Kiruel have you managed to get it working somehow?

[charleshan]

If you meant the background color when you said black screen, you can make the color transparent.

There seems to be a gesture detection conflict though. It's the same with PhotoView and InteractiveViewer. One finger has do be down first before the other to zoom in or out when it has DismissiblePage as parent