Multi Select Dialog in Flutter using GetX || Flutter || GetX

hi my name is amar in this video i will discuss about multi-select dialog in flutter using a text as you can see in the output if i click here then this dialog has been generated from where we can select multiple items how to achieve this that portion i will discuss today now after creating the project in the spec.eml file i have taken this multi-select flutter dependency now after that in the data folder i have created a class named as players.dart which contains two properties country and name now in the home controller as you can see here i have created a list of players now here i will write some code list of dynamic let the variable name be selected player equals to and let me initialize it with empty array and here i will declare one more variable where selected player value equals to blank dot obs this means i have made it reactive with the help of dot obs keyword right now in the home view you can see in the body i have taken a padding visit and as a child i have taken a column visit now in the children i will use this multi-select dialog field which has been provided by the plugin which we have taken in the pubspec dot eml file now the first property is list type here we can use multi select list type dot list if it is list then the values will come like this but here if you want you can use chip as well if you are using chip then these values will be arranged in chip right let me change it to list now to create this here i have used decoration in the decoration i have used box decoration in the color i have used blue color i have given a border radius of 40 and in the border i have given the color as blue and the width as two that's why this border you can see here right after that we have button icon in the button icon i have used the icon of account box and the color i have given is blue that's why you can see this account box with blue color now after that we have used button text in the button text i have used the text widget and here i have written favorite players that's why this text is appearing here right and i have given some text style now whenever i am clicking here at that time what fields what items will be generated for that we can use items property in the items property here i have written controller dot players and if you remember here i have created a list of players with these values now controller.players.map after that player and then i have used multi select item of players then player comma player dot name that's why the player names are reflecting here right now i have used title in the title i have used a text widget and here i have written players that's why this text players is generated here right and in the selected color i have used colors.blue that's why whenever i am selecting an item the color is blue right after that here i have written searchable true now if you write searchable true here then this search icon will be generated will be displayed and if i click here and after that if you want you can search from here this is also possible but if you want to hide then what you can do you can make searchable is false right now whatever items i am selecting from here those items are stored in this results variable and how to use that result variable that i will discuss later on up to this let me run the project now if i click here then you can see these items are generated right now if i select items from here and if i click on the ok button then you can see all the selected values are displayed here right now suppose my requirement is that i don't want to display the values here i want to customize it for that here we need to use a property which is called as chip display and in the chip display here i need to write multi select chip display dot none now after that if i save this now if i select the item from here then you will see that the values are not displayed here right now what i will do is that whatever items i will select from here that i will display in a text view for that let me make some changes here first of all here i will use a text widget in the text widget i will write controller dot selected player value dot value right and if you remember in the home controller i have declared this selected player value as observable that's why i will wrap this text widget inside obx fine now whatever items i am selecting from this dialog as i told you that will be stored inside results now here i will write the code here i need to write the code like this controller dot selected player equals to results now whatever value is stored inside results that i am storing into the selected player and if you remember here i have created this selected player as list of dynamic right now here i will write controller dot selected player dot value equals to blank i will initialize it with the value blank whenever i will click on this ok button at that time this on confirm will be called and whenever this on confirm will be called at that time i will initialize this value with blank right now controller dot selected player dot for each and here let me put a semicolon now let me copy this paste equals to this plus this plus element dot name this means whatever items i am selecting from here that i am concatenating to the selected player value and whatever value is stored inside the selected player value that has been stored or that has been displayed inside this text widget now let me run this once again now let me click here let me select the values let me hit on ok now once i hit on ok then you can see the selected values are displayed here and what i will do is that here i will put a size box and let me give the height as 40. save fine now my requirement is that i don't want to generate that multi select dialog upon clicking on this particular field i want to create my own button and whenever that button will be clicked at that time i want to generate that dialog to do that let me copy this paste it here and here i will use elevated button in the elevated button i will use text show and in the on pressed here i need to write the code to generate that multi select dialog and that code i will write inside the home controller right here i will create a method void so multi select i will declare this method as async and here i will use a weight so dialog sorry so dialog and in the context here i will use get dot context and in the builder here i will use ctx let me put a semicolon and here i need to write return and after that i will simply copy this multi select let me copy this let me paste it here and here i will make some changes i will remove this controller from here it is not required now this controller i will remove now instead of this multi select dialog field here i will use multi select dialog right and there is no need of this chip display this decoration button text button i can this i will remove only the items will be there and here you can use one more property that is whenever the dialog will appear at that time what value i want to display and here i can write initial value equals to selected player right that's it now let me run this once more now you can see this button is there now if i click here sorry i need to call the method as well from the home view from this button i need to call controller dot show multi select right save this now click here then you can see this dialog has been generated and if i select the items click on ok then the selected items are displayed here this is how we can use the multi select dialog in flutter using get x you can find the code in my github repository the link you can find in the description of my video i hope you have liked my video if you like my video please subscribe to my channel thank you so much for watching

Channel: Ripples Code

Views: 6,407

Keywords: flutter getx tutorial, getx tutorial, state management using getx, mastering getx, getx tutorial for beginners, getx tutorial step by step, route management getx, dependency management getx, what is getx, why to use getx, advantages of getx, multiselect dialog flutter, multi select flutter getx, how to create multiselect dialog in flutter, multiselect dialog flutter complete example

Id: zDK6e8cSmMk

Length: 11min 59sec (719 seconds)

Published: Mon Mar 21 2022