Check Mobile App
Read now
Start a Project

SVG in Flutter

Save

In this article, we are going to learn how to use SVG in Flutter. So let’s get started.

What is SVG and why to use ?

You may be heard of something like SVG icons because of their popularity among designers or developers.

SVG stands for Scalable Vector Graphics which is an XML-based markup language for describing 2D-based vector graphics. SVG images can be rendered at any size without losing quality.

Using SVG’s in Flutter

If you use SVGs like others i.e. png, jpg into your Image.network or Image.asset, you will get an image codec error.

Because they are not supported yet.

Fortunately, there is a solution from the Flutter community, the flutter_svg package.

We start by adding this package to pubspec.yaml:

After that, import it and use it like any other widget into your Flutter project:

I have used this SVG: https://www.svgrepo.com/show/217740/android.svg

Issue with this package

If you use SVG that contains <style> element your SVG will be rendered into the flutter app as there are no <style> elements in your SVG or colorless because this package doesn’t support CSS style in SVG yet. You can use inline styles in your SVG which are supported by this package as detailed here.

Thanks for reading.

Happy Coding 🙂

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

css.php

Very good company, we did get app extension for Magento 2 website. The support was very good they help us through the process. Webkul team is very supportive, I would recommend them.

Yasser Mohamed

Yasser Mohamed

Talk to Sales

Global

Live Chat
Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home