Flutter 21 - Basic Layouts Video Lecture | Flutter: Build beautiful native apps in record time - App Development

everybody this is Brian welcome to the
21st flutter tutorial alright so in this
tutorial we're going to be continuing
our conversation about material design
but we're also going to be just kind of
looking around here and if I can find it
yeah
basic widgets we're gonna cover the row
and the column classes and kind of just
kind of pick and see what they do
definitely recommend going out and
reading their little I want to say their
documentation plus the sample code I was
going to call it some fancy but the word
escapes me all right so we're not going
to do their code but I highly recommend
you you use their code and you kind of
play around with it figure out how it
works we're just going to dive right in
here and we're going to create a whole
new project and we're gonna call this
basically outs
now if you're wondering why I'm not
gonna cover there examples is because
well there examples are on the web you
can just quite simply copy and paste
those into your app and they should
quote e fingers should just work also
it's really because I kind of want to do
something a little more advanced and
just the bare basic here plug this in
and talk about it for three hours so
we're gonna wipe all that out I Paul
this out all right so go in here you can
notice how test it's got a little
problem here we're just going to delete
that if you're wondering why it has
problems because it's referencing the my
app which we just deleted we're gonna
actually create that though we're going
to extend the stateless widget again
alright so what we're gonna really be
covering in this is the role in the
columns and we're gonna intentionally
make this application very busy a lot
busier than it really should be
and when I say busy I mean the code is
just going to be a complete mess and
they'll probably be a lot of mistakes
but I just kind of want to prove a point
here and don't worry we're gonna fix it
in the next tutorial what it really
should be I just want to show you how
kind of spaghetti kodesh this could be a
little bit but even though it is
spaghetti code it's actually still very
easy to work with here so we're going to
build a material app
all right so we've got our our home and
our material app is set let's actually
build this and push this out to our
emulator just to make sure we'd have no
problems going forward here it's gonna
take just a second for this thing to
compile all right so as expected we have
our big white box with our slow mode
we're going to go out here now that we
have our scaffold something we want to
do is actually make the the body here
we're gonna add a bar to actually
now someone had already emailed me and
said hey why is everything an object
this gets little nuts having to say new
text just to set the title that's a good
question it's because it uses dart in
the background it's the underlying
language is Dart and because in dart
everything is an object so everything's
a class all right so the body of this
we're going to just make a new container
and we're going to use container simply
because we want to be able to use some
padding in here and we want to say 32.0
just because why not and then we want to
mm-hmm let's just play around with this
little bit here we'll say child new
center and end child we're gonna say or
in child in center we're gonna say new
child equal new column and here's our
actual column now the columns going to
go from top to bottom and in that we can
say children you notice how this is
different from child first thing it's
doing is it's saying hey this is
templated so it's going to hold a type
of widget and then here is our actual
array
and through the magic copy-and-paste
there's gonna be a little whole lot of
copy and paste in this tutorial
initializing hot reload and you can see
it reloaded so here is what we've got
thus far so we've got our app bar we've
got our body in our scaffold and the
scaffold kinda is a container think of a
container just as a a glass box it's
see-through right so in this box we've
said we want the padding to be 32.0
which is why we've got 32.0 from the top
if we got rid of that Center it would
also be 32.0 from the edge here but we
just wanted to centered now in that
Center we have a child called column the
column does top to bottom the widgets
that we have in there are three tax
hello in hello world and then the
exclamation stop bang bang bang there's
our three pretty simple pretty easy to
use it
column but as you can see our text
starts getting a little crazy in the tab
markers these lines keep going out and
out and out it gets kind and nuts here
so what we want to do next is we want to
say they'll row and you can see how the
tab marker goes out again and it gets
kind of crazy here we're gonna do cross
axis alignment Center so basically we'll
want to Center everything and then main
access alignment
I want to Center that and then from
there we can add our children notice how
this is once again templated it's a
template @array is that even the right
term template array it's expecting a
widget type and it's an array so we're
just going to grab some hello world here
dump that in and let's see if hot reload
Peaks that up looks like it did so
there's our hello world so that's going
across here hmm not liking that too much
there's no space between hello world so
let's actually get this out here
look at this for just a second see how
we want to do this here alright let's
let's do this
let's get rid of this guy and we're
gonna say actually we can probably just
now let's do this
I'm deviating for my notes that's why
I'm sitting here go on the fence about
something here sometimes I like to just
play around and do things because the
notes get kind of boring because by the
time I've recorded this video I've
already done it two or three times so
we're going to pad this by five and then
from there we're going to say
and we're just gonna grab these right
here because I just don't feel like
typing that out again so now you can see
how we have got our our rows and columns
that was my chair that made that noise I
hope this thing didn't just break dump
me on my butt all right so let's find
this little guy and this is very helpful
where you click on one of these end
points here it'll actually highlight
where it begins so we're going to grab
this comma and hot reload picked it up
so you can see now how it is our hello
world on the top and then we've got
three on the bottom here so what we've
really done is we've got a column so
here's the first one here's the second
one
and in that second one we have a row we
have bang bang bang and in each item
we've got another column so that is kind
of crazy how you can lay things out but
you can get really precise with just
rows and columns I'm kind of surprised
some other mobile frameworks rows and
columns completely suck but with flutter
it's actually not bad I mean you get
pretty nice precision here and you can
just add on and on but as you can see
what happens to your code is it starts
pushing out and you get these tab
markers these lines that go out and out
and out now and it's not uncommon that
you get way out here so you really need
to and we're gonna cover this in a
future tutorial how to kind of shrink
that down a little bit compartmentalize
or make things into components or
widgets ideally you could actually take
this whole hello world thing and make
that that way you don't have this
spaghetti code going out so that a
nutshell is really how to work with rows
and columns and it's super simple super
easy I kind of wish this was like a long
drawn-out tutorial but it's really just
not because they're so easy to work with
kind of the major takeaway from this is
that when you're working with these you
should kind of check the axis alignment
and you can put things where you
and then the children property not the
child property the children because it
can hold more than one its templated so
you can say widget and then you can
actually change that if you wanted to
not recommended but you can change that
if you want to and then it has an array
and you can see how that's everything
that's in that array and then you can
you know see here again that's
everything in this array pretty similar
both row and column follow the same
design pattern so that's it for this
tutorial I hope you found this
educational and entertaining highly
recommend going out reading their
official documentation the source code
for this and all other tutorials will be
out on void roams comm is click on that
takes you right out to github and you
can join the boy drums Facebook group
which has really close to eighteen
hundred other programmers out there all
different languages