3.6 DropDown Button in flutter - DropdownFormField Flutter 2023

assalamualaikum and welcome back to coding with tea today we are going to learn how to create a drop down button in flutter in today's tutorial as you can see on your screen we are going to create this drop down button by selecting a size we can select four type of sizes we have large medium extra large and by selecting basically substrate is being called and the updated user interface is being displayed and in the previous tutorial you can see we created this drop down button and in the next tutorial in the last tutorial we are going to create a complete form so when we are going to collect the data it will be a top product it is not downloadable its a deliverable product and for example its size is medium when we are going to press this submit button we will collect all the data from this screen and we will pass the data to the details screen you can save the data to database or you can either pass this data to the next screen or do whatever you like to do so this is what we will create in the next video in today's video we will learn how to create this drop down basically two type of drop downs will be covered the simple drop down button and drop down form field we are in section 3 and we are about to create the second last video of this section and also of this complete playlist and in the last tutorial we are going to create a complete form in which we will first validate all these fields and then pass that data to our next screen and also learn how to use global key in the form stick together watch video till end and don't forget to hit the subscribe button open android studio so we are inside the project we created in our section three of stateful widgets in the form dot dart you can see we have already created my text fields check boxes and also the radio buttons and also my button so all these widgets has been created customly you can see and watch the videos link in the description below so in today's tutorial let's get started with the drop down button and you can see we have to provide two things in the drop down button items and on change so this is the list of the items and then in the on change we will get some change value this error is because that we did not pass anything but we are receiving a change value in here so let's first create the items list that we have to pass to our drop down head towards the variable section in our class above this widget method and in here you can see i have already created a list simply its final list product size list small medium large and extra large so let's just copy this name and heads toward this section and just pass the list we have created add comma here ctrl alt l and in here you can see that we cannot provide drop down as a simple list because we have to convert our list into the way drop down items has been mapped because we want to pass list of drop down menu items and in that menu item we want to pass whatever the text is inside this list so to map that you just have to write dot map function and in here you can see this map is simply a function let me just remove this to avoid confusion inside this map we have to create a function this function is going to receive some value this e means that each value or one by one value of from this list and then in here we have to return drop down menu item it will have some child so child means as a text we are going to pass whatever is in the e e is basically the each item because e is a string in our case small extra large large so we will pass e in here and then next to the child we have also a value section so the drop down item contains two things text will be displayed on the menu drop down item and value will sit behind as a unique item so it is again e in here then next to this function when this map will be end because we have list of items so we have to write dot to list we know that we can use fat arrows we learn in our section one so this is how we map in the map we have a simple function and in the function we have to return each time drop down menu item okay the items has been created let's run the application you can see that we have a drop down menu has been created when clicking on it we will get these small values medium and all that currently it's not being selected because we have to pass selected value we have a value here of drop down button so let's go to the top and create a string type variable which is saying that it is a selected value current is nullable for example want to get the first whatever is in the first index of this list for that we have to create constructor of this class so i have created a constructor of this class and in that i have simply assigned this variable to whatever is on the list of or at the zero index of this list so this is 0 1 2 and 3 so 0 means small will automatically be assigned so let's remove it from here and inside this value section we have to pass the selected value let's save the code and in here you can see that small has been selected by default but currently other items cannot be selected because we have to use this on change now to select any unique value in the own chain we will use set state because we need to update the state inside the set state let's just update the value of selected value is equal to whatever the value has been fetched because it is currently an object so to make it a string we will use as string function so now let's save the code now let's change the value to large and you can see whatever has been selected is being displayed as a selected value so now let's try to design this using this drop down button we cannot use a decoration field or we cannot add any other type of decoration to this drop down so instead of this drop down we can use drop down form field let me just copy these values and paste it inside this drop down form field save the code and you can see we have two type of drop downs the first one is on the top which is not perfectly designed and the second one is this one which is the material design or the form field design now to design it let's first for example want to change the drop down icon so i have created a icon which is returning an icon so this is the icon and it is simply a color of the icon let's save the code and you can see that icon has been added we can also change drop down colors save the code and now you can see that background has been changed then we also have our decoration property inside the drop down form field decoration is going to provide us the same decoration that we use in our text form field it is actually input decoration in the input decoration let's first try to add label label text this text is whatever has been displayed on the drop down because we don't know currently what type of drop down it is save the code and you can see on the top that we have a product sizes so let me remove the first drop down it is currently attached to the top so we can also add some space using size box okay next to this label so again i have added a simple icon this is icon and this is a color save it and you can see that color and icon has been added next to it we can also add a border to our product design like in the text fields you can see that the text has been moved to the top so the same way we can add border to our drop down so we have our underlying input border outline input border for example we want to use outline input border as a border property save the code and you can see that we have a same type of text field like the drop down but it is currently working as a drop down it's not a text field so this is how we want to we can change so let's underline input border save the code and we are back with our designs so this is how we design and this is how we use our drop downs in shutter so in today's tutorial we learned two type of drop downs simple drop down button and drop down button form field drop down button form field provide us the decoration property using which we can add titles and other bunch of options so we use drop down form field so this is how basically add logic to the drop downs and also we learn how to design the drop down button in the flutter we there are a bunch of options you can design any type of problem you want so take in a take it as an assignment try to create custom widget of this drop down and use it multiple times in your code as in the previous video we learned completely about how to handle the set state in the parent widget which is this class so i hope you will create your own drop down or at least practice it at home so you can master it easily so that's it for this tutorial i hope you learned something new if you learned something new please like the video and if you are new to this channel please don't forget to subscribe thank you for watching take care laughs

Channel: Coding With T

Views: 50,935

Keywords: flutter, flutter tutorial, dropdown in flutter, flutter dropdown button, flutter dropdown textfield, flutter dropdownformfield, flutter drop down button, flutter dropdown list, lutter dropdown menu, dropdownbutton, dropdownformfield flutter, dropdownformfield decoration flutter, dropdown button in flutter 2022, dropdown flutter 2022, flutter dropdown button 2022, coding with tea, flutter dropdownformfield example, flutter dropdownformfield 2022, flutter tutorial for beginners

Id: 6_Azs3fq9O4

Length: 9min 18sec (558 seconds)

Published: Mon Jun 27 2022