The material dropdown button widgets

- [Instructor] Now, in the final version of this app, we want to be able to select various currencies, such as US Dollars or Euros or Pounds, and check to see what one Bitcoin is worth in all of those currencies. So, we need a way of being able to select from all of those currencies. And you can see all of the ones that we're planning on incorporating if you have a look inside the coin_data.dart file. Here, we've got a constant, which is a list of strings, and it contains all of the currencies that we're going to check the value of Bitcoin for. But in order to select which one we want to show the values of, we need some sort of user interface element to do that and the easiest way of doing it is through the use of something called a DropdownButton. So, a DropdownButton comes from the material design concept and it looks something like this. So, you click on the button and it shows you various things that you can select from. Let's try to integrate this into our app and make it display all of those currencies that we have listed in our currencies list. As always, our starting point is the documentation, and it tells us to simply just build out a DropdownButton as a widget. Let's go into our prize screen and currently, inside our Container, where it has a child of null, we're going to replace it with a DropdownButton and it's got only two required properties, items and onChanged. So, onChanged is going to be when the user selects a new item from that dropdown. This is going to trigger a callback and it's going to tell us what the user changed it to. And then the items are the things that will go into that dropdown menu. Now, in order to use it, we have to specify what is the type of data that our DropdownButton is going to display. So, it's going to be strings in this case and also in our case, as well, so let's add that DropdownButton of type string, and then inside the items property, we have to specify what it is that we want to display on the screen. The items property expects a list of DropdownMenuItems and this is going to be the list of items that the user can select from. So, let's go ahead and create that, so instead of null, we need to create a list. So, let's open up a set of square brackets and we need to create a list specifically of DropdownMenuItems and each DropdownMenuItem expects a child and the child has a type of widget. So, that means we need to put a widget in as a child of the DropdownMenuItem. So, I'm going to create a simple text widget and it's going to contain one of our currencies, say, USD, for example. Now, the DropdownMenuItem also has another property called value, and this means that when the DropdownButton is clicked on, and the user clicks on one of these DropdownMenus, it's going to trigger the onChange and pass in whatever is inside this value property. So, we want that to match with what's inside our text widget. So, we're going to add, again, the string and it's just USD. Let's go ahead and add a couple more of these, so I'm going to add one for Euros and one for Pounds. So, EUR and GBP. So, now, we should have a DropdownButton with three items in it. But as per usual with any sort of button, if it's onChanged is null, it will usually be in the disabled state, so we won't actually be able to see it unless we change this property. So, inside the onChanged, we're going to have a callback that's going to send us the value that the user selected and then inside that callback, we'll be able to tap into that value, whatever it may be. This means that if the user tapped on this one, which has a value of GBP, then GBP will be what's going to be the input into our callback, and we'll be able to access it through our print statement. Let's hit save, for hot reload to happen, and let pop open our run, so we should now see in this bottom container here, a little down arrow and if we click on it, we can see a menu with our three dropdown menu items. Now, if I select one of these, for example, the Euro, then the value of that DropdownMenuItem is EUR and at the moment when I click on it, my onChanged is going to trigger this function, passing in that value in here, and it gets printed into our console. Now, at the moment, it's kind of hard to see what this is, right? So, usually, with DropdownButtons, one of the properties that's really useful is the value property, where we can specify a starting value. And it's usually going to be the first item in the list. So, let's hit save and now you should see that it starts out with a default value of USD and as soon as you click on it and you change it, then we can select a different value. But why doesn't it update the value of our DropdownButton? Well, similar to the slider that we used when we created the BMI Calculator, we have to update this value property when the state of our DropdownButton changes. So, to do that, we're going to create a new property and we're going to call it a selectedCurrency and it's going to be of type string. And it's going to have a starting value of what we want to see initially in the dropdown, which is going to be USD, and now what we can do is instead of using the string USD, we can use that selectedCurrency property that we just created and also when our user selects a value from our DropdownButton, then we can set the selected currency to equal that new value and, of course, if we want this to update in Flutter, we have to wrap it inside a setState. So, now we're going to put that inside our setState and if we hit save, now when we click on our dropdown and we select a new value, it will update that value that is shown for our DropdownButton. So, we now have a DropdownButton which functions and we're able to tap into the user-selected currency through this new property that we've created. So, this is all very well and good, but you can see that in our currencies list, we have loads of different currencies and it would be really painful to add them all one-by-one through creating a new DropdownMenuItem widget, and then having a child of a text widget, and then having a value, that's really painful. What can we do instead? Well, we could create a loop that loops through our list of currencies and creates a DropdownMenuItem for each of them and putting those currencies inside a text widget and inside the value property. Now, if you think you can already solve this by creating a for loop, then you can skip the next lesson, but if you can't, or if you want to review how loops work in Dart, then head over to the next lesson and I'm going to cover the various types of for loops in Dart.