find ontap position of an element inside a container in canvas flutter - flutter

Question

The point where I tap creates a line from the center to that point. But currently I can't get the coordinates of the tap that match the canvas coordinates. Is there any way to change the scaffold origin (0,0) and set its origin to the same as the container origin?
If bastman hits run then I want to show the direction where he/she runs with a black line.
import 'dart:ffi';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'dart:ui' as ui;
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final GlobalKey _cardkey = GlobalKey();
double posx = 100.0;
double posy = 100.0;
Size? cardSize;
Offset? cardPosition;
var height = AppBar().preferredSize.height;
ui.Image? image;
void onTapDown(BuildContext context, TapDownDetails details) {
// print('${details.globalPosition}');
final RenderBox box = context.findRenderObject() as RenderBox;
final Offset localOffset = box.globalToLocal(details.globalPosition);
setState(() {
posx = localOffset.dx;
posy = localOffset.dy;
});
print(posx);
print(posy);
}
#override
void initState() {
// TODO: implement initState
super.initState();
// WidgetsBinding.instance!.addPostFrameCallback((_) {getSizeAndPosition(); });
loadImage('assets/images/wheel.png');
}
Future loadImage(String path) async {
final data = await rootBundle.load(path);
final bytes = data.buffer.asUint8List();
final image = await decodeImageFromList(bytes);
setState(() {
this.image = image;
});
}
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
// appBar: AppBar(
// title: Text("Canvas"),
// ),
body: Center(
child: Container(
decoration: BoxDecoration(
border: Border.all(),
shape: BoxShape.circle,
color: Colors.green),
height: double.infinity,
width: double.infinity,
child: GestureDetector(
key: _cardkey,
// onTapDown: (TapDownDetails details){
// onTapDown(context, details);
// },
onTap: (){},
onPanStart: (details) {
Offset position = details.localPosition;
setState(() {
posx = position.dx;
posy = position.dy;
});
print(posx);
print(posy);
},
onPanUpdate: (DragUpdateDetails details) {
Offset position = details.localPosition;
setState(() {
posx = position.dx;
posy = position.dy;
});
},
child: FittedBox(
child: SizedBox(
width: image!.width.toDouble(),
height: image!.height.toDouble(),
child: CustomPaint(
// key: _cardkey,
painter: ImagePainter(posx, posy, image),
),
),
),
),
),
),
),
);
}
}
class ImagePainter extends CustomPainter {
double? posX;
double? posY;
ui.Image? images;
ImagePainter(double posx, double posy, this.images) {
posX = posx;
posY = posy;
}
#override
void paint(Canvas canvas, Size size) {
final center = Offset(size.width / 2, size.height / 2);
final CenterX = size.width / 2;
final CenterY = size.height / 2;
final paintCircle = Paint()
..strokeWidth = 5
..color = Colors.green
..style = PaintingStyle.stroke;
// canvas.translate(size.width/2, -size.height/2);
// canvas.scale(1,-1);
final paintImage = Paint()
..strokeWidth = 5
..color = Colors.white
..style = PaintingStyle.stroke;
// canvas.translate(size.width/2, -size.height/2);
// canvas.scale(1,-1);
final paintLine = Paint()
..strokeWidth = 5
..color = Colors.black
..style = PaintingStyle.stroke;
canvas.drawCircle(center, size.width / 2, paintCircle);
var circleCenter = Offset(size.width / 2, size.height / 2);
var radius = size.width / 8;
canvas.drawImage(images!, Offset(0, 0), paintImage);
var line = canvas.drawLine(center, Offset(posX!, posY!), paintLine);
// print("$line");
}
#override
bool shouldRepaint(CustomPainter olddelegate) => true;
}

Answer 1

Dont use a GestureDetector. It won't give you the position of a single tap. If you want the position of a onTap you need to use a Listener:
Listener(
onPointerDown: (event) {
setState(() {
posx = event.localPosition.dx;
posy = event.localPosition.dy;
}
}
),
The localPosition property should match the coordinates of the container IF you don't resize the child of the container. If they are not correct for some reason use event.position instead which will give you coordinates in the global coordinate space.