Your First iOS App: Data Flow in SwiftUI

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, this is because when we first set up the Slider, we set it up to a constant value of 50.

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 line Slider(value: .constant(50.0)). The word constant should change color and the cursor’s shape should change to a question mark (?). Click on constant. A 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-babble 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 web site) 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 sign says it’s open, but it’s not.

This similar to the example we talked about earlier, where your car dashboard is broken, causing you to get a ticket - or worse. 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 view 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 slider.

Back in Bullseye, if you’re 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 very similar to the way we created this other state property, so start with @State private var.

This time we’re going to call it sliderValue, 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 a value that has a decimal place, and the usual type for that is called a Double.

Then for the initial value, set it to be 50.0

@State private var sliderValue: Double = 50.0

All right, so now we have a state variable, so now what we need to do is we need to make a binding to that sliderValue so that whenever the slider changes it updates this state variable for us.

So down in the slider code, delete this constant, and instead add a binding to sliderValue

And again, the way you convert a state variable to a binding is by putting a dollar sign before it like this.

Slider(value: $sliderValue, in: 1.0...100.0)

We can keep the same range from one to 100, that’s still exactly what we want!

So, let’s try this out in canvas. Make sure that live button is highlighted, first.

Then just try dragging the slider around.

To see that this variable is actually setting the starting value of the slider, I’m going to 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.