'painting house using custom paint

I have an svg image with its path and i wanna create a listener and paint on a specific path which i have clicked or selected it.

Color _fillColor = Colors.cyan;
final paths = [
    ["m829.35 691.34.96 21.77h-33.58l-1.01-23z", const Color(0xffacd266), "green1"],
    [
      "m829.35 691.34-33.63-1.23 4.15-2.05 34.26 1.03 1.37 22.38-5.19 1.64z",
      const Color(0xffacd266),
      "green2"
    ],
    [
      'm818.5 506v7l-20.53.49 16.34-1.82s-.41-8.7 0-8.29 4.19 2.62 4.19 2.62z',
      const Color(0xfffff),
      "white1"
    ],
    [
      'm810.96 497.49-39.34-25.66v-2.25l47.98 31.72.13 1.92-5.82-3.81-1.55 7.79z',
      const Color(0xffed1e29),
      "red1"
    ],
    [
      "m810.53 462.36.91 16.29-4.37-2.75-.58-12.26z",
      const Color(0xffacd266),
      "green3"
    ],
    ["m810.01 500.25v9.52l-22.5 1.84-.7-10.22z", const Color(0xfffff), "white2"],
    ["m810.01 500.25-23.2 1.14-1.13-16.46z", const Color(0xfffff), "white3"],
];

class _ImageFiller2State extends State<ImageFiller2> {
  bool showBorder = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          TextButton(
            onPressed: () {
              setState(() {
                _fillColor = Colors.brown;
              });
            },
            child: const Text(
              "Brown",
              style: TextStyle(color: Colors.black),
            ),
            style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.brown)),
          ),
          TextButton(
            onPressed: () {
              setState(() {
                _fillColor = Colors.amber;
              });
            },
            child: const Text(
              "Amber",
              style: TextStyle(color: Colors.black),
            ),
            style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.amber)),
          ),
          TextButton(
            onPressed: () {
              setState(() {
                _fillColor = Colors.cyan;
              });
            },
            child: const Text(
              "Cyan",
              style: const TextStyle(color: Colors.black),
            ),
            style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.cyan)),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 200),
            child: SizedBox(
              height: 50,
              width: 50,
              child: Transform.scale(
                scale:0.4,
                child: GestureDetector(
                  child: Center(
                    child: Stack(
                      children: widget.paths.map((e) {
                        return CustomPaint(
                            painter: MyPainter(
                                parseSvgPath(e[0].toString()), e[1] as Color,
                                showPath: showBorder
                            )
                        );
                      }).toList(),
                    ),
                  ),
                  behavior: HitTestBehavior.translucent,
                  onTap: () {
                    setState(() {
                      // hide/show border
                      showBorder = !showBorder;
                    });
                  },
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  final Path path;
  final Color color;
  final bool showPath;

  MyPainter(this.path, this.color, {this.showPath = true});

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = color
      ..strokeWidth = 4.0;
    canvas.drawPath(path, paint);
    if (showPath && color==const Color(0xffacd266)) {
      var border = Paint()
        ..color = _fillColor
        ..strokeWidth = 1.0
        ..style = PaintingStyle.fill;
      canvas.drawPath(path, border);
    }
    if (showPath && color==const Color(0xfffff)) {
      var border = Paint()
        ..color = Colors.pink
        ..strokeWidth = 1.0
        ..style = PaintingStyle.fill;
      canvas.drawPath(path, border);
    }
    if (showPath && color==const Color(0xffed1e29)) {
      var border = Paint()
        ..color = Colors.lime
        ..strokeWidth = 1.0
        ..style = PaintingStyle.fill;
      canvas.drawPath(path, border);
    }
    if (showPath && color==const Color(0xffc844)) {
      var border = Paint()
        ..color = Colors.purple
        ..strokeWidth = 1.0
        ..style = PaintingStyle.fill;
      canvas.drawPath(path, border);
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

I am able to paint house but i wanna create a listener and when ever i tap on a certain section of house i can paint on certain part only

enter image description here

the above picture what i got and in the left top side you can see a red circle right now i am able to paint on the house only when i tap on that circle part need some help



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source