iOS App in 30 mins! — Part 2

Now to the UI!

The first view we will be building would be the PokemonListView

Lets create new folder called Views and create a file using the SwiftUI template called PokemonListView.swift

Next we will create a list with a few rows of text like so

In the preview on the right side press the play button and you should see the following:

Now let’s get some images in!

We are going to align the name and the images on a single row. So for that we need a HStack (Horizontal Stack). For the image we are going to use the AsyncImageView which takes in a URL.

To get the URL we will be using the `getPokemonSprites(id: String)` function

You should see this

Now that we have that we are going to call the api and dynamically populate the list.

Before that, you may notice that the Get pokemons api does not have id. we will have to get the id from the url string.

Add an extension to GetPokemonResponse.Pokemon to make this easier.

Now back to the view.

First we need to keep add a @State variable pokemonsto the view to store the pokemons we get from the api. Using that variable we will populate the list like such

Tada! the list of 151 Pokémons!

Next we will add the PokemonListView to the ContentView and run it in the simulator

⌘ + R!

Lets add some embellishments

To the next part!

https://johannfong.medium.com/ios-app-in-30-mins-part-3-3709c40dbb82