Work with @State and toggle buttons - Swift Tutorial

- [Instructor] Except for scrolling, we have little interaction with the app. And user input is critical to a good app. Let's begin learning about interaction by exploring state variables and buttons. We've learned a variable is a symbol that contains a value. A state variable extends this to have variables which when they change, reevaluate the view the state variable is in. Making a state variable is easy. Since we're using so much real estate for our header, let's make a button that makes it smaller for the preview but we can expand out for running in an iPad. The only change for a state variable is to add @State before the variable. So I can create this variable to control the size. So, let's go into here. I'm going to go up a little bit, to where we have the body and I'm just going to put right above the body in this case. So you can just hit return here. So I'll start with @state and then I'll put var after that. And then I'll put my variable in, which I'm going to call isSmall. And, as you can guess from the is in front, I'm going to make this one Bool. And as you see, it's going to start asking you for some information, it's still not happy here. And that's because you need to put an expression in here, assigning a value to a state, states must have a value. In this case I'm going to make the value true, so that we'll have a small version if this happens to be true. A state variable by itself is not enough. We need a control to change the state. A button is a control that you tap and it performs an action, usually changing a state. Buttons are made of actions and labels. So we can go back into the code here and put in a button. I'm going to put it right here, just above the divider in my code, which divides the header part from the rest of the body. And we can just start by typing in button. And you'll see there's a whole bunch of buttons here. There are two that I tend to use more than others. And the first one is this one, which is a string and an action, so that you can type just a string and then put in an action after that. Or, there is an action which is a closure and a label that's a closure. I like this one better, it's a little more flexible than this one, which only lets you put in a string. This is better for fast work, but this is much, much more flexible. So we're going to use this one right here. Instead of typing it in the way it is, I'm going to do it by hand, type a brace here because I'm going to be putting in the action first. So I'll put in the action here as isSmall. And I'm going to toggle it, that just changes it from true to false and false to true. So that works pretty well, in terms of toggling back which as its name suggests between two cases, okay? Now it's still giving me an error because I still haven't finished my button parameters 'cause there's a second closure to this, which is a label. So I'm going to go ahead and type in here label and put a colon, say okay, here's my second parameter. And then I can put another set of braces. And then inside of those braces, I can put whatever I'm going to use for a label. And I'm just going to use simple text for this. And, I could do something along the lines of a simple label, like this, and that would give me a label. Better to do something that gives me a state of what I'm in. And that's where state variables start to show up, with the trinary conditional operator that we looked at in a couple lessons ago. So I can put type isSmall here, and put a question mark. If isSmall is true, it will give isSmall. And then I put a colon. And I put what it's going to be if it is false, and that'll be isBig. And we don't see any code problems here but you'll notice the button's missing. Button text takes the accent color of the app. So if you take a look over here, let's go over to our sidebar. We see our accent color is the same color as our background. Our placeholder color you can see there and the accent color are green. And so we can't see anything 'cause it's green on green. Now you're going to go ahead and change that. But I'm going to put just a background on this. I'll put a padding. And I'll make it five, for the padding. And then I'll put a background in. We'll make that red. And we'll put in a RoundedRectangle, with a cornerRadius of five. And let's go back to the preview. I'll close that up and go over here. And you can see we now have a button. I can actually tap that button and it changes state. Now if I tap, that's causing the action to happen. The action toggles the value of isSmall from true to false, or false to true. A change of action causes the content of you to redraw. It looks at whatever our Text value is right here, okay? And, then decides that's the one that it needs to be. When I change the toggle, it'll change that all over again. And so you get a button that's working. So this reacts to the changes that I make with the actions. We can change anything in content for it to be affected by isSmall. So I'm going to go back up here to the fonts, we have up here. So I've got two fonts for the Huli Pizza Takeout and the size of the pizza. And, I'm going to change those. So the first one I'll do is the title over here. So this one here's got this large title. I'm going to get rid of that. And I'm going to change it to isSmall question mark. And then use title two, and we'll keep it at large title for this one. And you see that it changes already 'cause we are having isSmall, and I can see that it's working already. I can do the same thing for the fonts, of pizza order text. And that one I'm going to make headline and title3. And now those two are set, and I can now hit the small button and the big button. And you can see some change in terms of their sizes. I still am using a lot of real estate for that picture. So I'm going to get rid of the picture completely, if I'm in the small mode. So let's go down to where it says the image, for banner image. And I'm going to put that whole image in an if, so I can say if not isSmall. Now I have it in an if, and I can do that really easily or it's supposed to be. If you take those two dots, put your finger on top of the two dots, and drag down the finger. Now do this carefully and I tend to try to do it as far up the page as possible, 'cause it's can get a little cranky. But if you do that, you can then encapsulate all of that text right inside of the if statement, without having to do any cuts or pastes. So that's another way of moving the stuff around. Now you see on the preview, the image disappears. But if I push isSmall, the image returns. isBig, the image disappears. That's good. We of course could change the button around to make it a more user-friendly one, but I'm going to leave it like that for now. You'll also notice that, with being in the small mode, I have more real estate. And now my menu in the list is much bigger and I can see more pizzas this way. So that's a good part of this too. State is one of four ways of getting your app to react to changes in the app. Again, here's what we'll be seeing. When the button gets pressed, the action in the button changes the state variable. Changes to the state variable trigger the view to redraw with the new value. Reevaluating everywhere, there's a conditional for the state variable. There's more to using buttons than a toggle. In the next video, we'll add the pizza size with a set of multiple buttons.