iOS App in 30 mins! — Part 3

Now lets work on the details view

Lets create new file underViews using the SwiftUI template called PokemonDetailsView.swift

And paste in this code.

Let me explain. Because the detail view would contain multiple data points it would be easier to work with a DataModel which here is our PokemonDetailModel struct

Also notice that I’ve allowed var model: PokemonDetailModel? to be optional. This is because the data will be fetched on appear. Therefore the view would need to initialize without the data.

Now lets create some mock data so we can see something in the preview.

Run it in the preview

You should see the above.

Let add the official art work on top.

When we navigate to this view we need to know which Id of Pokémon we want, therefore we should init the view with an id

If we can have the id we also can get the image. Let add an image to the details view

Tada!

now let’s clean this up using list and some spacing!

That looks decent

Now let’s integrate this with the list view and navigate over.

First in ContentView.swift lets wrap the PokemonListView with a NavigationView

Secondly lets add a title in the for the List view

Next lets add the navigation to the details view by using NavigationLink

Run it in the simulator and you should be able to navigate between the List and detail view

Oh we forgot to add the API call onAppear and parse the response.

Thats more like it! There you go! a simple iOS app!