How to draw a circle on particular tabbed position of the image in flutter?-CodePudding

Currently am working in flutter project am new to flutter. I need to add a dot on the image which position i have click.

`void gettingPosition (TapDownDetails details) {
    setState(() {
      x = details.globalPosition.dx;
      y = details.globalPosition.dy;
    });
    print("X,Y:$x,$y");
  }`
`GestureDetector(
          onTapDown: gettingPosition,
          child: Container(
            margin: const EdgeInsets.only(left: 8, right: 8),
            height: 300,
            width: double.infinity,
            child: Image.network(
              "https://w0.peakpx.com/wallpaper/300/911/HD-wallpaper-dark-vertical-black.jpg",
              fit: BoxFit.cover,
            ),
          ),
        ),`

Someone help me to add any color of dot on mouse clicking position on the image. Thanks in advance

CodePudding user response：

So you'll need to add a child of CustomPaint in your GestureDetector and provide the points that you are clicking from your mouse:

void gettingPosition (TapDownDetails details) {
final point = box.globalToLocal(details.globalPosition);
setState(() {
  mark.add(point);
});
  }
GestureDetector(
          onTapDown: gettingPosition,
          child: RepaintBoundary(
    child: Container(
      decoration: BoxDecoration(
          border: Border.all(color: Colors.blueAccent),
          image: DecorationImage(image: AssetImage('assets/skirt.jpg'))),
      width: MediaQuery.of(context).size.width * 0.5,
      height: MediaQuery.of(context).size.height * 0.5,
      child: CustomPaint(
        painter: MyCustomPainter(mark),
      ),
    ),
  ),
 ),

Then your MyCustomPainter needs to draw those points when you are adding them to your list :

class MyCustomPainter extends CustomPainter {
  final List<Offset> marks;
  const MyCustomPainter(this.marks);

  @override
  void paint(Canvas canvas, Size size) async {
    Paint paint = Paint()
      ..color = Colors.redAccent
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 10.0;
    canvas.drawPoints(ui.PointMode.points, marks, paint);
  }

  @override
  bool shouldRepaint(MyCustomPainter oldDelegate) {
    return true;
  }
}