Adding SVG image to Flutter
Building a flutter UI — lesson 02
Lesson 3: https://link.medium.com/h8VFOj1kV1
In the last article we looked at adding a simple widget in Flutter to show account information. In this article, we’ll add an image so we get something like this
You should be able to follow this article without reading the previous articles
Flutter actually has an image library built in to the core library which you can use. For loading local, static images you can use the following tutorial.
Adding assets and images
Flutter apps can include both code and _assets_ (sometimes calledresources). An asset is a file that is bundled and…
We’re going to focus on loading SVGs from a network in this tutorial. We’re going to be loading from this site:
(Obviously, replacing the BTC with the cryptocurrency ID)
Building a URL
For simplicity I’m going to create the following function
It’s fairly simple, and just adds the currency ID to the URL. Now, we’re going to look at adding dependencies to our pubspec.yaml in order to load a SVG. The library we’ll use is this one
flutter_svg | Flutter Package
Draw SVG (and some Android VectorDrawable (XML)) files on a Flutter Widget. This is a Dart-native rendering library…
Open up pubspec.yaml and add this line to dependencies:
It should look a bit like this
If you’re in android studio you’ll get a prompt to get the latest dependencies. Otherwise use
flutter pub get
Using the library
Add the following widget to our current AccountListItem
Refresh your app and you should see the SVG load.
Since we’re loading from a network, the SVG might take a while to load. Rather than have it load in all at once, we can set a placeholder image — or in fact, any place holder widget.
We’ll add a loading icon for the purpose of this demo.
SvgPicture.network(urlImageForCurrency(accountData.currencyValue), placeholderBuilder: (context) => CircularProgressIndicator())
And that’s it for this lesson, in future lessons we’ll look at loading images from files and animating the transitions. For now though, thanks for reading.
If you want to follow along without doing lesson 1. Solution will be at the bottom of the article.
git clone firstname.lastname@example.org:dllewellyn/crypto_currency_wallet.git
git checkout LESSON_1