Flutter JSON Dropdown List With Images And Text & Multi Selection CheckBox

hello everyone this is Holly from Kelly tags in this video I'm going to show you how to make this job down list with Jax followed by images and some Jason video so in previous in previous tutorial I already explained this to you but if any of you guys is asking for the court hopefully show a small code for this dot file these are tutorials and make a dropped on jason by one to almost two days every city almost two days but your video like able to do this correctly thank you very much welcome and also you asked for the you asked for the Y so today I'm trying to do my voice and you ask for the github so in this under a in the description of this video will find the link to download the code and also the get up please time at work they are he's also asking for the code and MDE chose annual results for asking for the code they get up code of course you'll find a download link for the source code under this video so in this video I'm going to explain how it works and how can you customize drop-down you don't need to you don't need to put any dependencies you need you just need to put one asset folder here inside I said folder there will be other your images okay and then you just need to enable you asset folder from your perspective of expectorium oh okay and then in main in mentor Thor file it suggests a demo flutter of letter Tomoya and here when the state is studying the homepage state is starting the one string the one variable I created which is selected when you click one one object or one drop-down list so this thing this data is storing inside the selected variable and then there is one map list and it's called Jessel my JSON and inside of my JSON there is some map listing I did manually which first first object is ID and then the string is one then two three four and then so on Anto 14 and then there is image image - 36 thanks then and the image directory link that I mean like to link to the image then name what is the name ok so the name I will show as a title then I will show is the title image where the image will be there there's a specific title logo and then each and every list data of have an ID so after you've done this part then you go you will scroll down here okay this is just a center the body is just a center inside the container I just put painting like agents at all like 15 yeah this is just I I put some kind of heading and the Box declaration the Box declaration is OK the fighting is inside the box not outside the box if this container is you can say this is a container and the Box declaration for border the border is scary and then the border radius is 10 father it is stand if you want to give any other waiting to whole layout you can just like ready so after adding padding just how to restock and you will see the Sun fading from the formal side okay and then inside the container I made one inside the container then I made one for all okay inside the road they may wanna expand expand widget and inside the expand widget this drop down they do a pattern which heightened the wine the heart and Earl and I just used because III drop down is one on the line over here so I just to hide that under why I use this so that drop down is true here that rock on must be true so the torque on must be true and then the drop down the drop down button this dance is danced mean maybe remove your stance it to Allah P if now Akuma be shrink to each other so I took the is dance the hint text is like select me bank these men in tax and the selected fellow when you select a value it will store insert a selected and then the selected value here this value is affair just because of we put the velvet is a select available that won't change on change we check the value we take the value form here and then we using the sets set state just because we are using all the we won't change the data in this select me we want object the selected variable on 12-time is this so we use the set state so we use the search state so the storing the new filling inside the selected state okay this new value must be anything this new value will come from this value depend on this video if you put ID it will store the item if you put name from here put so the Selective value the selected value will be named if we put image selected value will be image so currently I could ID so it's only printing the ID so if I put like okay if I put like name and then so now you see I select this line see them now the the printing the Navy and if I select the image it will print the image vacation see so for me I use IIT so you can use whatever you want and then I made one row so this Row is the child the child row is actually actually your here this one here this so you can design it then you can design accordingly whatever you want as as you want you can design it so the first thing in there now is image okay is the width of 25 can high so this is the width of 25 and then the second element is container which has a very it is a margin from birthday stand from website which has margin like 10 and then the value is coming from neck okay unless I already used here okay the items change a surgicenter 5 map map and then I make this after this I to close this frigate this one first we kept track holes in this record we need to put the two based because your evilness and this is a container with them and you can add more things like check box and check box for change because I think design it well you see it's a bit messy and then you click here and say - and then - and because here I put the falsify say - yeah and then depending falls that all the check box will be true already so see it's friend in the false energy there is no such state it is no any function to make it forth so that's why it's large NJ on the sides and the other things [Music] now there is no more courts so hopefully you liked this video or to download the source code you can finally go down in description and you want previous video just click the link up here ok thanks for your time and don't forget to subscribe to my channel and so sorry about my English my English is not so good because it's not my native language and I've seen in future with my good English speaking power thank you all

Channel: KDTechs

Views: 13,477

Keywords: Flutter dart app, Flutter dart language, Flutter dart camera, Flutter dart basics, Flutter dart programming, Flutter dart project, Flutter dart android studio, Flutter dart tutorial for beginners, Flutter dart tutorial, Flutter dart, Flutter dropdown items, Flutter dropdown menu, Flutter dropdown from api, Flutter dropdown button, Flutter drop down list, Flutter dropdown button example, Flutter dropdown, Flutter ui tutorial, Flutter ui design tutorial, Flutter ui design

Id: iE33JRxeWsI

Length: 11min 22sec (682 seconds)

Published: Fri Apr 24 2020