在图像中检测点

Question

挑战： 是否有包含问题的在线测验->检测给定图像的确切部分？

情况：我可以使用下面的代码片段从图片中获得点击点，

Widget getImagePointWidget(){

  Image image = Image.network(
    'https://www.w3schools.com/w3css/img_lights.jpg', /// <--- placeholder image[![enter image description here][1]][1]
    height: SizeConfig.safeBlockHorizontal * 50,
    width: SizeConfig.safeBlockHorizontal * 100,
  );
  /// getting the original image size
  Completer<ui.Image> completer = new Completer<ui.Image>();
  image.image
      .resolve(ImageConfiguration())
      .addListener(ImageStreamListener((ImageInfo imageInfo, bool synchronousCall){
    completer.complete(imageInfo.image);

    print('\n\n original image width ${imageInfo.image.width} to local device width >>> ${SizeConfig.safeBlockHorizontal * 100}\n\n');
    print('\n\n original image height ${imageInfo.image.height} to local device height >>> ${SizeConfig.safeBlockVertical * 50}\n\n');
  }));

  return  GestureDetector(
    onPanUpdate: (DragUpdateDetails details){
      setState(() {
        _offset = details.localPosition;
        addImagePosition(_offset, answerOptions);
      });
    },
    onPanStart: (DragStartDetails details){
      setState(() {
        _offset = details.localPosition;
        addImagePosition(_offset, answerOptions);
      });
    },
    onTapDown: (TapDownDetails details){
      setState(() {
        _offset = details.localPosition;

        addImagePosition(_offset, answerOptions);
      });
    },

    child: Stack( children: <Widget>[

      image,

      // on screen touch indicator
      Container(
        child: ClipOval(
          clipper: CircleClipper(_offset),
          child: Container(
            height:  SizeConfig.safeBlockHorizontal * 50,
            width: SizeConfig.safeBlockHorizontal * 100,
            color: Colors.red,
          ),
        ),
      ),



    ]),
  );
}

和模拟器上的屏幕：

与网络团队一起查看正确答案时，这是错误的

这是用户应在其中选择一个点的形状

我尝试的方法：我尝试将给定图像宽度和高度的不同移动媒体查询进行比较，但这给出了错误的观点。

我需要做的：应该将用户在图像内选择的点计算为给定的图像，而不是不是设备媒体查询。

感谢您的帮助， 预先感谢。