CODEWITHSUNDEEP
fluttersvg
derChris
derChris

Reputation: 890

Flutter - How to display composed SVG image correctly

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 SVGPictures, 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.

Upvotes: 0

Views: 987

Answers (1)

Ravi Singh Lodhi
Ravi Singh Lodhi

Reputation: 2783

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,
    ],
  );
}

Upvotes: 1

Related Questions