is there a way to stack an an svg path above jepg image?

Question

I am trying to stack an svg path or we can say custom paint which draws a path of house over an jepg image of an house but i am unable to do it. is there any proper way to achieve it

Scaffold(
      appBar: AppBar(
        title: Text("Hello There"),
      ),
      body:Column(
        children: [
          Listener(
            onPointerDown: (e) => notifier.value = e.localPosition,
            onPointerMove: (e) => notifier.value = e.localPosition,
            child:
            Stack(
              children: [
                SizedBox(
                  height: 500,
                  width: 500,
                  child: Image.asset("assets/1.png"),
                ),
                SizedBox(
                    height: 500,
                    width: 500,
                    child: CustomPaint(
                      isComplex: true,
                      foregroundPainter: houseFillerPainter1(notifier),
                      painter: houseFillerPainter1(notifier),
                      child: const SizedBox.expand(),
                    ),
                )
              ],
            ),
          ),
          TextButton(
            onPressed: () {
              _fillColor = Colors.brown;
            },
            child: const Text(
              "Brown",
              style: TextStyle(color: Colors.black),
            ),
            style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.brown)),
          ),
          TextButton(
            onPressed: () {
              _fillColor = Colors.amber;
            },
            child: const Text(
              "Amber",
              style: TextStyle(color: Colors.black),
            ),
            style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.amber)),
          ),
          TextButton(
            onPressed: () {
              _fillColor = Colors.cyan;
            },
            child: const Text(
              "Cyan",
              style: TextStyle(color: Colors.black),
            ),
            style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.cyan)),
          ),
        ],
      )

    ) ;

#I have used custom paint to draw path and color in that particular path of house now i want to stack that custom paint over an actual jpeg image of that house but i am unable to do it need some advice

Answer 1

Assuming you aren't getting any errors and the problem is the positioning of the widgets, you can wrap the SizedBox in a positioned widget and move them with the top/bottom/left/right parameters. I would also recommend replacing SizedBox with a Container.

Positioned(
     top: 0, //change to fit over house
     left: 0,
     child: Container(
          height: 500,
          width: 500,
          child: Image.asset("assets/1.png"),
          ),
      ),
Positioned(
     top: 0, 
     left: 0,
     child: Container(
         height: 500,
         width: 500,
         child: CustomPaint(
          isComplex: true,
           foregroundPainter: houseFillerPainter1(notifier),
                            painter: houseFillerPainter1(notifier),
                            child: const SizedBox.expand(),
                          ),),