Step By Step Tutorial in Learning Flutter: Lesson 13 — Adding Image (Water Pokemon)

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. This is a continuation of the previous lesson, we will continue to add the images for our Water Pokemon.

Download the previous lesson code here to follow along.

At the end of the tutorial we will achieve the following screen as shown below

Scroll down to line 356, this is our Water Pokemon Screen

We will duplicate the lines of code from Ice to our Water Pokemon however we will start copying from body downward

So that will be

body:
        ListView (
          children: <Widget>[
            ListTile (
              leading: Image(
                image: NetworkImage('https://assets.pokemon.com/assets/cms2/img/pokedex/detail/361.png'),
              ),
              title:  Text('Snorunt'),
            ),

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

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

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

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

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

          ],
        )

    );
  }
}

Then, we will paste it on our WaterScreen replacing the body to the end }

Will become

We will now replace each NetworkImage and Text for our Ice Pokemon

And for the NetworkImage

Right-click on the image, Copy Image then replace the existing one

Do the same for the next Pokemon that is Cloyster, Lapras, Spheal, Vanillite and Walrein.

Below will be the entire code of our WaterScreen Pokemon

//This is our Water Pokemon Screen
class WaterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Water Pokemon"),
        ),
        body:
        ListView (
          children: <Widget>[
            ListTile (
              leading: Image(
                image: NetworkImage('https://assets.pokemon.com/assets/cms2/img/pokedex/detail/087.png'),
              ),
              title:  Text('Dewgong'),
            ),

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

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

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

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

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

          ],
        )

    );
  }
}

Save it and Run

That’s it! We have completed our Ice Pokemon

Hope you enjoy as much as I do, thank you until next time :)