Offsets are different onTap and OnDrag - Flutter

Question

I have an image in which certain items are there which have starting offsets and their height and width, corresponding to each item in images I have different text, I have to drag the text and drop it to the correct position on the image,I am getting different offset while tap to particular location and while drag also I am getting different offsets. How can I get the same offsets?

Here is my code and image I am using. these are the details of Tree

x=673
y=635
h=214
w=149

with respect to image.

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  ImageInfo _imageInfo;
  AssetImage assestImage;
  double dx;
  double dy;
  Offset dragOffset;
  @override
  void initState() {
    super.initState();
    assestImage = AssetImage('assets/hospital.jpg');
    WidgetsBinding.instance.addPostFrameCallback((a) => _getImageInfo());
  }

  void _getImageInfo() async {
    Image image = new Image.asset('assets/hospital.jpg');
    image.image
        .resolve(new ImageConfiguration())
        .addListener((ImageInfo info, bool _) {
      _imageInfo = info;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            DragTarget(
                onAccept: (Offset dragOffset) {},
                builder: (
                  BuildContext context,
                  List<dynamic> accepted,
                  List<dynamic> rejected,
                ) {
                  return TapImage(
                    onTap: (Offset offset) {
                      print('Offset on Tapping the image is $offset');
                      dx = offset.dx * _imageInfo.image.width;
                      dy = offset.dy * _imageInfo.image.height;
                      if (_imageInfo != null) {
                        print('Image clicked: ${dx.toInt()} x ${dy.toInt()}');
                        if ((673 <= dx && dx <= 822) &&
                            (635 <= dy && dy <= 849)) {
                          print('you drop in tree');
                        } else {}
                      }
                    },
                    image: assestImage,
                  );
                }),
            Draggable(
                dragAnchor: DragAnchor.pointer,
                onDragEnd: (details) {
                  setState(() {
                    dragOffset = details.offset;
                  });
                  print('dragoffset in onDrag Method is  $dragOffset');
                },
                data: dragOffset,
                child: Container(
                    color: Colors.green,
                    child: Text(
                      'Tree',
                      style: TextStyle(fontSize: 30.0),
                    )),
                feedback: Container(
                  height: 10.0,
                  child: Text(
                    'Tree',
                    style: TextStyle(fontSize: 15.0),
                  ),
                )),
          ],
        ),
      ),
    );
  }
}

typedef void OnTapLocation(Offset offset);

class TapImage extends StatelessWidget {
  TapImage({Key key, this.onTap, this.image}) : super(key: key);

  final OnTapLocation onTap;
  final ImageProvider image;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (TapDownDetails details) => _onTap(details, context),
      onLongPress: () {},
      child: Image(image: AssetImage('assets/hospital.jpg')),
    );
  }

  void _onTap(TapDownDetails details, BuildContext context) {
    RenderBox getBox = context.findRenderObject();
    Offset local = getBox.globalToLocal(details.globalPosition);
    print('locla ois $local');
    onTap(Offset(local.dx / getBox.size.width, local.dy / getBox.size.height));
  }
}

Answer 1

its working for me

class _HomeState extends State<Home> {
  ImageInfo _imageInfo;
  AssetImage assestImage;
  double getheight;
  double getywidth;

  Offset dragOffset;
  @override
  void initState() {
    super.initState();
    assestImage = AssetImage('assets/hospital.jpg');
    WidgetsBinding.instance.addPostFrameCallback((a) => _getImageInfo());
  }

  void _getImageInfo() async {
    Image image = new Image.asset('assets/hospital.jpg');
    image.image
        .resolve(new ImageConfiguration())
        .addListener((ImageInfo info, bool _) {
      _imageInfo = info;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          child: Column(
        children: <Widget>[
          TapImage(
            onTap: (Offset offset, RenderBox getBox, TapDownDetails details) {
              double dx;
              double dy;
              dx = offset.dx * _imageInfo.image.width;
              dy = offset.dy * _imageInfo.image.height;
              setState(() {
                dragEnd(dx, dy);
              });
            },
            image: assestImage,
          ),
          Draggable(
              dragAnchor: DragAnchor.pointer,
              onDragStarted: () {
                WidgetsBinding.instance
                    .addPostFrameCallback((_) => setState(() {
                          RenderBox getBox = context.findRenderObject();
                          getheight = getBox.size.height;
                          getywidth = getBox.size.width;
                        }));
              },
              onDragEnd: (details) {
                double dx;
                double dy;
                dx = (details.offset.dx / getywidth) * _imageInfo.image.width;
                dy =
                    ((details.offset.dy) / getywidth) * _imageInfo.image.height;
                setState(() {
                  dragEnd(dx, dy);
                });
              },
              child: Padding(
                padding: const EdgeInsets.only(top: 28.0),
                child: Container(
                    color: Colors.green,
                    child: Text(
                      'tree',
                      style: TextStyle(fontSize: 30.0),
                    )),
              ),
              feedback: Container(
                height: 10.0,
                child: Text(
                  'tree',
                  style: TextStyle(fontSize: 15.0),
                ),
              )),
        ],
      )),
    );
  }

  void dragEnd(double dx, double dy) {
    if (_imageInfo != null) {
      if ((673 <= dx && dx <= 822) && (635 <= dy && dy <= 849)) {
        showDialog(
          context: context,
          builder: (context) {
            return _textDescriptionDialog(
              context,
              'Drag on tree',
            );
          },
        );
      } else {
        showDialog(
          context: context,
          builder: (context) {
            return _textDescriptionDialog(
              context,
              'Drag outside',
            );
          },
        );
      }
    }
  }

  Widget _textDescriptionDialog(BuildContext context, String text) {
    return new FractionallySizedBox(
        heightFactor: MediaQuery.of(context).orientation == Orientation.portrait
            ? 0.5
            : 0.8,
        widthFactor: MediaQuery.of(context).orientation == Orientation.portrait
            ? 0.8
            : 0.4,
        child: Card(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(20.0),
            ),
          ),
          child: Container(child: Center(child: Text(text))),
        ));
  }
}

typedef void OnTapLocation(
    Offset offset, RenderBox getBox, TapDownDetails details);

class TapImage extends StatelessWidget {
  TapImage({Key key, this.onTap, this.image}) : super(key: key);

  final OnTapLocation onTap;
  final ImageProvider image;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (TapDownDetails details) => _onTap(details, context),
      child: Image(image: AssetImage('assets/hospital.jpg')),
    );
  }

  void _onTap(TapDownDetails details, BuildContext context) {
    RenderBox getBox = context.findRenderObject();
    print('size is ${getBox.size}');
    Offset local = getBox.globalToLocal(details.globalPosition);
    print('local is $local');
    onTap(Offset(local.dx / getBox.size.width, local.dy / getBox.size.height),
        getBox, details);
  }
}

Answer 2

You could make new Widget then get local render box size. Something like this:

class _MyHomePageState extends State<MyHomePage> {
  NetworkImage _networkImage;
  ImageInfo _imageInfo;

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

    _networkImage = NetworkImage('https://i.stack.imgur.com/2PnTa.jpg');
    _getImageInfo();
  }

  void _getImageInfo() async {
    NetworkImage _key = await _networkImage.obtainKey(ImageConfiguration());
    _networkImage.load(_key).addListener((ImageInfo i, bool b){
      print('Image size: ${i.image.width} - ${i.image.height}');
      _imageInfo = i;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ImageDetector(
          onTap: (Offset offset){
            if(_imageInfo != null){
              print('Image clicked: ${offset.dx * _imageInfo.image.width} x ${offset.dy * _imageInfo.image.height}');
            }
          },
          image: _networkImage,
        ),
      ),
    );
  }
}

typedef void OnTapLocation(Offset offset);

class ImageDetector extends StatelessWidget {
  ImageDetector({Key key, this.onTap, this.image}) : super(key: key);

  final OnTapLocation onTap;
  final ImageProvider image;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (TapDownDetails details) => _onTap(details, context),
      child: Image(image: image),
    );
  }


  void _onTap(TapDownDetails details, BuildContext context) {
    RenderBox getBox = context.findRenderObject();
    Offset local = getBox.globalToLocal(details.globalPosition);

    print('Clicked on: ${local.dx / getBox.size.width} - ${local.dy / getBox.size.height}');
    onTap(Offset(local.dx / getBox.size.width, local.dy / getBox.size.height));
  }
}

This will return click position between 0.0, 0.0 and 1.0, 1.0, you can get size of the image and get exact location from those.

Edit: updated the code