How to dynamically draw rectangles on an image in Flutter? - flutter

Question

I want to allow the user draw rectangles on the image he receives in a certain way and get the coordinates of the drawn rectangle. One of the ways I was thinking about is allowing him to tap on the image four times to draw a rectangle from these four coordinates. Currently I'm unable to get the exact local tap position.. it's not always exact.
Any recommendations for my requirements?
This is my current code:
double posx = 100.0;
double posy = 100.0;
void onTapDown(BuildContext context, TapDownDetails details) {
print('${details.globalPosition}');
final RenderBox box = context.findRenderObject();
final Offset localOffset = box.globalToLocal(details.globalPosition);
setState(() {
posx = localOffset.dx;
posy = localOffset.dy;
});
}
Offset _tapPosition;
void _handleTapDown(TapDownDetails details) {
final RenderBox referenceBox = context.findRenderObject();
setState(() {
_tapPosition = referenceBox.globalToLocal(details.globalPosition);
posx = _tapPosition.dx;
posy = _tapPosition.dy;
});
}
#override
Widget build(BuildContext context) {
double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width;
return
GestureDetector(
onTapDown: _handleTapDown,
onTap: (){
},
child:new Stack(fit: StackFit.expand, children: <Widget>[
// Hack to expand stack to fill all the space. There must be a better
// way to do it.
new Container(
color:Colors.white,
child: Image.asset("lib/assets/rectangles.png"),
),
// new Container(height:200,width: 100,color: Colors.white),
new Positioned(
child: new Text('.'),
left: posx,
top: posy,
)
]),
);
}