CODEWITHSUNDEEP
flutter
Osama
Osama

Reputation: 523

I can't use svg on flutter web how can i do it?

Hi i cant seem to get svg images to showup on flutter web i saw two questions on stackoverflow with green tick to the answer that it says we can use Image.asset() as svg container but it doesn't work

what is the solution

Upvotes: 1

Views: 1346

Answers (1)

masewo
masewo

Reputation: 811

Until there is a proper solution you can use a HtmlElementView to show a svg on flutter web.

HtmlElementView can be used like this:

HtmlElementView(
    viewType: 'img-svg-${hashCode}',
)

You have to register your viewType first before you can use it:

platformViewRegistry.registerViewFactory('img-svg-${hashCode}',
      (int viewId) {
    final String base64 = base64Encode(utf8.encode(svgString));
    final String base64String = 'data:image/svg+xml;base64,$base64';
    final html.ImageElement element = html.ImageElement(
        src: base64String, height: width.toInt(), width: width.toInt());
    return element;
});

I created an example project that shows how to load svg from asset and how to do the web import dance if you want to use it for mobile and for web.

Upvotes: 4

Related Questions