How can I make point on an image or (Part of an image) clickable in flutter?

Question

The problem is I have an web app with the below image and every blue point in that image i clickable by adding <map> tag and detecting the coordinates on each point to assign a javascript function..

Image

This screen I want to develop it using flutter is that functionality available in flutter ?

Please note I try that but with no luck!

Widget build(BuildContext context) {
  return CustomPaint(
    painter: MultiClickableShapePainter(),
    child: Stack(
      children: [
        Image.asset('assets/CarInspector.png'),
        InkWell(
          onTap: () {
            print('by');
          },
        ),
        InkWell(
          onTap: () {
            print('hi');
          },
        ),
      ],
    ),
  );
}

class MultiClickableShapePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // Draw the first clickable shape on the canvas
    Paint paint1 = Paint()..color = Colors.red;
    Path path1 = Path();
    path1.addRect(const Rect.fromLTRB(150, 150, 250, 400));
    canvas.drawPath(path1, paint1);

    // Draw the second clickable shape on the canvas
    Paint paint2 = Paint()..color = Colors.blue;
    Path path2 = Path();
    path2.addRect(const Rect.fromLTRB(75, 75, 130, 200));
    canvas.drawPath(path2, paint2);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

Is there any suggestions solutions ?

Answer 1

Try using Positioned inside Stack to position the small circles

Place the child of Positioned inside InkWell

Approach

Stack
 |_ Positioned    👈 Circle 1
   |_ InkWell
     |_ Text 
 |_ Positioned    👈 Circle 2
   |_ InkWell
     |_ Text 
 |_ Positioned    👈 Circle 3
   |_ InkWell
     |_ Text 
 |_ Positioned    👈 Circle 4
   |_ InkWell
     |_ Text 

Code

    return Scaffold(
        body: Stack(
      children: [
        Image.network(
            'https://th.bing.com/th/id/OIP.XU225Remieh8Qmb2HXf4AwHaEa?pid=ImgDet&rs=1'),
        Positioned(
            left: 220,
            bottom: 80,
            child: CircleAvatar(
              radius: 12,
              backgroundColor: Colors.blue,
              child: InkWell(
                  onTap: () {
                    print("Pressed 1");
                  },
                  child: const Text('1')),
            )),
        Positioned(
            right: 24,
            bottom: 140,
            child: CircleAvatar(
              radius: 12,
              backgroundColor: Colors.blue,
              child: InkWell(
                  onTap: () {
                    print("Pressed 2");
                  },
                  child: const Text('2')),
            )),
        Positioned(
            right: 230,
            top: 52,
            child: CircleAvatar(
              radius: 12,
              backgroundColor: Colors.blue,
              child: InkWell(
                  onTap: () {
                    print("Pressed 3");
                  },
                  child: const Text('3')),
            )),
        Positioned(
            left: 53,
            top: 89,
            child: CircleAvatar(
              radius: 12,
              backgroundColor: Colors.blue,
              child: InkWell(
                  onTap: () {
                    print("Pressed 4");
                  },
                  child: const Text('4')),
            ))
      ],
    ));

Output: