Adding SVG image to Flutter

Building a flutter UI — lesson 02

Lesson 1: https://medium.com/@danieln.llewellyn/building-a-ui-with-flutter-lesson-01-a50f88a4d7db

Lesson 3: https://link.medium.com/h8VFOj1kV1

Overview

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

Images

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

We’re going to focus on loading SVGs from a network in this tutorial. We’re going to be loading from this site:

https://coinbaseliveexchange.appspot.com/currencies/image/BTC

(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

Open up pubspec.yaml and add this line to dependencies:

flutter_svg: ^0.14.4

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.

Watch

If you want to follow along without doing lesson 1. Solution will be at the bottom of the article.

git clone git@github.com:dllewellyn/crypto_currency_wallet.git
cd crypto_currency_wallet
git checkout LESSON_1