Adding SVG image to Flutter

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.

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

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

--

--

--

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

Recommended from Medium

Refuel on Bungee

Patterns for Saner Mocking

[DPS909] Adding Continuous Integration with Github Actions

Top Picks for this Week

Crodo.io — a brief overview of the top project

How to Access a Computer Remotely from Anywhere

Mocking APIs with OpenAPI and Imposter

Migrating from legacy code 👉 Kotlin Flow 🚚

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 | Local Notifications Custom Sound

Introduction to Android/Flutter app’s security with DummyCastle library.

Using Riverpod Future Provider to Fetch API

Using Huawei App Messaging in Flutter