Your First iOS & SwiftUI App: An App from Scratch

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

If you build and run bullseye or interact with it in the canvas, you'll notice that you can't currently move the slider. If you recall, that's because when we first set up the slider, we set it to be a constant value of 50. And this is a good time to look at a useful Xcode feature. It allows you to find out more about just about anything in the code that has a name. While holding down the option key, move the cursor over the constant in the slider line. The word constant should change color and the cursor shape should change to a question mark. Click on constant and a little pop-up window will appear with more details about constant. Take a look at the summary text. "Creates a binding with an immutable value." May sound like meaningless techno Bible to you now, but the words binding and immutable should be hints that state has something to do with it. Let's dive a little bit deeper into what's going on here. If you've ever gone to a restaurant where the sign or their website said they were open only to find that they were closed when you tried to enter, you've experienced what happens when a user interface doesn't match the state. The science says it's open, but it's closed. This is similar to the example we talked about earlier where your car dashboard is broken. This kind of problem happens when the user interface and state aren't connected. As we talked about earlier, you may have seen this sort of problem happen in software as well. As applications grow, their state becomes more complex and it's all too easy to forget to update some part of the user interface when a state detail changes. Remember, SwiftUI was designed to solve the problem of the mismatch between user interface and application state. One of the things SwiftUI provides to help with this is something called bindings. Bindings are a fancy way of saying that a particular user interface view will always be tied to a particular state value. For example, in this video, you're going to learn how to bind the slider value to a state variable that stores the value of the slider. By doing this, every time you move the slider, the state variable will automatically be updated to match. And vice versa, if you update the state variable, the slider will also automatically update. Effectively, they are bound together. Let's see how we can use SwiftUI bindings to solve the mystery of the stuck slider. Back in bullseye, if your preview has stopped, you can restart by hitting option command P. Now, just like the alert, we're going to need a state variable to keep track of the value of the slider. So creating it will actually be really similar to the way we created this other state property. So start with @State private var. This time we're going to call it slider value. And for the type, we don't want a Boolean value this time. We need this to match a type that the slider can use. A basic explanation of the requirement here is that it needs to be a value that has a decimal placed and the usual type for that is called a double. Then for the initial value, set it to be 50. Alright, so now we have a state variable. So now what we need to do is we need to make a binding to that slider value so that whenever the slider changes, it updates the state variable for us. So down in the slider code, delete this constant and instead, add a binding to slider value. And again, the way you convert a state variable to a binding is by putting a dollar sign before it like this. We can keep the same range from one to 100, that's still exactly what we want. So let's try this out in the canvas. Make sure that live button is highlighted first and then just try dragging the slider around. To see that this variable is actually setting the starting value of the slider, I'm gonna change this slider value temporarily from 50 to 10. And you can see that instantly update in the canvas. Now, I can undo it with command Z, back to what it used to be.