I want to position custom widgets on top of an image based on X and Y coordinates. Think of it as an overlay. Until now, I have tried a solution, where I used a Stack in a combination with Positioned, to position widgets above the image. The problem arises when I try this solution on different screen sizes. The overlaid widgets are off, depending on the screen size I'm testing on.

Here's my current implementation:

      Expanded(
        child: InteractiveViewer(
          constrained: false,
          minScale: 0.1,
          maxScale: 2.0,
          child: Stack(
            children: [
              Image.network(widget.plan.image),
              Positioned(
                bottom: 2927,
                left: 6700,
                child: SvgPicture.asset("assets/svg/pin.svg", height: 200)
              )
            ],
          )
        ),
      )

Note that I'm also wrapping everything in InteractiveViewer because the Image I'm getting from the backend is very large.

EDIT: I have noted that for some reason the image dimensions are different on different displays. For example, photo dimensions on iPhone X are 10224x6526, where on iPhone 13 Pro Max image dimensions are 8192x5228. I am now investigating further why this is happening as this is probably the reason why custom widgets drawn on top are shifted on different screens.

CodePudding user response：

The best way to do this will be to try to position your items relative to the screen's width and height in percentage.

bottom: MediaQuery.of(context).size.height * 0.5 // 50% of the screen's height
left: MediaQuery.of(context).size.width * 0.3 // 30% of the screen's width

You are free to change the percentiles to suit you.

With the issue concerning the size of the image, you might want to consider placing it inside a widget and giving it a max-height and max-width values.

CodePudding user response：

This answers your question click here