 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 a simple user feedback saying, hey where's the combo box and I dug through this whole thing I couldn't find it. If you're wondering 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 going to 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 flustered with flutter right now but it may actually be something I'm doing wrong not flutter itself. Also a 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 aside and go eat. All right so we're going to just do our boilerplate code here. All right so let's do this. Hmm run app 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. I'm going to 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 going to build but we also need to initialize a few things too. So we're going to say string value equal null and then we're going to say list string values equal new list of 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 init state and we're going to override this. Now what init state does is it says hey when this is loading up we want to initialize the state so let's actually initialize this we're going to say values dot and all and from here we're going to actually add all those items in there and then our value is going to be values dot element add and we're going to give it the 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 on 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 then we do the odd change we can just plug it right in there and it just magically works. Now we're going to say widget build build context and we are going to return a new scaffold. Man 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 all right so app bar new text oops no we don't want new text new app bar then in there we'll say title drop down button demo longest title ever all right so in the body we want a new container padding new edge inset all we're going to say 32.0 because that's what we've been using for all of these child we'll say new column new children whoops not two children and the children property sorry there we go whoo that's a lot of typing fingertips actually get a little numb when I type that much all right so in here now we're going to make the magic actually happen we're going to say new drop down button notice how it wants a list of items and it wants the odd change 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 going to say odd changed 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 saying string and then it's to a function basically so what we got to do here is we're going to say map and there's our little indicator that that's a function and we're going to say two lists 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 map 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 going to say return new 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 cannot print blah blah blah type t all right so let's say value all right so we have our drop down menu item here and we are just going to work with this a little bit so our value here would be of course the value 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 icons.home new text and we're going to just format this we'll say person is we'll say person here we go if you're wondering where value is coming from it's actually coming from right here it's coming from our map function 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 all right 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 I actually come to Linux and I type all this out that you're seeing now but it appears this time it has worked 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 are 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 note 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 list view 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 voidarumps.com grab the source it's out in tutorials it's actually out on github and join the void arms Facebook group we have 1700 other programmers out there that can definitely help you with whatever questions you have thanks for watching