flutterpinchzoom

Display an interactive image with pins on top


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:

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.