SwiftUI - Dynamic List & Identifiable

Martin Lasek
Jun 10 · 8 min read

In this tutorial we will learn how to create a List that dynamically grows and we will learn about Identifiable. And how to add a Navigation with a Button✨


Watch the video tutorial of this article instead: here


Index

1. Create a new SwiftUI Project
2. Create a static List
3. Make the List be based on an Array
4. Dynamically add elements to the List
5. Where to go from here


1. Create a new SwiftUI Project

In Xcode 11 go ahead and create a new project and select Single View App:

Next make sure that Use SwiftUI is checked before you finally determine where to create the project ✨

You should be greeted with the default SwiftUI Template code like this:


2. Create a static List

In SwiftUI we have a couple ways of how we can use a list. There is only one List view however it’s very versatile which makes it great for a lot of use cases!

Let’s go ahead an create a static list of the classic starter pokemon:

What if I told you this is it? That there’s nothing else to add? Well.. It really is!

The List works like so that for each View that is inside of it a row will be rendered showing that View. We have 4 Text views. A row for each then 😊

How about we make our List a little more interesting before we move on and add the type to each pokemon like: fire, water, grass and electric? Let’s do it:

We’re using HStack to have the pokemon name and type stacked horizontally next to each other and we give the second Text view a cool matching color.

3. Make the List be based on an Array

A static List can make sense especially if you want to implement setting views. Our goal now is to adjust our List so that it is based of an Array of elements. There are a few ways of achieving that. Let’s have a look at two ways starting with the simpler one. Create a Pokemon struct with name, type and color:

Now we can go and create a variable inside of our ContentView struct, name it pokemonList and assign an array of Pokemon instances to it:

3.1 The function: .identified(by:)
Here’s the simple approach on how to make our List be based on our Array:

Whenever we use a List based of an Array we have to let the List know how to identify each row as unique. In our case the name of each pokemon works quite well. Our code and view should now look like this:

Let’s break our List a little to really understand the need of identified(by:) with simply changing the name of Squirtle to Charmander like so:

You can see that our List updates accordingly however something is off. If you look closely the second row indeed says Charmander just like our second element in our Array. But we kept the type of that second element to Water yet the List shows Fire. This is because the List is confused since it has two rows with the same Identifier. Two rows identify themselves with the String Charmander. That’s a no no. Let’s rename our Pokemon back to Squirtle 😊

3.2 The protocol: Identifiable
Here’s another way of letting our List know how to identify each row as unique and I think in the future we will prefer this one over the simpler one:

When conforming to the protocol Identifiable we have to to implement a variable called id however this variable does not have to be an Int. The protocol only requires that the type of the variable id is actually Hashable.

Note: Int, Double, String and a lot more types are Hashable — go try it out!

When confirming to the Identifiable protocol we no longer have to explicitly tell the List how the elements in our Array (which are conforming to that protocol) are uniquely identified 🥳


4. Dynamically add elements to the List

What we are about to do is really cool! We will add a NavigationBar to our List with a Button that randomly adds new Pokemon to our List. Cool? I told you!

SwiftUI is so verbose it’s unbearable. Adding a Navigation view is as simple as:

Now let’s add a title to our Navigation view and make sure you always do so on the first child view inside of your Navigation view like so:

You should end up with a view that looks like this:

Let’s implement a function that will randomly add a pokemon to our pokemonList variable and let’s also make our variable a @State variable so that as soon as we change its value (by for eexample adding new elements) our view updates automagically.

We learned how @State works here: SwiftUI - Understanding State

We are using the native .randomElement() function of an Array to get a random element. The returned element however is optional. That is because in the case of the Array being empty that function would return nil. That’s why we append the returned value only in the case it doesn’t return nil.

Now let’s add a Button view to our Navigation and have addPokemon being executed once tapped!

We can use the navigationBarItems function to add Views to our Navigation. Those views can be on the left side (leading) or on the right side (trailing) or even on both sides (leading, trailing) it’s up to you where you want them 😊!

We learned about the Button View here: SwiftUI — Understanding State

Go select a simulator, run your app and add Pokemons 🥳!


4. Where to go from here

This article is to get you started with List — there is way more to come! You can follow me here on Medium as well as on Youtube, Instagram and Twitter to not miss out on all future Articles and Video Tutorials!


I am really happy you read my article! If you have any suggestions or improvements of any kind let me know! I’d love to hear from you! 😊

Martin Lasek

Written by

I'm an always optimistic, open minded and knowledge seeking fullstack developer passionate about UI/UX and changing things for the better :)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade