how can I position a widget relative to another in Flutter?

Question

I have an image where I want to place on it small images. I already have the positions of these images (width,height,topLeftX,topLeftY,bottomRight..) with respect to the original image.

I am not able to place these small images(represented by the blue box in the attached example below) with respect to the image. They are always positioned with respect to the whole screen.

This is something I tried:

      Stack(

            children:[
              
            Positioned(
              top: 245,
              left: 43,
             width: 200,height: 200,child:Container(color:Colors.blue)),
          Container(

              child:PhotoView(imageProvider: AssetImage("lib/assets/3D_example_2.png"),
          controller: controller,

          )),])

How can I place my images(rectangles) with respect to the image? I also want to scale the width and height of these images relative to the original image & allow them to be moved with the original image when its zoomed..

any idea how these could be done?

thanks!

Solution

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    ),
  );
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "Rough  Work",
        ),
        centerTitle: true,
      ),
      body: Stack(
        overflow: Overflow.visible,
        children: [
          Positioned(
            top: 200,
            left: 100,
            child: Container(
              height: 200,
              width: 200,
              color: Colors.teal,
              child: Stack(
                children: [
                  Positioned(
                    top: 12,
                    child: Container(
                      height: 150,
                      width: 150,
                      child: Image(
                        image: NetworkImage(
                            "https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}