close

flutter svg rendering

Why SVG?

SVG represents versatile vector designs. There might be numerous motivations to utilize SVGs, your visual creator companion may have been traded the application visuals as SVG or essentially you might not have any desire to utilize 5 diverse rasterized pictures for your application.

How to use SVG’s in Flutter?

In the event that you essentially utilize your SVGs with Image.network or Image.asset, you will get a codec mistake. They are not upheld yet.

Luckily, there is an answer from the network. There is a bundle called flutter_svg.

Image for post

We’re beginning with adding the bundle to pubspec.yaml. From that point onward, we can simply import it and use it.

import 'package:flutter_svg/flutter_svg.dart';

I have two factors for SVG’s, dogUrl and dogFoodUrl.

final String dogUrl = 'https://www.svgrepo.com/show/2046/dog.svg';
final String dogFoodUrl = 'https://www.svgrepo.com/show/3682/dog-food.svg';

From that point onward, you can utilize it like any gadget. With placeholderBuilder boundary, you can show another gadget while there is no association or while the picture is as yet stacking. In the model, I’ve picked a CircularProgressIndicator.

SvgPicture.network(
 dogUrl,
 placeholderBuilder: (context) => CircularProgressIndicator(),
 height: 128.0,
),

Furthermore, here’s a model with FloatingActionButton. You might need to understand what’s semanticsLabel boundary utilized for. You won’t see this content in the UI however it’s fundamental for openness. Screen perusers are perusing those marks.

FloatingActionButton(
  onPressed: () {
    print('Thanks');
  },
  child: SvgPicture.network(
    dogFoodUrl,
    semanticsLabel: 'Feed button',
    placeholderBuilder: (context) => Icon(Icons.error),
  ),
),
Image for post
Demo

Some notes from my experience

In the event that there a components in your SVG, this bundle doesn’t uphold CSS style components now. This implies your SVGs won’t be beautiful as mine. There is an issue about it on GitHub, and pjcau’s answer tackled my concern. Subtleties can be seen here. While you’re sending out with Adobe IA, basically pick styling as “Inline Style”. You can likewise in every case clean your <style> components with svgcleaner, in the event that they are not required.</p>

Thanks for reading this article ❤
If I got something wrong, Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also Read

Leave a Comment