Flutter - 如何正确显示合成的 SVG 图像

Question

I want to show a composed SVG image in flutter and I am currently using the flutter_svg library.

My picture consists of different layers that can be put together using the app's GUI (creating an avatar).

In principle it works very well with a stack of SVGPicture s, but when loading, the problem arises that some of the SVGs are displayed a little later than others and the graphics look broken in this short time - for example, the upper body of an avatar is not loaded but the rest of the body -> the avatar has a hole in the middle...

Is there a way to display a composition from SVGPictures only when all parts are loaded and can be displayed? Ideally, a dummy should also be displayed for this long.

Answer 1

SVGs with a lot of layers will definitely cause a bit of lag while loading, hence if you want to load them all smoothly, you can try preloading SVGs.

final svg = SvgPicture.asset('assets/vector.svg');
final svgAnother = SvgPicture.asset('assets/vector.svg');

@override
Widget build(BuildContext context) {
  return Stack(
    children:[
      svg, // Load preloaded svg smoothly
      svgAnother,
    ],
  );
}