SwiftUI - Understanding State

Martin Lasek
Jun 8 · 5 min read

In this tutorial we will dive into the fundamentals of State — what it is, why it’s good and how to use it ✨


Watch the video tutorial of this article instead: here


Index

1. Create a new SwiftUI Project
2. Create A Text and a Button View
3. Understanding State
4. Where to go from here


Requirements

You need macOS Catalina and Xcode 11 Beta in order to have SwiftUI render the canvas (simulator) properly. → How To Install Catalina + Xcode 11 Beta


1. Create a new SwiftUI Project

In Xcode-Beta just go ahead as usual 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 ✨


2. Create A Text and a Button View

You will be greeted with three .swift files from which we will solely focus on ContentView.swift. Inside here we see a Text view. Let’s add a Button view:

Let’s explain each line here. Now VStack allows you to vertically stack views. The counterpart is HStack and you guessed it — it allows horizontal stacking.

You can already feel how strongly SwiftUI focuses on closures and Views.

The Button view is instantiated with two closures. The first one we pass in will be executed when the button is tapped. The second one is for us so we can return a View inside of it which defines the appearance of our button.

If you now go ahead and run your code you should have this:

Let’s apply some styling to our Text so that it’s actually pleasing to look at it:

No worries if this feels a little intimidating. These functions are nothing more and nothing less but: new to us. And just as we learned how to set the UIView background color back in the days with:

The way we achieve a background color in SwiftUI is only a question of time until you can do it blindfolded too 😊

With this code you should have an awesome looking view like this:


3. Understanding State

Looking at our code we actually want to pass a name of a Pokemon into our Text view. Let’s not forget that we have nothing fancy but just a simple struct. We did use structs before and defined variables and functions inside of them.

So let’s define a variable with a pokemon name and a function that changes it:

Xcode should complain: Cannot assign to property: ‘self’ is immutable

That’s because structs by default can’t mutate their own properties / variables. They could when we say mutating in front of our switchPokemon function. However this isn’t really our issue — what we want is to write the new key word @State in front of our variable pokemonName and it’s fixed!

What does that new keyword do and why is it good?

When the state updates, the view invalidates its appearance and updates itself.

It basically means our View which is our body variable will be re-rendered as soon as we are changing a variable that has @State as a keyword in front of it.

Go ahead hit run and click the button to see how the text switches to pikachu!

When our body gets rendered the first time we have “Charmander” as a value or our variable with the @State s keyword in front of it. Our View displays “Charmander”. When we click the button it will update our variable to a new value that is “Pikachu” and because our variable is a state variable our View will be re-rendered and this time it displays “Pikachu”.

We can finish our random Pokemon name picker with actual random names:

Now you should end up having a View that automagically re-renders as soon as you change your variable that has @State in front of it and you should be able to switch to a random pokemon from your list by tapping the button 🥳


4. Where to go from here

This article is to get you started with State — 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