Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Viewing Stacks #555

Open
yakou32 opened this issue May 18, 2024 · 1 comment
Open

Viewing Stacks #555

yakou32 opened this issue May 18, 2024 · 1 comment

Comments

@yakou32
Copy link

yakou32 commented May 18, 2024

I'm trying to render a zoomable/panable Stack - that is a large photo with positioned informations on top of it.

Here is an example:

Stack(
  fit: StackFit.expand,
  clipBehavior: Clip.none,
  children: [
    const Image(
      image: AssetImage(
      'assets/images/some-photo.jpg'), // This may be large (eg. height 5000 x width 3000)
    ),
    Positioned( // The values are based on the photo dimension, in order to inform a specific area
      top: 2500,
      left: 1500,
      child: Container(
        color: Colors.red.withOpacity(0.5),
        width: 380,
        height: 380,
      ),
    ),
  ],
),

Thing is Stack resizes the children to fit its container:

  • the image is resized to container height
  • the Positioned is placed according to the container's dimension, that is likely off screen considering the offset values.
    In any case, positioned locations is desynchronized with the image underneath.

One solution I found was to make the Stack grow as much as needed. This way I ensure the underneath image is not shrinked, and the positionned elements remain correct:

OverflowBox(
  maxWidth: 3000, // Image width
  maxHeight: 5000, // Image height
  child:  Stack(
    // Stack content here
  ),
),

Although content of the Stack is now correct, if I put this in PhotoView, the PhotoViewComputedScale is not correct:

PhotoView.customChild(
  initialScale: PhotoViewComputedScale.contained, // Whole image expected, but it's zoomed in
  minScale: PhotoViewComputedScale.contained * 0.8,
  basePosition: Alignment.center,
  child:  // Overflowbox here
),

Indeed, the Overflowbox dimension seems not to be taken into account. I tried to wrapped it in a SizedBox at image's dimension with no success.

Would you know how to solve this?

Thanks!

@yakou32
Copy link
Author

yakou32 commented May 18, 2024

I found a solution with InteractiveViewer() - that is to set its constrained property to false.
This way, the children are not constrained and the Stack layout is respected. And no need to have any Overflowbox messing around.

Is there anything similar for PhotoView?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant