Flutter 33 - DropDownButton Video Lecture | Flutter: Build beautiful native apps in record time - App Development

everybody it's Brian welcome to the 33rd
flutter tutorial today we're going to be
talking about something called a
drop-down button and I looked in the
widget catalog and all through here and
I could not find what I was looking for
I had to simply use your feedback saying
hey where's the combo box and I jogged
through this whole thing I couldn't find
it if you wonder what a combo box is
it's just simply a little box or a
button that you can click a down arrow
and it gives you a list of items to
choose from and I could not find that
anywhere it actually exists even though
I couldn't find it out in their
documentation we're gonna work with it
today and see how it works it's been a
little temperamental for me this is the
third time doing this tutorial and I'm a
little fluttered with flus flustered
with flutter right now but it may
actually be something I'm doing wrong
not flutter itself also big disclaimer
it's way past when I should have eaten
and I've got a slow cooker full of food
downstairs then I can smell it all the
way up here and it smells just amazing
and I'm starving so hopefully this will
actually work this time otherwise I'm
just going to like set this video side
and go eat alright so we're going to
just do our boilerplate code here
all right so let's do this mmm run app
yeah told you I was hungry new material
app here we go all right I'm having
nothing but problems here all right
there we go create the state here and
now in the state we're going to actually
do a little bit of work here so we've
got our main we've got our my app now in
the state what we need to do is actually
not just define what we're gonna build
but we also need to initialize a few
things too so we're gonna say string
value equal no and then we're going to
say list string values whole new list
the type string it's 2016 I gotta start
using the shorter method of doing that
anyways then we're just going to hit
ctrl o on the keyboard and we are going
to go to an it state and we're going to
override this now what an it State does
is it says hey when this is loading up
we want to initialize the state so let's
actually initialize this where I say
values and all and from here we're going
to actually
and all those items in there and then
our value is going to be values element
at and we're gonna give it D zero
position why not
probably makes sense if that was also a
private variable here there we go
so now we are initializing the state and
no state is complete without the build
function but we're not there yet we want
to actually do a void changed string
value we're going to you guessed it set
the state here
that way when we get to the control
which we're going to get to here in a
second and we do the on change we can
just plug it right in there and it just
magically works now we're gonna say
widget build build context and we are
going to return a new scaffold me at
dinner is smelling really good and I'm
getting really hungry here I don't know
if you guys can hear my stomach growling
but it's almost comical
alright so app bar new text oops nope we
don't want to texting you want a new app
bar then in there will say title and
drop button demo longest title ever
alright so in the body we want a new
container padding new headset all we're
going to say 32.0 because that's what
we've been using for all of these child
I'm say new column and new children
whoops not to children and the children
property sorry there we go
whoo that's a lot of typing fingertips
actually get a little numb when I typed
that much all right so in here now we're
gonna make the magic actually happen
we're gonna say new drop-down button
notice how it wants a list of items and
it wants the unchanged so let's break
this down a little bit so the odd change
is pretty easy to work with we're just
going to add in what we had before and
we're gonna say unchanged
that way to plug right in and set our
state now items this is where it gets a
little bit different here we want to
take the values and we want to map them
you notice how it's seeing string and
then it's to a function basically so
what we got to do here is where it's a
map and there's our little indicator
that that's a function and when I say to
list down here and in here we want to
say string value so if you're not
completely sure what's going on here
we're saying values which is just a list
of strings here and we're going to map
and what Matt does is it goes through
every single item in that list and
performs a function on it and that
function is going to be right here and
then we're converting that map back into
a list so we're gonna say return you
know drop down menu item so yep that's
exactly what we're doing is we're just
making a list of drop-down menu items
and this is suddenly complaining about
something here let's see here could not
print about blah blah blah type T
alright so let's say value
all right so we have our drop-down menu
item here and we're just going to work
with this a little bit so our value here
would be of course the value and the
child would be a we're going to do a new
row here just to show that even in the
individual items you can actually do
some pretty complex things here
children it's going to be a list of
widgets and we're going to say new icon
icon stat home you know text and we are
going to just format this once a person
is say person here we go now you if
you're wondering where values coming
from it's actually coming from right
here it's coming from our map functions
so each item in that list is going to be
a variable called value which is going
to get shoved down into this function
and then in this function basically what
we're doing is we're saying make a new
drop down menu item and add in a value
add in a row in that row we have an icon
and then the actual text alright so we
have no issues that we can see let's go
ahead and fire this up see if this thing
works
now the few other tutorials that I did
with this I actually got to this point I
would build it run it and it just would
not work on the device it would spew out
some horrendous error message and I'd
have to figure out what's going on and I
would verify you know the code what I
wrote versus the code in my notes
because what I do is I'll actually write
the tutorial on another OS I actually
write it on a Mac and then I record the
videos actually come to Linux and I type
all this out that you're seeing now but
it appears this time it is where
so I'm going to guess it's just
something that I had been fat fingering
but here is our drop-down list in all of
its glory and you notice how you have an
icon you have the formatted text of
person equals now some of you were
probably wondering what happens if you
don't set the state well you'll still
see the drop down but when you click it
never changes so it would just get stuck
at whatever the value was so that's all
for this tutorial
pretty simple pretty easy to work with
it's actually kind of fun to keep
clicking some little caveats I would
know is that on some phones if you have
a huge list it won't scale correctly and
it won't scroll so if you have like a
gigantic list you should use something
called a ListView which is what we're
going to do in the next tutorial that's
all thank you for watching if you're so
inclined you can go to my website void
roms comm grab the source it's out in
tutorials it's actually out on get up
and join the void rooms Facebook group
we have 1700 other programmers out there
that can definitely help you with
whatever questions you have thanks for
watching