Step By Step Tutorial in Learning Flutter: Lesson 8 — Adding Image

A step by step tutorial on how you can add an image to your Flutter application which can be ran either in iOS and Android devices.

The end goal of this tutorial is add image in the ListView and ListTile

Credit goes to Pokemon for the images that will be used in this tutorial

On the last tutorial we discussed on how to create a ListView and ListTile where one of the properties is Title.

Today, Misterflutter will introduce the property called leading. For other properties please visit the official Flutter website

The widget leading is a widget to display before the title, typically an Image, Icon or CircleAvatar widget.

A great opportunity to accomplished our topic today in adding an image see below

Below is the syntax of the Image widget

Image(
  image: NetworkImage('https://www.domain.com/image/picture.png'),
),

And to add this Image, we put it on the leading property of the ListTile widget

Remember the NetworkImage is the URL to the image, take note it must be enclosed with a single quote

ListTile (
  leading: Image(
    image: NetworkImage('https://www.domain.com/image/picture.png'),
  ),
  title:  Text('Pikachu'),
),

From the previous lesson, you can download from here, on line 128 we will be adding a new line for the leading property and add the Image widget

Taking the structure of the leading property of ListTile then adding the Image widget that will form like below

ListTile (
  leading: Image(
    image: NetworkImage(''),
  ),
  title:  Text('Pikachu'),
),

The NetworkImage is the URL to the image, for this illustration we will grab pictures of Pokemon from Pokemon website https://www.pokemon.com

Right-click to Pikachu image, then click Copy image address (I am using Google Chrome)

Paste the copied image address to the NetworkImage

The code will be like below

ListTile (
  leading: Image(
    image: NetworkImage('https://assets.pokemon.com/assets/cms2/img/pokedex/detail/025.png'),
  ),
  title:  Text('Pikachu'),
),

Run the Flutter application

Note: If you don’t see the image, majority of the reason is you don’t have Internet connectivity. As we are getting the image from the Internet, this will require connection to the Internet to show the image

Continue for the next Electric Pokemon which is Raichu

Perform the same steps as above

Code will look like below

ListTile (
  leading: Image(
    image: NetworkImage('https://assets.pokemon.com/assets/cms2/img/pokedex/detail/025.png'),
  ),
  title:  Text('Pikachu'),
),

ListTile (
  leading: Image(
    image: NetworkImage('https://assets.pokemon.com/assets/cms2/img/pokedex/detail/025.png'),
  ),
  title:  Text('Raichu'),
),

Change the correct Image URL for the second Pokemon Raichu

After pasting the image address for Raichu, the code will be

ListTile (
  leading: Image(
    image: NetworkImage('https://assets.pokemon.com/assets/cms2/img/pokedex/detail/026.png'),
  ),
  title:  Text('Raichu'),
),

Hot Reload the Flutter application

Now it is your turn to apply what you have learned today :) Continue to add images to the remaining items

The final code looks below

ListTile (
  leading: Image(
    image: NetworkImage('https://assets.pokemon.com/assets/cms2/img/pokedex/detail/025.png'),
  ),
  title:  Text('Pikachu'),
),

ListTile (
  leading: Image(
    image: NetworkImage('https://assets.pokemon.com/assets/cms2/img/pokedex/detail/026.png'),
  ),
  title:  Text('Raichu'),
),

ListTile (
  leading: Image(
    image: NetworkImage('https://assets.pokemon.com/assets/cms2/img/pokedex/detail/082.png'),
  ),
  title:  Text('Magneton'),
),

ListTile (
  leading: Image(
    image: NetworkImage('https://assets.pokemon.com/assets/cms2/img/pokedex/detail/145.png'),
  ),
  title:  Text('Zapdos'),
),

ListTile (
  leading: Image(
    image: NetworkImage('https://assets.pokemon.com/assets/cms2/img/pokedex/detail/172.png'),
  ),
  title:  Text('Pichu'),
),

ListTile (
  leading: Image(
    image: NetworkImage('https://assets.pokemon.com/assets/cms2/img/pokedex/detail/125.png'),
  ),
  title:  Text('Electabuzz'),
),

If you are interested in getting the source code for the entire collection of step by step tutorials of Misterflutter read on this article

Hope you enjoyed reading and following along, until next time everyone

Please feel free to write your feedback by commenting on below.