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!

Answer 1

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"),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 2

I would suggest adding the width and height of the boxes to the Container widget instead, but apart from that, there seems to be no problem with your code. So I thing the behavior can be related to a parent widget:

Checkout the following code:

import 'package:flutter/material.dart';

void main() => runApp(
  MaterialApp(home: HomePage(),
    theme: ThemeData.light()
  ),
);
class HomePage extends StatefulWidget {

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Stack(
              overflow: Overflow.visible,
              children: [
                Positioned(
                  top: 245,
                  left: 43,
                  child: Container(
                    color: Colors.lightGreen,
                    width: 100,
                    height: 100,
                  ),
                ),
                Positioned(
                  top: -50,
                  left: 120,
                  child: Container(
                    color: Colors.redAccent,
                    width: 100,
                    height: 100,
                  ),
                ),
                Container(
                  color: Colors.indigo,
                  width: 200,
                  height: 200,
                ),
              ],
            )
          ],
        ),
      ),
    );
  }

}