DropDown List in Flutter | Flutter Complete Crash Course | 30DaysOfFlutter | Flutter Widgets

hey there this is akshat madan and welcome back to day 13 of 30 days 30 concepts of twitter series for beginners in the last part we were studying about the bottom navigation and we have covered it and if you have not watched those previous videos please watch it and make sure that you are following this course in this serial only in this way only right so now in this video in day 13 we are going to study about a drop down list so why do we use the drop down list so sometimes the user of your app needs to select something from a list so that time we need to integrate the drop down list right so yes so we are going to study that so before that if you are new on this channel you can like my videos subscribe to my channel and you can also follow me on these social media links given in the description because as you can see that i post uh something uh great on my instagram page right link is in the description so now let's come to my vs code and you can see that in the last part we were studying about the drop down sorry the bottom navigation and in this part i will define one more file in the widgets folder called drop down dot dot right and over here i'll import that same thing that is material dot dot and i'll define the same stateless widget but in this we have to change the state of a variable that is uh there will be a string and in this string the value will be selected value will be assigned the value which the user is selecting from the list so that's the the meaning of this is that we have to change the state of that variable that's why i'll define a state full visit so now i'll call this stateful widget as drop down widget and let's call this widget in the main dot dart instead of bottom navigation i'll just import it and now let's go to drop down dot dot and i'll define a simple scaffold in the scaffold i'll define the app bar let's define a simple title text drop down list and the body i'll define a simple column in the column i have children in the children i'll define a simple container of height let's say 70 and i'll give it some color let's say colors dot red i'll give it some width also width i want to keep it infinity that means it should take complete width of the mobile screen so i'll keep it media query dot off media query dot of context dot size dot width so let's save it but i want to see it at the center so i'll wrap this column with the center widget and now let's see and i'll also define its main axis alignment main access alignment dot center i'll make it let's save it perfect now i'll give some i want to give some padding to this container so i'll define you can give padding or you can give margin let's give some margin edge in set start all let's say 10 let's save it now in this container i want to define the drop down list so as a child to this container as a child to this container i'll define drop down button right and in this we have some items but before the items i'll have a few more parameters so let's go to this drop down button and let's hit ctrl space so you can see that i have elevation i have drop down color and so many parameters i am having which i can define right so we are going to see them one by one but before that i will define one variable in my class that will be string selected value selected value and in this you can define some initial value uh let's define orange so i'm going to use the names of the fruits so let's say selected initial value is orange right so in this items i have to define the other items so let's say i define first one you have to keep the same that is orange and second one you can anything that you want to keep in your list apple then let's say banana and now let's say mango and last one let's say grapes so what i want is whenever a user select this apple or banana this selected value should change right so that same thing we are going to see in this part so it is giving me an error because it is not able to identify with what is the parameter what is the default uh data type of these things so i'll define it as a define it as string and i have to map them as drop down items they are dropped on items right so after the square bracket you have to write dot map and in this map you have to define a drop down item drop down menu item and they will be of type string now you will get some string values so write string value and then you can return you have to return drop down menu item so drop down menu item type is string so write string value you have to define value value will be nothing but the value which we have which the user has selected and child will be simple text and in this text we have this selected value right so we are also going to change the selected value just a minute write the semicolon and we have to map this to list simple and we are missing one bracket so put one bracket and we can save it and we are getting an error over here we will solve it okay we are doing one mistake we are writing dot to list over here we have to cut it and we have to convert the map to list so we will see where this map is ending okay it is ending over here and paste that over here perfect now there is no error right and let me just remove this red color so that you can see that we have got the drop down list but one more thing that we want to do is first lets remove the red color and the next thing is we have to refine on change so whenever the user will change the selected value then it should reflect in this drop-down list right so we will define in this drop down button only we have a function called unchanged and we will write and this on change will have it will be getting one string let's call it new value let's call it new value and i'll define a set state so we have set state and in this stats a set state the selected value which we have defined above will take the value of the new value that means the user that is the value selected by the user put the semicolon and we have to define this exclamation that is for null safety and let's save it now you will be able to see that we have got the drop down list just a second are you able to see this icon right we can uh change this icon also and but we are not getting the perfect thing that is we are getting orange orange orange orange right but we will correct it and you can see this icon so you can also change this icon so let me just decrease the size you can also change this icon that we are getting so you can do it by defining icon and you can write anything let's define icon of some other arrow so let's define icon start arrow i will get a down arrow only yes let's take this arrow let me just save it and you can see that we are getting this arrow and now we have to define the value of this drop down button so we have a parameter called value and in this value the value of the selected value so write it and paste it perfect and this drop down button is uh returning the string so we can write string over here perfect save it and you can see that we are able to see orange and but we are only able to see orange orange orange orange so to correct it uh yes so in the child text we are returning selected value but we have we do not have to return selected value we have to write value that means the value which is present in this list that should be seen in this list right so that's why that's that was a very silly mistake so now if i just see my list now you can see orange apple banana mango and grapes so if i select grapes you can see grapes is done so if i select banana you can see banana is visible over here so like this you can uh initiate a drop down list in your apps now you can see that it is very congested it is not taking the complete width i want that it should i want that it should take the complete width of this container right so for that in this drop down button you have parameter called expanded and make it true and if i just save it you can see that now it is taking the complete width wherever i am going to click in this list or in this container you can see that i am able to see this list and you can change it so in this drop down button we also have a parameter called the uh color and that color is drop down color and you can just write let's say color start gray dot shade let's say we take 200 and if i just save it now you can see that the shade of this drop down button or we can say drop down list is change you can give any color of your choice perfect right [Music] so like this you can integrate uh what we can say drop down list in your apps so i hope you like this video the code is in the description you can go to my repository and you can take the code so yeah i hope you like this video till the next content keep loading keep waiting and thanks a lot

Channel: Akshit Madan

Views: 2,943

Keywords:

Id: fimlSlMXfBI

Length: 10min 53sec (653 seconds)

Published: Wed Jul 07 2021