Flutter_svg: ImageProvider is not supported

Created on 10 Apr 2019  路  5Comments  路  Source: dnfield/flutter_svg

Displaying a SvgPicture in a BoxDecoration does not work. This is because an ImageProvider is needed.

Is it possible to add this?

Most helpful comment

I think it would probably be possible to do something with a ShapeDecoration rather than a BoxDecoration.

You could also use DrawableRoot.toPicture like:

final String rawSvg = '''<svg viewBox="...">...</svg>''';
final DrawableRoot svgRoot = await svg.fromSvgString(rawSvg, rawSvg);

final Picture picture = svgRoot.toPicture();
final Image image = await picture.toImage(width, height);
return RawImage(image, 1.0);

All 5 comments

Not really. ImageProvider is for Images - you could make a SVG into an image and use it that way I suppose.

Can you share the code you're trying that isn't working?

This is the code I was trying to figure out.

``` @override
Widget build(BuildContext context) {
return Container(
height: height,
width: width,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
border: Border.all(
color: Colors.white,
),
image: DecorationImage(
image: const SvgImage('myAsset'), //(or something like getImage from the code below)
),
)
);
}

This is what I end up with:

```  @override
  Widget build(BuildContext context) {
    return Container(
      height: height,
      width: width,
      decoration: BoxDecoration(
        color: Colors.white,
        shape: BoxShape.circle,
        border: Border.all(
          color: Colors.white,
        ),
      ),
      child: ClipOval(
        child: _getImage(),
      ),
    );
  }

  Widget _getImage() {
    if (file != null && file.existsSync()) {
      return Image.file(
        file,
        fit: BoxFit.fill,
      );
    }
    if (placeholderAsset != null) {
      return SvgPicture.asset(
        placeholderAsset,
        fit: BoxFit.fill,
      );
    }
    throw ArgumentError('No placeholderAsset or file was provided');
  }

I think it would probably be possible to do something with a ShapeDecoration rather than a BoxDecoration.

You could also use DrawableRoot.toPicture like:

final String rawSvg = '''<svg viewBox="...">...</svg>''';
final DrawableRoot svgRoot = await svg.fromSvgString(rawSvg, rawSvg);

final Picture picture = svgRoot.toPicture();
final Image image = await picture.toImage(width, height);
return RawImage(image, 1.0);

Going to close this as WAI. PictureProvider and ImageProvider are just incompatble.

Also for doing this, there is a package based on flutter_svg.

Was this page helpful?
0 / 5 - 0 ratings