Flutter InteractiveViewer working for multible children in a stack

Question

I have a Stack which contains an Image wrapped with an InteractiveViewer and on top multiple Containers in a GestureDetector. Status now: I can zoom(scale) and pan the Image around (InteractiveViewer) and I can move the Containers on their own because of the GestureDetector(onPanUpdate...).

My Problem: If I zoom the Image the Containers stay at the position. When I zoom/pan they should always stay at the same location on the Image were I have put them. They stick to the Display and not to the Image.

By the way I also don't know how to use onScaleUpdate to get the same effect as InteractiveViewer

When I put a Stack in the InteractiveViewer with the Image and the Containers, nothing happens. I need an InteractiveViewer or a GestureDetector (onscaleUpdate..or something like this) which moves/zooms the Image and the Containers. I have wrapped the Containers in a GestureDetector to move them individually. This already works.

I need: InteractriveViewer / GestureDetector(onScaleUpdate: )

Image

Class with Containers

   |
  Stack(
     Positioned(
          GestureDetector(
             onPanUpdate:
                   child: Container1
                       


  Stack(
     Positioned(
          GestureDetector(
             onPanUpdate:
                   child: Container2

---

This is my code now. The Image doesn't zoom and I can't see the Containers.

class _MapState extends State<Map> {
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Stack(
        children: [
          InteractiveViewer(
            maxScale: 2,
            minScale: 0.01,
            constrained: false,
            child: Stack(
              children: [
                Image.asset('images/myimage.jpg'),
                Organiser(),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class Organiser extends StatefulWidget {
  const Organiser({Key? key}) : super(key: key);
  @override
  State<Organiser> createState() => _OrganiserState();
}

class _OrganiserState extends State<Organiser> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Team2(),
        Team1(),
      ],
    );
  }
}

class Team1 extends StatefulWidget {
  const Team1({Key? key}) : super(key: key);
  @override
  State<Team1> createState() => _Team1State();
}

class _Team1State extends State<Team1> {
  double _left = 0;
  double _top = 0;
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Positioned(
          left: _left,
          top: _top,
          child: GestureDetector(
            onPanUpdate: (details) => setState(() {
              _top = max(0, _top + details.delta.dy);
              _left = max(0, _left + details.delta.dx);
            }),
            child: Container(
              height: 30,
              width: 30,
              color: Colors.blue,
              child: Center(
                child: Text('1'),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

class Team2 extends StatefulWidget {
  const Team2({Key? key}) : super(key: key);

  @override
  State<Team2> createState() => _Team2State();
}

class _Team2State extends State<Team2> {
  double _left = 0;
  double _top = 0;
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          left: _left,
          top: _top,
          child: GestureDetector(
            onPanUpdate: (details) => setState(() {
              _top = max(0, _top + details.delta.dy);
              _left = max(0, _left + details.delta.dx);
            }),
            child: Container(
              height: 30,
              width: 30,
              color: Colors.red,
              child: Center(
                child: Text('2'),
              ),
            ),
          ),
        ),
      ],
    );
  }
}