StatefulWidget

[00:00:00]
>> So we need to upgrade our widget to a state full widget. So we have two kinds of widget to the flutter, stateless widget, stateful widget. In a stateful widget is the one that can change its own content based on things that happen within that widget. Does it makes sense?

[00:00:25]
If you receive the name as a property, from the outside, it's either a stateless widget. It receives property from the outside. We are going to have a lot of examples of that. But if the wizard itself is changing its content based on an event or an external factor, then it should be an stateful widget.

[00:00:48]
So instead of extending from a stateless, we just extend from a stateful. But there are a couple of steps to be done. Unfortunately, we have a simpler way to do this. Instead of doing manually, if you put your cursor over the class declaration on both Android Studio and Visual Studio, you get this little hint there.

[00:01:13]
Or that you can access that with Alt+Enter in Android Studio, or command or ctrl., on Visual Studio. So when you access that, there is an option to actually convert it into an a stateful widget. Okay, do you see that one? Convert to a stateful widget. So if I click there, it actually converted my great widget into an a stateful widget.

[00:01:44]
And you can see that a stateful widget has two steps, that it's weird, to be honest. The first time you see that, is kind of what's going on here? So first, you're a stateful widget, now, it still contains the same key property. And now, it has an state object that is of another class, that by the way, the classes start with underscore.

[00:02:06]
Do you remember what underscore means? Private, so actually from the outside of this package, no one can actually use my state directly. Was the state another class extending from a state? And it receives the name of the widget as a generic. It feels strange, by the way, if it's weird for you to see this happening here like two classes, it's just an executive order, okay?

[00:02:36]
This is how it is, this is how flutter works. Okay, there is no other way to do this. So you need to grade when you have an a stateful widget, you have two classes. The widget itself that actually is going to be plain simple, always. Most of the time, your widget will look like this.

[00:02:53]
And the current rendering happens actually in the state, okay? So if I save this, and it try this again, if it's still not working. Hey, Max, you lied to us, we graded a stateful wizard, but nothing happens. Because there is one more step, every time you make a change in the state that will make a re-render.

[00:03:21]
First, every time there is the bill function is being executed. In this case, we are initializing a new variable name. And this is a problem, because every time we're building, we're starting from scratch. So actually, when I need to move my variable outside, I make it a property of the class of the state class, this is my state variable.

[00:03:47]
So the state variable is one or more variables that are actually defining changes in my user interface in this widget, okay? So I just move the variable as a property of the class. And the other thing that I need to change is, I cannot change the variable like this.

[00:04:05]
I need to do that within a set state method. So there is a set state method that receives a function as an argument, where you need to put all the changes that you trigger every render. I don't need that semicolon. So we can put this in, if I save, now, that coma shouldn't be go there and there is a semicolon, there we are.

[00:04:40]
You have the code, if you wanna see it in the companion website. So actually, how to make changes in your own user interface? You grade variables as as properties of the state class, and then you change the values of those variables within a set state call. If you're coming from react, from let's say, classic react development.

[00:05:03]
We did the same thing with class components in React, they had the same set state idea. So we change the state in a setState. So if I save these now and try these on the screen, I started typing. And if you look at that every time the variable is changing, the system is re- rendering the widget.

[00:05:25]
So it's going through the bill method again, okay? Make sense? So we're going to do this a lot a couple of times anyway, stateful widget, stateless widget. It takes time to get used to this practice, mostly, if you have never played with the reactive framework. Do you have any question on this little grade impression?

[00:05:48]
>> No, it's actually, is there any shortcut to get a state one?
>> So if you wanna create in a state full-
>> State full.
>> From the ground up, it's stful. So, stful, Enter, it creates both, and then you start the class. It creates both the widget class and the state class, and it makes everything connected properly.

[00:06:12]
Okay, so again, to create a new stateful widget. If you type stful, Enter, and immediately the name of the widget that you want, like person name, whatever. So in this case, it's creating the widget, the state and everything is automatically connected. You will see that flutter is actually, the flutter code is large.

[00:06:39]
So typically, when you look at flutter code, you have a lot of lines of source code. But we are heavily based on the tool to make that code. Not every time we are going to create these manually. For example, remember the column that I did? What if I want now my, let's see, I want the text to be in a row.

[00:07:04]
We have column and also, we have row, row will actually stack elements in the same row. Okay, so in the same line, so I need to add a row and the row has children inside. But instead of doing that, look at this, if I put my cursor over the text, I have this little guy here.

[00:07:27]
If I click there, I have a lot of options available on both Android Studio and ambitious Studio code. I can wrap this with the row, or with other things that we don't know what they are yet. So if I say wrap with row, it creates the row with the children property, the array, I need to put my text inside with a trailing comma.

[00:07:53]
So most of the time, we're going to be using these tools to wrap, to add widgets, remove widgets and work with widgets, okay? So now, you can add another text here with something else. Okay, something like that coma, so now, there is a row there, okay? And then we have a column with a row and we can nest this as much as possible.

[00:08:21]
And why do I have a warning there on that text?
>> Const.
>> The const, because this is not changing, it's asking me for a const. Again, if I don't add the const, nothing will happen, but the compiler thinks that it will be more efficient unless a buggy, okay?

[00:08:39]
To define that as a const, because I know the content is not changing, okay? Make sense? So we have a stateless widget and we have a stateful widget. On every situation you pick the one that you prefer or you need. And anyway, if you pick the wrong one, it's easy to move to the other one.

[00:08:58]
It's just changing the superclass and adding or removing that auxiliary class that we are adding the state class.