Displaying a SvgPicture in a BoxDecoration does not work. This is because an ImageProvider is needed.
Is it possible to add this?
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.
Most helpful comment
I think it would probably be possible to do something with a
ShapeDecorationrather than aBoxDecoration.You could also use
DrawableRoot.toPicturelike: