Step By Step Tutorial in Learning Flutter: Lesson 11— Adding Image (Grass 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 Grass 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 237, this is our Grass Pokemon Screen

We will duplicate the lines of code from Fire to our Grass 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/005.png'),
              ),
              title:  Text('Charmeleon'),
            ),

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

            ListTile (
              leading: Image(
                image: NetworkImage('https://assets.pokemon.com/assets/cms2/img/pokedex/detail/250.png'),
              ),
              title:  Text('Ho-Oh'),
            ),

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

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

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

          ],
        )

    );
  }
}

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

Will become

We will now replace each NetworkImage and Text for our Grass 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 Paras, Bellossom, Monferno, Roselia and Serperior.

Below will be the entire code of our GrassScreen Pokemon

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

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

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

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

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

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

          ],
        )

    );
  }
}

Save it and Run

That’s it! We have completed our Grass Pokemon

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