SwiftUI State — Intro to State in SwiftUI.

4 min readJun 12, 2019

A simple, written guide to SwiftUI State — Write your first SwiftUI app with State in less than 5 minutes.

Well fancy seeing you here, my name is Maxwell, and I run maxcodes.io. Nice to finally meet you. (scroll down to starting point, if you want to get started immediately.)

Below is a screenshot & gif of what you will build right now.

Coding, not theory.

This is a (Swift 5 Xcode 11 Beta) tutorial on Swift UI State. This tutorial is not theoretical in nature, just pure usage and application so you can learn how to use state in SwiftUI. I will write an article on the in-depth mechanics of State and add a link here in the future for those interested.

I recorded a video on this exact topic found here.

Starting Point. (Step 1) Let’s Jump Right Into Coding.

Create a new Xcode 11 single view application and make sure “use SwiftUI” is selected.

First, we will add in a VStack with the following properties to achieve the pictured effect.

alignment leading
padding 26

Throw some Text into the VStack.

Step 2 — Create a SwiftUI state value

Create the following State variable and assign it a value.

If you command-click on @ State you will be given a good explanation of what it is. What I want to focus on here are the discussion paragraphs.

When the state value changes, the view invalidates its appearance and recomputes the body. Use the state as the single source of truth for a given view.

This means, that wherever we have value set, it will update automatically whenever value is changed!

Step 3 — Creating a TextField in SwiftUI

Code in a TextField with the following modifiers:

.padding(10)
.background(Color.white)
.clipShape(RoundedRectangle(cornerRadius: 6))
.shadow(radius: 6)

This will give us the output pictured below. We have effectively bound the $value to this TextField by passing in $value as the first parameter to the TextField.

Paired with the knowledge we gained in step 2 above, it should be clear that whatever TextField’s value is, is also $values value. I probably should have named the variable something else now that I think about it 😅. Oh, whale 🐳.