Positioning widgets at specific image coordinates

Question

I have a set of x/y coordinates which I'd like to use to show widgets on top of an Image widget at those specific coords, relative to the original image dimensions (i.e. coords of 100/100 would show a widget at 100/100 on the image).

I'm currently using a Stack containing the Image and some Positioned widgets, but I can't get them to display in the right place. The positioned widgets aren't displaying in the correct position on the image, possibly because of the image scaling?

Any ideas how I could achieve this? Thanks

For some context, the image is a map and the positioned widgets are pins on the map

Code for the pin widget (top/left is y/x):

Positioned(
      top: top,
      left: left,
      child: GestureDetector(
        child: IconTheme(
          child: Icon(Icons.location_pin),
          data: IconThemeData(
            color: available ? Colors.green : Colors.red,
          ),
        ),
        onTap: () => print("Selected space $spaceId"),
      ),
    );

Code for the interactive viewer + stack:

        transformationController: widget._controller,
        maxScale: 4.0,
        minScale: 0.2,
        child: Stack(
          children: [
            Image.network(
              "https://i.pinimg.com/736x/bd/d6/f5/bdd6f5247dbea0e5eedf33fe8cc491ee--office-layout-plan-office-floor-plan.jpg",
              fit: BoxFit.cover,
              alignment: Alignment.center,
              height: double.infinity,
              width: double.infinity,
            ),
            ...getSpacePins()
            FutureBuilder<List<SpacePin>>(
              future: spaces,
              builder: (context, snapshot) {
                if (snapshot.hasData)
                  return snapshot.data![1];
                else if (snapshot.hasError) return Text("Error");
                return const CircularProgressIndicator();
              },
            )
          ],
        ),
      )

The method getSpacePins() returns a list of pin widgets in to the stack.

Answer 1

I don't have the reputation to directly comment. I've got the same problem but haven't solved it 100% yet, nor found anyone who has the answer. For this place the Image in a Stack Widget. Place layers of pins by looping through your list of pins. Wrap the pins in a positioned widget. The Issue I have here is the X and Y are correct and the math I have is correct but its off set by things like the app bar height and other padding in the scaffold. I can't seem to apply it to the X, Y of the Image on the stack.

    for (Pins pin in listOfPins) 
       Positioned(
          top: (pin.y ?? 0) * constraints.maxHeight,
          left: (pin.x ?? 0) * constraints.maxWidth,
          child: Image.asset(
                  DRAWINGS_PINS_PATH,
                  height: 40,
                  width: 40,
                )