How to calculate the coordinates of an element when rotating or shifting an image?

Question

Android

Hello.
The idea is this: display a picture on the screen and put markers with a tap .
And of course, the problem is: I display a picture, and put markers on the picture with a tap. But when shifting left / right, the markers do not remain in the place where they put them.
Is it possible to somehow calculate the coordinates so that the markers are fixed on the screen?

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';

class PhotoPick extends StatefulWidget {
  @override
  _PhotoPickState createState() => _PhotoPickState();
}

class _PhotoPickState extends State<PhotoPick> {
  var list = [
    'https://lh3.googleusercontent.com/proxy/fus43q0nx7HfVipBl3VqtCONrPZneoX1bfwnaGOUO4R97ieSnwtq2T01zKPTt7WDY2BeZBa7DvUVYjWGw2uPFcCsCiKf',
    'https://geomergroup.ru/docs/img/ServicePic/tehplan-torgovogo-centra.jpg',
    'https://www.voskov.ru/custom/u/catalogue/obj/40/scheme-ewk99i.JPG',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView.builder(
          itemCount: list.length,
          itemBuilder: (context, int index) {
            return Container(
              padding: EdgeInsets.only(top: 30),
              child: GestureDetector(
                onTap: () {
                  var img = list[index];
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => TestPage(img: img),
                    ),
                  );
                },
                child: ListTile(
                  title: Image.network(list[index]),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

class TestPage extends StatefulWidget {
  final img;

  TestPage({Key key, @required this.img}) : super(key: key);

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

class _TestPageState extends State<TestPage> {
  var lst = [];

  @override
  void initState() {
    super.initState();
  }

  void addWidget(double dx, double dy, double direction, double distance,
      double distanceSquared, double height, double width) {
    int r = Random().nextInt(255);
    int g = Random().nextInt(255);
    int b = Random().nextInt(255);

    var value = Positioned(
      left: dx,
      top: dy,
      child: Container(
        child: IconButton(
          color: Color.fromRGBO(r, g, b, 1),
          onPressed: () {},
          icon: Icon(
            Icons.gps_fixed_outlined,
            size: 24,
          ),
        ),
      ),
    );

    setState(() {
      lst.add(value);
    });
  }


  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;

    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        child: Stack(
          children: [
            GestureDetector(
              onTapDown: (details) {
                final dx = details.globalPosition.dx;
                final dy = details.globalPosition.dy;
                final direction = details.globalPosition.direction;
                final distance = details.globalPosition.distance;
                final distanceSquared = details.globalPosition.distanceSquared;

                addWidget(dx, dy, direction, distance, distanceSquared, height,
                    width);
              },
              child: PhotoView(
                enableRotation: false,
                
                onTapDown: (context, details, controllerValue) {
                  final dx = details.localPosition.dx;
                  final dy = details.localPosition.dy;
                  final direction = details.localPosition.direction;
                  final distance = details.localPosition.distance;
                  final distanceSquared = details.localPosition.distanceSquared;

                  // addWidget(dx, dy, direction, distance, distanceSquared,
                  //     height, width);
                },
                imageProvider: Image.network(widget.img).image,
              ),
            ),
            for (var item in lst) item
          ],
        ),
      ),
    );
  }
}

Answer 1

I think it's worth a different approach to the task.
I would make a local copy of the image with markers on it. The RepaintBoundary
widget will help you with this. By referring to the key of this widget, you can make a png image of your markers along with the current image on the bottom layer and then combine these two layers and get a new image Here is an example of how to create a picture based on this widget

final RenderRepaintBoundary boundary =
        globalKey.currentContext.findRenderObject();
    final ui.Image image = await boundary.toImage();
    final ByteData byteData =
        await image.toByteData(format: ui.ImageByteFormat.png);
    final Uint8List pngBytes = byteData.buffer.asUint8List();
    await File(yourPath).writeAsBytes(pngBytes);
    return pngBytes;

Answer 2

I had such a task. I solved it with a combination of Stack and Transform widgets , in short.