Hello and welcome to another Flutter Mentor video
tutorial. This time, we're going to take it all the way back to something as basic as what is the
difference between a child and children. This video comes about after a request from one of my
subscribers. As you can see, the UI has never been more simple and neither has the code. And we'll
get right back to this, but first allow me to explain with some visuals. So, this is a matter
of quantity. Think of just one widget and also a list of widgets. In this case, it's a list of
three widgets. Now, there's a child and there are children. Child is singular and children is
plural. A child only takes one widget that's it you cannot add any more widgets, as a direct child
of a widget. Now, children on the other hand, means that it expects multiple widgets. And what am I
talking about, it expects? Well, we're talking about widgets. For example, the container widget expects
a child - a single child. And not anymore, just one direct child - that's it. One widget, one child period. Now, the column widget expects a list of children. Which means that you can add as many children
as you need. In this case, we just added three. But in theory there's no limit. (obviously there
are technological limits, but you're not going to run into that limit) Now these are just example
widgets. For example, the row much like the column, can also take a list of children. And a padding
widget, much like the container widget, expects a single child. But the column can also take only one
child, because it's still a list. But, it's a list of one element only. So, basically a child is a single
child and children is a list of children, okay? It's basically a bunch of "childs" (that word doesn't
exist in English but I'll use it to explain this). Children is basically a bunch of "childs" as a
list. But back to android studio, and we pretty much only have a scaffold widget. Let's get rid of the
app bar property and we have a background color defined, which is this one. Now if you want to add
content you need to use the body property. And I don't know if you noticed that, but as I typed it,
it says right here "widget". What does that mean? It means it expects a widget. But you can also click
CTRL + Q and you get a bunch of information about the property or the widget depending on what
you are checking... and as you can see it says type widget. That means that only a widget can be used
on this property of the scaffold widget. So, let's add a container. Let's give it a height and a width.
If I save this nothing will happen so, let's give it a color. Now if I save this it's red. Now let's
give it a child. But in case you didn't know it took a child, you can do CTRL + Q again, and then you just
gotta look for it. This here, is the class that the widget pertains, to and this is the widget's name. And here are the properties of said widget. So, you can always check here to see if it's a child or
children. In this case it's a child so it says it expects a type widget. Which we will do right now.
Let's give it just a regular piece of text. Say, box one. Save it, and there it is. But that's it. We
can't do anything else right now. Because the body property is the only option that we have right now
to design content into the UI. So, widgets with a child are very limited. So, let's go ahead and put
a column here which we already know takes a list of children. But we can always check here, and here
it is: List of widgets as children. This is what it takes, this is a property name and this is what it
expects, a list of widgets. So, all you got to do is come here type "C", in fact, if you type "C" it will
tell you if it expects children or a child. But we wanted children, so here we are. Now, here we can
just place a bunch of widgets as if it were a list. Like so. And now within each of the widgets, we can
provide a child. And let's just do the same for all. Now, if I save this... this is the column right
here. Let's make it even more obvious. If I save it will become longer, but let's give it a
color. So you can really see what's going on. And here it is. A list of children. The containers
are the children. And if you want, you can even make the column a child of a container. Let's give this
a color as well, and let's see what happens. That might look weird to you, but that's because
columns take up the entire vertical space. So, let's give dimensions to our container. And now you
can probably understand it even better. Now we have a container which is the yellow, and the child of
that container is the column. Which is all of this right here. And the column has three children,
which are box one, box two and box three. Right here. And you can even chain another widget, like
center, to make it all centered. And, as you can see, the container is a child of the center. And then
the column is a child of the container. And we can even go an extra step and make center a parent of
column. And if we do "mainAxisSize" MainAxisSize. min, it will all be centered. And we can even take
an extra step and the Container's child is the text. But we can make the Container's child a center
widget, which then has the text as a child. If we do this for all of them, Everything is centered. And to make sure you understand, here is a visual representation of what we've just done, widget-wise.
The first widget on the body property is the center widget. Which takes a container as a
child, which takes a center as a child, which in turn takes a column as a child. Now, the column
is the only widget here that can take children. So, it takes three children. Three containers to
be more precise. And each of these containers separately takes a center widget as a child. And
each of those center widgets, each has a text as a child, as well. So, my advice is try to create a
bunch of widgets with children and some with just a child. And then you try to design what I just did. Which is basically a widget map. Representing your widget structure. If we come back here, you will
see that it's completely correct. Center, container, center, column, three containers, each container has
a center widget... which then has a child text widget. I think that's as far as we can go to explain
this concept, even if you're a beginner. So, I hope you were able to understand all of this. If you
didn't, just re-watch the video and you can be sure that you will understand it perfectly. And when
you do understand, please don't forget to leave me a like and subscribe. So I can keep doing this,
helping people like you learn how to program for free. That's my goal here. So, without anything
else to add - This is Flutter Mentor... aaaand out.
