Flutter Multiselect Dropdown Checkbox

hello everyone assalamualaikum well here we'll see how to create this multi-select pop-up dialog box or alert dialog you can select how many as many items as you want and then you can submit it and then you'll see that your new items are over here like them so let's get started now this is my homepage stateful class and inside this I have this scaffold and padding and right after this we have this uh column let me set the column section first will create an elevated button so over here this is our elevated button and as you can see we'll have a text over here but at the same time we need a function for this unpressed event so we'll go ahead and declare a function then we'll see the error is gone so this is the function and at the top we have declared this function even before that we have declared a list for string and we initialized with empty strings and over here we see that this is our function the function body and once again we have this items over here in a list actually in fact these are the items that we want to be able to show on a button click first so this items refers to a list of strings and then we also have this show dialog so on the bottom click this would be invoked or called and as this gets cold this would be shown as a dialog form and of course this one we want it to return string of widget strings over here as you can see over here so the result Should Be Strings and now we are using show dialog and for now we just have text and then we also have this set State function we make sure that the strings they're set into this list the list that we have declared at the top now this should return a list of items and if it returns we make sure that is signed over here just like this now we'll go ahead and save our code and we do see that over here we have the select your favorite topics now if we click on this over here we do see that just High which is this one but what do we want to see we want to see all this strings over here from this list but currently it's just showing on the top of it but we want to show it as a dialogue over here alert dialog and then the user will be able to select them okay so I'll go ahead and restart the app so that high is gone now this is very important over here we need to return things so as you click on this from here actually we want to return a list of alert dialogues like that so for this reason at the top first we'll create a new class and it will create a stateful class over here so this would be a stretchful class and then we'll call it multi-select now what it will do so as we click on this and the show dialog that shows up actually on the click button we understand this items on click we want to send this items to this class now for this reason over here we have to create a variable at the top so here we have this items uh list of strings and we pass it to the Constructor so then it gets initialized and this items once again should be sent from here so we'll call this class which is called multi select so let's come down over here and then we'll select like this multi-select and then here we have main names of parameters so items will pass items so this items referred to this one and this named parameter refers to this one over here now down here actually we want to create some fields and methods now the first field or variable that we created over here once again selected item which is string type and then we created another method now the method would take item and a bull and based on selection we'll add the selected item in this list of course if you remove we'll call the remove method from this list because we know the list has add and remove method so on bottom click either we going to choose it or deselect it based on that these two conditions would get triggered and Bookers will see that our pop-up dialog shows up so we want to cancel it if there is a cancel button and then after selecting you also want to submit so that's why we have the submit button and as we submit we also want to cancel this pop-up dialog box that would show up okay now after this we can work on this section over here so over here we have this alert dialog and as you can see over here we have a Content a single child scroll View and the list body and after that the list of item that's being passed on bottom click remember which is this one and this one actually gets cold from here as you can see all right and then because as we pop up we want to have this checkbox and we Loop through them and at the same time we set the value and then we also check if one of the values has been clicked or not well this is the time actually we're going to go ahead and run our app and we'll see that there are some changes so let's click on this and you see that we already have this checkbox with the items that we passed now let's click on this it goes but at the same time you can also select them click on this this disappear but they're not actually over here they are supposed to be here as you can see once you select something they are supposed to be here but they are not so we'll see how to do that but once again now over here you have to know that this uh checkbox list style this comes from this map so there's a list and then we invoke the map function and then we go through it one by one and we render the items actually the value and the text for it and we also have a function attached to unchanged properly so that we know which one is being selected or deselected all right so right now the problem is once we click on this and we want to save after selecting they don't get saved so we need to work on that issue so right here after the single child scroll view after content property over here we are going to use and the property which is called actions Now actions takes a list of buttons that would be showed inside this alert dialog and as you can see we also call the cancel method or the submit method so let's go ahead and run it okay all right now this time let's click on this let's select this and let's submit now after submitting we didn't see anything but actually submission happened because we don't have a mechanism to show the selected items over here right now we can select and submit now the mechanism should be inside this over here this uh inside this column and right after this elevated button so we want to show the selected items the selected items over here as you can see we are using uh wrap widget and it grabs everything from the selected items variable and then once again this is a list it goes through it in a map inside this we use a chip wizard to show the label and using the text and of course because we are using map function eventually we call the to list method of this map otherwise it won't work so let's restart everything and then we'll have select over here let's select this and let's submit and we see that it's here I select one more time so of course this time it would be totally new items so that's how it works now in general real life this would be coming from your API most probably and that's all thank you so much

Channel: dbestech

Views: 22,804

Keywords: Flutter Multiselect Dropdown Checkbox, flutter multi select, flutter multiselect dropdown

Id: Ldg_TO988no

Length: 9min 33sec (573 seconds)

Published: Mon Dec 12 2022