Hello in this video I am going to show you how to do a drop down button drop down button toggle regular words when you click on it they provide you a list of options that you select the Grateful concealing, you know information you know instead of having everything on the screen which can you know make it cluttered from time this is not practical, you're physically to put everything on the screen, so drop down but Lauren great way of alleviating this issue. So first of all, what we're going to need to do is create a spring would do it here you know where the other variables or the variable should spring and this is going to be called drop down. str equals So I'm just gonna have a list of movies. And what we are going to do now in here, so you just added add, you know, like a child as you normally would put child Drop down.

But before that, we need to specify you know, the date type of what it's going to be continuing to bring and the items and change all of that in a second. On a new line for the, the actual items, well, actually, I want to do a slightly different order. So I'm going to have value first, which is going to be the default value, and I'm going to be drop down sto and we're going to have unchanged so what you know, when do you change it, you know, open up the drop down button, change it to one of the other items need to handle that accordingly. And it's going to be a method that basically accepts the new value string, and then what we're going to do this indentation so In here, we are going to say, set state, this is a built in method, we don't need to worry about anything like this.

So essentially, when state changes, and when you select another item in the list, when I say drop down has to equal new value, so this, you know, update it. So it actually shows a highlight clip, if you don't do anything else, really change it. But other than that, maybe you know, you do want to do some other changes, because the drop down myelitis, you know, select an item, you know, if it's movie, for example, maybe it's the movie that you're going to watch, and then you click the play button. So the actual, you know, change isn't really reflected until you press another button, you know, trigger some other action. But if you want something else to happen, do it here, you can check what the new value is to handle it accordingly. Now that we've done unchanged, we're going to basically add our item selected items and these are going to be great Once I'm simply going to put the Christopher Nolan Batman movies and the document Okay, so what we need to do now is dot center dot map, angle bracket, drop down menu item bring value.

This is essentially again the what's you know been selected and we'll be returning this very shortly. need to put it here put.to list for a make sure we put that and inside of here we just put return drop down menu item, string. And last thing in here, we just need to set the value, which will be value, which now this one is the property, this value is what's being passed in here. Then we set the child so the child gets updated to text value. It could be an image if you want to, we don't have to have just text widgets in there as the next task or recommend experiment to your point images instead of the text that we need a semitone. on here, we're ready to run net.

So if we run it, I'm not doing a hot reload. And I'll explain that in a second. I have a new version of flutter to install. I do that some time. So just initializing Gradle I've got the simulator already open. By the way.

Obviously, make sure you've got the open or device connected So install an APK so he should launch at any moment then place installing the APK Okay, here we go. Okay again a little error was the error sentence LSR with quick look, make sure we got everything correctly the.to list, child text value value value returned drop down menu item dot map, drop down menu items string string value, no good so far that items spring Then the screens themselves got unchanged string new value set state. Okay, actually, I remember shooting this, this needed to be outside and let's run it again from scratch because I've had issues like this with the drop down button that it for some reason doesn't like hot reload. So bear that in mind if you are dealing with drop down buttons and you get it to have a look at it make sure you know it might be related to something from the hot reloading and I will take the little bit longer to do the compilation but it seems to be Certain widgets, hot reload doesn't really work well obviously with images and another one could is do not update the assets against the same thing just want to try one more thing.

Run that again. So in this while it's running to try to compile and then just go through all the code, drop down buttons trying to find value in drop test to unchanged string new value. Set state drop down has to equal new value. Okay, so far so good. Items code on string, county and the issue list line, dot map, drop down menu item, strings string value, return the drop down menu item or the string Value value. There we go.

Okay, so those bear in mind, you need to have the same, you know, name. First item, my bad man mistake that's I click on it, we get the item and that's it. And I see no let's see if we had an old version of a playbook I recommend you do that add another button you could say play for example. And when you play, he will literally just based on what is the drop down has to you will just, you know, say that you're maybe console log, you have a label saying playing this movie, obviously not playing the movie, we just sort of simulating that sort of scenario. That's it for the drop down button. If you have any questions, feel free to drop me a message.

And as usual, I look forward to seeing you in the next video.