Flutter 36 - Drawer Video Lecture | Flutter: Build beautiful native apps in record time - App Development

everybody this is Brian welcome to the
36 flutter tutorial Wow it's horribly
we've done 36 of these today we're gonna
cover the drawer which is a material
design panel that slides in horizontally
from the edge of a scaffold to show the
navigation links in the application I
know you've seen these but sometimes you
got to see it to really understand it so
we're going to cover it first thing
we're gonna do if you follow it along in
my previous tutorial we made a live
template so it'll save a lot of typing
so I'm just gonna pop open the live
template here and that imports our
flutter material design package it has a
main which does the run app which starts
the material design application the home
property that is a new my app which is a
stateful widget which has a crate state
or a underscore state of the my app you
should understand all those concepts
before really proceeding further here in
there we just have a simple template of
a scaffold with an app bar and a
container with some widgets in there
we're just gonna run this you can see
what it looks like with the default
configuration here just in case you
missed the previous tutorials so really
this is all this looks like and what
we're going to do is we're going to add
a little button here that when we click
that the drawer is going to slide out
we'll have a array of widgets that we
can put in there so without further ado
let's just dive right in here so the
scaffold has another property that we
haven't really played with called drawer
and in the drawer we can add well pretty
much anything we want so say child and
we're say
and let's just say it's just why not
let's just do 32.0 just because I really
like that number and the child as you
can understand now the design pattern
we've been following whenever you say
child it specs a widget or I want to say
child or children that expects a widget
so we can put literally anything we want
here so we could say new oops text hello
drawer and that's actually I think hot
reloading actually did take it and I
have to reload the whole app so now we
have hello drawer pretty cool huh so
what can we do with this I mean well
pretty much anything we want we can put
any widget in there that we want so
let's just add a few things and show how
to kind of close this and do what we
want to do with it so I'm gonna say new
column and then we'll have an array of
widgets here and we'll say you know text
I should have just kept that hello
drawer and then here we'll say new still
raised button because we've worked with
raised button before and we are just
going to say
saying it's gonna be a red button I am
give it a child of text and the on press
we are just going to say navigator dot
and we're going to pop it under the
current context so what that will do and
I'm just going to run the whole thing
over again just in case hot reloading
doesn't take that so what that will do
is we have our drawer and then we have a
text widget or anything else we want to
put in here for example we have a red
button that says closed and we click
that boom closes the drawer but you can
put anything you want in here you can
put images you can put text input fields
checkboxes typically what a drawer is
used for is for navigation so you'd say
that and then you have like you know
account settings map details about
whatever you wanted to do but we just
wanted to cover the basics of the drawer
class and how to get it open and closed
so that's it very simple very powerful
widget it's actually part of the
scaffold itself so thank you for
watching I hope you found this
educational entertaining for the source
code for this and all the other
tutorials go out to my website void
realms comm it's out on github and feel
free to join the void realms Facebook
group we have 1700 plus programmers out
there all walks of life we can
definitely help you with your problems