[SOLVED] Drawing a SVG image on a Canvas in flutter, with flutter

Drawing a SVG image on a Canvas in flutter, with flutter_svg

I would like to be able to draw both SVG images and painted graphics (mostly lines between the SVG) on a Flutter Canvas. Currently, I am stuck at the step of being able to paint SVG on the Canvas.

I tried different approaches with flutter_svg. The most sensible one seems (to me) to be the following. But when I execute the code, the blue circle appears, but not the Svg image (which I already checked that it works with flutter_svg). It also seems that I have sometime some warnings regarding a null reference to a closure, when I hot reload the app.

class MyCanvas extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Color.fromARGB(255, 15, 9, 184);

    vg
        .loadPicture(const SvgAssetLoader("assets/Monogramme_dark.svg"), null)
        .then((picture) => picture.picture
            .toImage(50, 50)
            .then((image) => canvas.drawImage(image, Offset(100, 100), paint)));

    canvas.drawCircle(Offset(50.0, 20.0), 10, paint);
  }

  @override
  bool shouldRepaint(MyCanvas oldDelegate) => false;
}

Solution

As I've written in my previous answer, there are different approaches for this, instead of using Canvas.

You can Define your working area as a rectangle, square, or whatever shape you prefer, and draw everything relative to that area.

For this, you can use the Stack and Positioned widgets to draw components on top of each other, and on specific locations. Look at this answer on Stack Overflow

You can also look at this tutorial on Medium Dragging, zooming, and placing objects on indoor maps with Flutter which explains a similar system created with Canvas, where you can place objects and interact with them.

Don't forget that despite using Canvas, you can still take advantage of the SetState properties of Flutter, to track any items.