Android App Development
iOS App Development
Flutter App Development
Cross Platform App Development
Hire on-demand project developers and turn your idea into working reality.
Big thanks to Webkul and his team for helping get Opencart 3.0.3.7 release ready!
Deniel Kerr
Founder. Opencart
Top Partners
In this article, we are going to learn how to use SVG in Flutter. So let’s get started.
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.
Read more about Flutter app development services from mobikul.
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
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 🙂
Your email address will not be published. Required fields are marked*
Name*
Email*
Save my name email and website in this browser for the next time I comment.
Be the first to comment.
We use cookies to personalize your experience. By continuing to visit this website you agree to our use of cookies. Learn more about privacy policy
Great Product, Great Team, and Great Support Service. And if you want to add more features to the product, they can submit any idea that comes to your mind. They really care about their clients and we are really happy and honored to deal with Webkul.
Osama
USA
India
Global
Name
Email
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.