In the world of mobile app development, having the right tools at your disposal can make all the difference. When it comes to rendering graphics and icons in Flutter, there are a few options available, each with their own strengths and weaknesses.
Fonts: A Great Option for Many Cases
One great option for rendering graphics and icons is using fonts. Yes, you read that right – fonts! With the rise of vector-based design, fonts have become an incredibly powerful tool for creating visually appealing and scalable graphics. By utilizing fonts, developers can create complex designs with ease, all while taking advantage of the scalability and flexibility that fonts provide.
A Library for Rendering SVGs on a Canvas
That being said, there are times when you need to render more complex graphics, such as those found in SVG files. To address this need, I’ve been working on a library that allows developers to render SVGs on a canvas within Flutter. The library is called flutter_svg, and it’s now available on pub for use with Flutter versions 0.3.6 and later.
The API: Simple and Easy to Use
One of the goals I had when developing flutter_svg was to create an API that is both simple and easy to use. With this in mind, the API looks something like this:
new SvgPicture.asset('asset_name.svg')
This code snippet shows how to render an SVG file named ‘asset_name.svg’ using the library. The resulting graphic will be sized to its parent widget (e.g. a SizedBox), and you can also specify a color and blendMode for tinting the asset if needed.
Current Limitations and Future Plans
While flutter_svg handles a good number of cases, it’s not yet perfect. I’ve listed the current limitations in the GitHub repository for the library, along with information on how to file issues or contribute to future development. As you can see from this repo, there are plans to expand the capabilities of the library further down the line.
What About SVG Support in Flutter Itself?
One question that has been raised about SVG support in Flutter is whether it’s something that should be built into the framework itself. Unfortunately, as of right now, Flutter does not currently support SVG files out of the box (see issue 1831 for updates). However, there are some workarounds available, such as using the Canvas API to draw vector graphics or rasterizing images on the native side and passing them to Flutter as bitmaps.
A Word of Caution About SVG in Flutter
I want to make one thing clear: the original GitHub issue referenced by Colin Jackson was not primarily focused on SVG support in Flutter. That being said, I’ve opened a new issue (https://github.com/flutter/flutter/issues/15501) specifically for discussing and implementing SVG capabilities within Flutter.
Conclusion
In conclusion, while fonts are a great option for many cases, there will always be situations where more complex graphics like those found in SVG files are needed. With the release of flutter_svg, developers now have a reliable library at their disposal that can handle these cases with ease.