[SOLVED] Display an interactive image with pins on top – Stack Overflow

Issue

This Content is from Stack Overflow. Question asked by adi

I need to build a widget which loads an image (floor plan) with pins on it, with set coordinates, but at the sametime the image needs to be zoomable and can be moved, while the pins keep their size and correct location.

You can see bellow an image about what I mean by image with pins.
Floor map

I have looked into some packages which load images, but they don’t seem to have to a builder where I can add a stack and the pins.

I am trying to work with InteractiveViewer, but so far I encountered the following issues:

  • cannot manage to keep the size of the pins, constant (to not change size while zooming);
  • cannot figure out how to downscale the image…

Anyone has any suggestions or recommendations?



Solution

InteractiveViewer takes in different callback functions that allow you to keep track of the current scale (onInteractionUpdate being the main one you’ll use here).

Use this to keep track of the current scale of the interactive viewer in the state of your widget (using the scale property on ScaleUpdateDetails).

Then, wrap each marker in a Transform.scale (with the origin set to the bottom of the pin) and do some calculation (e.g 1 / currentScale) to determine which scale would directly counteract that of the interactive viewer.


This Question was asked in StackOverflow by adi and Answered by jms.heff It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?