StatelessWidget

[00:00:00]
>> If you're following the companion website, we will actually now go into reviewing two, three, chapter two, lesson three, our first widget, okay? So I'm going to create another widget with the name Greet, okay, to show you a little bit about the state. Because so far, we have this stateless widget but we don't actually understand what's going on.

[00:00:25]
So if I add another one, st less, remember stateless st less > Enter, the same on Android Studio. I'm going to create a Greet widget, okay? So I will call it Greet, and here it has a container. Okay, we still don't know what the container is. But what I want is to do something like the HelloWord but with a variable now.

[00:00:48]
So I will have a name here. So this is my name, actually my name is Maximiliano, I will type it completely. And how can I render, That text inside, like Hello Maximiliano? Well, you use Hello and then $name, okay, like we did before. Do I need to add const?

[00:01:15]
Actually, if I add const here, I have a compilation error, why? You know why? I mean, we had const before and it was working, but not now.
>> There's a variable in it.
>> There is a variable inside. So it's not constant. It may change, somehow we don't know how.

[00:01:36]
But the system, the compiler will say, hey, hey, this is not a constant text widget, it might change, okay? So now, instead of, let me scroll it down, instead of HelloWord, I'm going to add Greet, okay? So what I see here now says Hello Maximiliano. It actually work, okay?

[00:02:01]
But what if I wanna let the user type his or her name, okay? Makes sense? So we can actually ask the user for the name instead of hard coding the name in a variable. Well, first, how can we return two widgets? Because we need the text on some kind of a text field so the user can type something on it.

[00:02:26]
There is no way to return an array or multiple elements. We always need to return one widget. But we do have widgets that are acting as containers, okay? That they can contain more than one widget inside. And typically, we are going to arrange those widget with a layout.

[00:02:47]
For example, how do we wanna render this? Do we want to have a text and then a text field below? Do we want a text and a text field at the side? Based on the layout that we want, we need to pick the container. For example, there is one container with the name column that is actually going to stack children widgets vertically in a column, okay?

[00:03:15]
So column has a lot of properties in the constructor, all of them optional. So I pick if I wanna set the value or not for those properties. And one of the properties that I want, that I care, is this one, children. And what is children? A list of widgets, so it's an array of widget.

[00:03:39]
Make sense? So I'm going to implement or define the value for children, and it's an array. So in the array, I can put the text, I can put many text so you can see what's going on. First, I copy and pasted, and I have a problem. The problem is the semicolon, why?

[00:04:02]
So here you need to get used to this syntax, I know it is tricky. This is an array, so we separate elements in the array with comma, not with semicolon. The semicolon goes at the end. And now, all of this, okay, they need to be commas, including a trailing comma.

[00:04:23]
So if I save this, you can see a lot of Hello Maximiliano. Makes sense? So, well, I don't want a lot of text widgets, I want a text and I want another one that is called a TextField, okay? A TextField so the user can actually type a text.

[00:04:46]
Now, I can type a text here. So when I saved, I'm not sure if you realized, when I saved, it put all the list in one line. That's because I don't have a trailing comma. If I add a trailing comma in the array and I save again, it's doing the multi-line auto format, okay?

[00:05:06]
So check that, you pick what you want. Typically, we do multi-line unless it's really simple, okay? So before actually talking about padding and UI, let's make it work. So I want the TextField to change my variable, okay? Make sense? That's kind of the idea. So it's not Maximiliano when I start with an empty text, and I wanna render the name of the user as the user is typing.

[00:05:36]
Well, how can I detect that the text has changed? There is an argument, onChanged, that if you're coming from the web, it's straightforward, right? So it's self explanatory, onChanged, it receives a function. I can define the function in two ways, arrow function, when it's just one expression, or with code block.

[00:05:58]
Remember that from the Dart syntax. So in this case, it's pretty simple. So I can just say that the name is equal to the value that we receive, okay? So I save, I say Hello, I type my name, and nothing happens, why? Because this is a stateless widget.

[00:06:21]
The stateless widget will never change. It doesn't contain a state. It's not going to re-render itself magically. That's why it's a stateless widget.