Multiselect Dropdown in Flutter using GetX || Flutter || GetX

hi my name is amar in this video i will discuss about multi select drop down in flutter using get x as you can see in the output if i click here then you can see from here i can select multiple items and the items which we are selecting that is displayed here how to achieve this that portion i will discuss today here i have created this project by using the get cli tool after creating the project in the pub spec.tml file i have taken this multi select dependency now let me move to the home controller and here i will write the code first of all i will declare a list of string right list of string let me give the name as options equals to i will initialize it with some values let it be get x comma provider block mobx right now i will declare rx of list of string and let me give its name as selected option list equals to let me copy this let me paste it here and i will initialize it with empty value right now i will declare one more variable where selected option equals to i will initialize it with blank value and i will make it reactive with the help of dot obs fine now let me move to the home view in the home view you can see that in the body i have taken a center widget and as a child i have taken a padding widget as a child of the padding widget here i have taken a column widget now as a first children of the column widget here i will use drop down multi select this is provided by the plugin which we have taken in the pub spec.eml file fine now let me remove these things i will discuss it now in the options here i will write controller dot options now if you remember options i have declared inside home controller right now comma after that here i will write when empty means the text will be displayed when there is no selection right here i will display select state management library okay now after that here i will use on changed now this will be fired whenever we will select item from that multi select drop down and whatever item we are selecting that will be stored in this value and you can see the type of this value is list of string right now here i will write some code here i will write controller this means whenever a user will select item from this drop down list this will be fired right and here i am writing controller dot selected option list dot value equals to value this means whatever item we are selecting that will be stored inside the selected option list variable which i have declared inside the controller fine now i will write controller dot selected option dot value equals to blank i will initialize the selected option variable of the controller with blank value fine now i will write controller dot selected option list dot value dot here i will use for h fine let me put a semicolon here and here i will write controller dot selected option dot value equals to this plus some space will be there and element right so whatever item we are selecting from this multi select drop down that will be concatenated to this particular variable which i have declared inside the home controller after that one more property is there that is selected value this means whatever item we are selecting from this multi select drop down that will be displayed in this box right and to do that here we have selected value and in the selected value here i will write controller dot selected option list dot value because whatever item we are selecting that is stored inside the selected option list variable fine now here i will use a size box and let me give the height as let it be 20 and after that here i will use a text widget and in this text visit here i need to display the items which we are selecting from this multi select drop down and whatever items we are selecting that i have stored inside this selected option variable let me paste it here and what i will do i will wrap this text with obx widget fine now when we run the project at that after that we will get output like this whatever item we will select from this multi select drop down that will be stored or that will be displayed inside this text visit fine this is how we can create multi select drop down in flutter using get x i hope you have liked my video if you have liked my video please subscribe to my channel thank you so much for watching

Channel: Ripples Code

Views: 13,098

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 dropdown flutter, multiselect dropdown flutter getx, multiselect dropdown flutter complete example, how to create multiselect dropdown flutter getx

Id: NKIISO7mDiI

Length: 6min 37sec (397 seconds)

Published: Mon Mar 28 2022