Flutter 22 - Creating a Custom Widget Video Lecture | Flutter: Build beautiful native apps in record time - App Development

everybody this is Brian welcome to the
22nd flutter tutorial all right so we're
continuing where we left off with our
basic layouts application we're gonna
kind of clean up the spaghetti code a
little bit as you can see this gets kind
of unruly and we've got some stuff so
this is a basic design pattern is really
what we're gonna be doing we've got this
hello world and let's actually run this
in case you missed the last video you
can see exactly what's going on here we
got that hello world repeated we've got
rows and columns and it's just really
simple just stupid layout right so you
can see in our application we have some
repetition hello world hello world hello
world so that's all repeated so what
we're gonna do is we're gonna take that
hello world each one of these and
convert it into its own full-blown
widget here that way we can get rid of
some of the spaghetti code so the first
thing we need to do is let's actually
make a new dart file and we want to
import the flutter slash material
because we're working with material
design right now really it's not that
bad making a whole new component I
thought this was going to be like a huge
long drawn-out tutorial it's really not
we're going to stay extend a stateless
widget help if I could spell widget
and remember the build is whenever you
see build think render so not building
widget we're rendering a widget so this
is what we're gonna actually render on
the screen here and because it returns a
widget we need to you guessed it
actually do something here so let's go
back to our application here and you can
see we've got some design pattern going
on so there's this let me get rid of
this we can see you can see container
container container
so let's actually just borrow that right
let's find our endpoint which is this
guy grab that copy and paste it put a
semicolon and bang our component is now
done so really all we're doing is
rendering that hello world inside of its
own little container with its padding
and everything so let's actually go up
here we're going to import the hello art
and now that we have that import you
guessed it what we can do is just get
rid of this
let's grab this little guy and we're
going to get rid of these three right
here just put our hello widget so I'm
going to actually kill this app that way
it'll rebuild the whole things you know
there's no trickery on my part going on
here so let's save that rebuild it
running out push to the emulator take
just a second but it should look exactly
the same
the real difference here is that we have
pushed that snippet of code into its own
little widget that way we're not
retyping that over and over again and we
can just reuse that we can even extend
it if we wanted to makes our code a lot
easier to handle and a lot smaller too
you can see we still got this this tab
line going out further and further and
further but it's not as verbose and it's
not as spaghetti as it was before so
it's a lot more manageable I just wanted
to do that quick tutorial cuz I've
already had a few questions on design
pattern and flutter and we haven't
really gotten there yet but I kind of
wanted to cover that early on and in a
lot of my future tutorials I will
actually use this sort of design pattern
where I break everything off into its
own file simply because I don't want
these unwieldly you know three thousand
line text documents alright simple easy
hope you found it enjoyable and
entertaining and the tutorial will be
out on voice comm click on tutorials and
then go out to github and I know I say
this every single tutorial but we have a
void rums Facebook group with almost
1,800 programmers in there basically I'm
pushing this because everybody in there
is very helpful I've even asked a lot of
questions and gotten a lot of feedback
so it's a good resource to know thank
you for watching