Photo_view: Popup photo view

[anderscheow]

Is your feature request related to a problem? Please describe.
It is quite troublesome to implement a popup photo view with zoom, drag and also drag to dismiss (change in transparency), since this library already provided the foundation of zoomable image, it is great that the library able to extend to a popup version.

Describe the solution you'd like
A popup photo view which able to zoom, drag and also drag to dismiss (change in transparency) similar to Facebook.

[renancaraujo]

Since there is a lot of people feeling the need for this feature (myself included on one of my apps), I think it is valid to relive the discussion.

Problem:
PhotoView is a widget that does not have a "dismissable" behavior. It only takes care of dealing with receiving gestures in order to scale and translate(move) an image and takes care to render the image(or custom child) correctly. due to its simplicity, there are several use cases of PhotoView and this package is one of the most downloaded on PUB. We have to make sure that any feature won't break other use cases.

TBH I don't think a dismissable PhotoView is in the "scope" of this widget, BUT this doesn't mean we won't do anything about that.

• We can create an example on the app in order to show a sample of code and who knows another package?
• We can create a "wrapper" widget with the popup behavior and publish on pub as a separate package.

[anderscheow]

There's a similar package which able to do the popup thing extended_image, it is great if this package able to achieve that.

[devxpy]

I think this can be solved if we somehow remove the background.

showDialog(
  context: context,
  builder: (context) {
    return PhotoView(
      imageProvider: ...,
      backgroundDecoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.black,
      ),
    );
  },
);

Clicking outside the black circle dismisses the photoview. So if just remove the background...

[renancaraujo]

@devxpy You can wrap photoview on a container or sizedbox with the same size as the image.

[devxpy]

@renancaraujo Thanks for replying!

I tried that but it doesn't quite work. Here are few observations -

1. It doesn't work at all unless widgets are wrapped inside a Dialog.

So this:

SizedBox(
  width: 3000 / 10,
  height: 2002 / 10,
  child: PhotoView(
    imageProvider: imageProvider,
  ),
);

produces:

---

1. When wrapped inside a Dialog, this breaks zoom/pan outside of the SizedBox.

This:

Dialog(
  child: SizedBox(
    width: 3000 / 10,
    height: 2002 / 10,
    child: PhotoView(
      imageProvider: imageProvider,
    ),
  ),
);

Produces:

But it won't allow any interaction with a zoomed image beyond the constraints of the sized box.

---

1. If you zoom out, the sized box is visible again.

[devxpy]

Update: Edited the source code for the plugin, to remove the Container, and it totally fixes this!

$ git diff
diff --git a/lib/src/core/photo_view_core.dart b/lib/src/core/photo_view_core.dart
index 6d1f462..7868640 100644
--- a/lib/src/core/photo_view_core.dart
+++ b/lib/src/core/photo_view_core.dart
@@ -279,18 +279,12 @@ class PhotoViewCoreState extends State<PhotoViewCore>
               child: _buildHero(),
             );
             return PhotoViewGestureDetector(
-              child: Container(
-                child: Center(
-                  child: Transform(
-                    child: customChildLayout,
-                    transform: matrix,
-                    alignment: basePosition,
-                  ),
+              child: Center(
+                child: Transform(
+                  child: customChildLayout,
+                  transform: matrix,
+                  alignment: basePosition,
                 ),
-                decoration: widget.backgroundDecoration ??
-                    const BoxDecoration(
-                      color: const Color.fromRGBO(0, 0, 0, 1.0),
-                    ),
               ),
               onDoubleTap: nextScaleState,
               onScaleStart: onScaleStart,

@renancaraujo, Can I submit a PR? Can make a switch called enableBg that optionally removes this Container.

[Zeeshan0201]

@renancaraujo yes we need a solution for exit photo_view and back to the previous screen.

[Zeeshan0201]

@devxpy Great! It's same feature which we need to implement...

[renancaraujo]

@devxpy Absolutely, feel free to open the PR

[Zeeshan0201]

@devxpy please let us know whenever your PR submitted and this upgraded to latest packages code, thanks.

[renancaraujo]

Hello folks, just added some example regarding both usages in a dialog and a drag to dismiss.
Check the example App!

Options that allow this behavior were added on 0.9.0.

To use in a Dialog, set tightMode: true

To add drag to bottom dismiss, combine PhotoView with showBottomSheet or Dismissible

[Zeeshan0201]

@renancaraujo thanks for adding !