CODEWITHSUNDEEP
flutterdartflutter-web
Diamond
Diamond

Reputation: 3428

How to render SVG in Flutter Web?

My final goal is to convert Flutter mobile app to Flutter web app. I used flutter_svg in Flutter mobile app but not working in Flutter web app.

What is the alternative plugin for Flutter web?

Here is error when I run project in chrome by using flutter run -d chrome.

The following UnimplementedError was thrown during paint():
UnimplementedError

The relevant error-causing widget was:
  RawPicture
  file:///C:/src/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_svg-0.17.4/lib/svg.dart:729:22

When the exception was thrown, this was the stack:
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 214:49  throw_
C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/ui/src/ui/canvas.dart 898:5                               drawPicture
packages/flutter_svg/src/render_picture.dart 193:12                                                                        paint
packages/flutter/src/rendering/object.dart 2264:7                                                                          [_paintWithContext]
packages/flutter/src/rendering/object.dart 184:12                                                                          paintChild
packages/flutter/src/rendering/proxy_box.dart 131:14                                                                       paint

or How to fix this issue in flutter_svg plugin in Flutter Web?

Upvotes: 7

Views: 4788

Answers (2)

jon
jon

Reputation: 3600

My Flutter web app would render SVGs in a desktop web browser but not a mobile web browser. I found it necessary to build with canvaskit support in order for SVGs to render on mobile:

flutter build web --web-renderer canvaskit

However, the docs state that canvaskit adds about 2MB in download size, which was a dealbreaker for me. Sad to say, but I will be using raster images until this is resolved.

Upvotes: 3

Abdullah
Abdullah

Reputation: 965

For now you can use Image.network for web to render svg like this

child: kIsWeb 
    ? Image.network("/assets/$assetName",
    width: width,
    height: height,
    fit: fit,
    color: color,
    alignment: alignment,
    semanticLabel: semanticsLabel)
    : SvgPicture.asset(assetName,
    width: width,
    height: height,
    fit: fit,
    color: color,
    alignment: alignment,
    semanticsLabel: semanticsLabel)

Upvotes: 14

Related Questions