Adding SVG image to Flutter

Lesson 1:

Lesson 3:


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.

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

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.,                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
cd crypto_currency_wallet
git checkout LESSON_1




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to Build Entity Recognition Models in a Jiffy using Watson Discovery-III

READ/DOWNLOAD#% Quality Engineering Handbook (Qual

Opportunities and Challenges in Edge Computing

GitHub Action — Deploy Applications to AKS

Install L2TP over IPsec with Freeradius on Ubuntu

Jelastic PaaS is Acquired by Virtuozzo: What to Expect

AMA with ICO Speaks: StrongNode IDO, $SNE Token, User Benefits, and Future Goals Explained

Building Event Streaming Architectures on Scylla and Confluent with Kafka

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Daniel Llewellyn

Daniel Llewellyn

More from Medium

Flutter Puzzle Hack Updates

History Of Flutter

Building a toggle-theme switch button in Flutter to toggle between dark & light mode

Introduction to UI Testing in Flutter | BrowserStack