Database Driven Dependent Dropdown in Flutter using GetX || Flutter || GetX

all right guys welcome to another flutter tutorial using getx in this video i will discuss how to create database driven dependent dropdowns here you can see this is a dropdown where a list of zone is coming from the database if i select a zone then corresponding to that zone the corresponding state will be displayed how to achieve this that portion i will discuss today okay now here you can see in the mysql database i have created a table named as jones where we have two columns zone id and zone name with these values right similarly we have a states table where we have state id zone id state name where we have these values okay and here i have created the corresponding api by using laravel you can create this api by using any language of your choice okay here in this api.php there are two functions gate zone and gate state to retrieve the zone and state respectively right and we have app controller where i have created a function gate zone which is again calling the gate zone from the app model to retrieve the zone from the database similarly this gate state function i have created which is taking the zone id and with that zone id it will retrieve the state from the table now here you can see this is the model app model which i have created where i have created this gate zone function which is retrieving the data from the jones table and i have created this gate state function which is retrieving the state table or data from the state table based on the zone id right and i have created this flutter project by using the gate cli tool okay after creating the project by using the quick type io site which i have discussed in my earlier videos also i have created this state model and zone model inside the model folder which is created inside the data folder this is the structure of the state model okay and this is the structure of the zone model fine these are the two models which i have created after that inside the data folder i have created another folder providers inside the provider folders i have created this api provided dot dart file here you can see it is the class which is extending the get connect these concepts i have already discussed in my previous get x videos fine this is the app base url after that i have created this gate zone function which is returning a future of zone model fine and if response dot status dot has error then it will return this otherwise it will return response dot body history and i have called this zone model from json function fine similarly here i have created this get state function which is retrieving the state from the table okay after that inside this home folder i have created this repository dot dot here you can see i have used api provider this is the constructor and here i have created this gate zone and get state okay now if you follow my get x playlist then these concepts i have already discussed fine now in the home binding here you can see here i have used git dot lazy put home controller and after that in the constructor of the home controller i have used this repository api provider now let me move to the home controller in the home controller you can see it is extending the get x controller where i have taken this repository and in the constructor i have passed this repository after that i have created a global key and i have given the name as form key right now in this controller i will write the code to populate the drop down from the database here i will declare a variable rx of list of john i will give the name as lst zone model equals to let me copy this let me paste here this and this will be a array fine now from where i am getting this zone if you remember i have created this zone model here and you can see this zone i have declared here this class zone i have declared here fine now let me move to the home controller here i will declare another reactive variable where selected zone id means whatever zone id i will select from the drop down that i will store in this variable and i will make this variable reactive with the help of dot obs okay and here i will create rx of list of drop down item ok drop down drop down menu item i will create this and i will give the name as and this dropped out menu item will have the type as string fine and i will name it as lst zone drop down menu item ok now let me copy this paste it here and this will be a array okay now after that in the on ready method i will call a method get zone which i will create later on okay now here i need to create this method let me create it void get zone now inside this method first of all i will use a try catch block try catch block i will use now inside the try block since this function will retrieve the data from the zone table so while the data is being retrieved i need to show a loader and to do that here i will call git dot dialog and inside this dialog i will use center widget inside the center widget inside child i will use circular progress indicator fine this i need to display now after this here i will use repository this repository if you remember this repository is nothing but the object of this repository class now this repository class contains the method get zone okay get john dot then value now inside this value i will write the code let me put a semicolon here now here i will check if value dot zone data now this zone data from where i am getting actually this zone data variable contains the list of zone from the table so here i am using zone data let me show you here you can see this is the gate zone api and you can see the list of zone is stored inside zone data similarly for a state the data is stored inside state data okay that is the reason why i am using zone data here now here i will check if this dot length is greater than zero then get dot back back this means the data is retrieved from the server and i need to close that circular progress indicator after that here lst zone model dot value dot whatever value is stored there that i will clear after clearing lst zone model dot value dot i will call add all and inside this add all i will pass value dot zone data okay and here i will use null check operator fine now lst zone drop down menu item dot value i will clear it as well let me clear this now i will add lst zone drop down menu item dot value dot add with this i will add a drop down menu item and as a child here i will use text inside this text i will pass select zone okay and in the style i will use text style and in the text style i will pass the font size as 14 and font weight i will pass font weight dot bold put a comma comma save okay so here in this drop down menu item as a child i have used the text widget and here i have displaced select zone and i have given a style now for this drop down menu item there is another property which is called as value i will put the initial value as 0 okay now after adding this here i will use for zone in lst zone model dot value means whatever value is there inside the lst zone that i will traverse one by one and those values i will add to the lst drop down menu item okay and in the value now it will be zone dot zone id dot to string sorry to string and in the text here i will pass joan dot john name dot to string okay and here i need to put a comma so this value from the zone table that will be retrieved one by one and it will be added to this drop down menu item okay and if any exception occurs then again i will call this get dot back and if you want to handle the error then the corresponding code you need to write inside this catch block similarly for any error here i will call on error and here also i will call get dot back and the corresponding error handling code we need to write here fine let me write error handling code and here if any exception occurs then exception handling code will be here okay now when the user selects any zone then corresponding to that zone the corresponding state will be retrieved let me write the code for that too simply i will copy paste it here and it will be replaced with states now from where i am getting these states if you remember inside the state model you can see here i have created the class states fine let me move to home controller states and copy this and it will now be selected state id and here let me change the name from zone to state okay and i will simply copy this gate zone method i will paste it here now this method name will be getstate and this getstate method now will take string zone id okay and now this method will be get state and here i need to pass the zone id now this will not be zone data it will be state data because if you remember i told you that state contains all the list in the state data that's why here i need to use state data okay and this zone data will also be state data and this will not be lst zone model this will be now lst state model okay here i have to change the name no here i need to change it to lst state model okay now lsd state model this will also be sd state model it will not be lsd zone it will be lst state let me copy this here also now this will be select state okay and here it will be replaced with the states let it be states it will be lst state model and now here it will be states dot state name and it will also be states dot state id okay that's it i have written the code to retrieve the state also now let me move to the home view in the home view you can see here in the body i have taken a container i have given a margin then there is a single child scroll view i have taken a form widget in the form widget i have specified the key as a child of the form i have taken a column widget now as a children of the column widget here i will take obx in the obx here i will use the drop down button because i want to do validation also that's why here i will use drop down button form field okay now let me remove this for the time being let me put a comma here now here i will use the property is dense i will make it as true okay and in the auto validate mode here i will pass auto validation mode dot user interaction in validator sorry in validator here it will take well in the well here i will return controller sorry it will be written return controller dot validate zone obviously this function i need to create here i will pass well with null check operator so now in the home controller i need to create this method let me copy the method name move to home controller and here i will create the method validate zone okay this validate zone method will have the return type as string and this validate zone will take value okay now here i will check if value equals to equals to zero if you remember i have initialized the let me show you here i have initialized the zone id with the initial value zero similarly i have initialized the state id with the value zero so if someone selects select zone then obviously the value means if someone selects the first index that is select zone the value of the selected zone id will be zero similarly if someone selects select state then the value of the selected id will be 0 and if someone selects the initial position that is select state or select zone then here i will return the error message as select zone fine and here i will return null else return null now i need to create the same method for state as well so here i will simply copy to state it will be select state now let me move to the home view in the home view val dot tostring fine now here i will decorate the drop down button form field for that i will use decoration in the decoration i will use input decoration in the input decoration i will use border in the border i will use outline input border and here i will use border radius in border radius i will call border radius dot all and here i will pass radius dot circular and i will pass the radius value as 8. now let me put some commas here save this okay i have given the decoration for the for the drop down button field now here i will specify the items items and in the items i will call controller dot lst drop down menu item dot value whatever item is stored inside the lst sorry lst john whatever value is stored inside the lst zone drop down menu item that will be the item for this drop down button field right now here i will use value and this means the initial value for the drop down button for that i will call controller dot selected zone id dot value and since the initial value was zero that's why the initial value will be will be displayed as select zone okay now in the hint i will call text in the text i will pass select zone and in the style i will give the text style in font size i will pass 14 and i will pass the font width font weight dot bold okay and here let me put a comma now in the unchanged sorry this one here in on changed means whenever the item will be selected from the drop down button field here i need to pass selected value whenever the item will be selected from that drop down field i will assign the value to controller dot selected zone id dot value equals to selected value dot to string okay and now here i will check if controller dot selected zone id dot a value if it is not equals to zero then i will call controller dot get state and here i will pass the selected zone id value let me show you the output first here you can see if somebody selects select zone which is at the index position 0 at that time it will display the select zone message but if somebody selects zone 1 then corresponding to that zone 1 the corresponding state will be retrieved that's why here i have done the checking if controller dot selected jonathan.value is not equal to 0 this means if someone is not selecting this select zone whose value is zero then this gate state function will not be called it will be called if and only if the user selects zone one or zone two okay now here i will use another property which is is expanded i will make it as true fine now after that i will use a sized box having the height as let it be 10 and i will copy this entire obs widget i will paste it here and now it will be changed to controller dot validate zone to validate state sorry this i have already created inside the controller and it will be select state it will be selected state id now this if is not required here okay and in the items it will be selected state drop down menu item it will be selected state id okay if i run this project then we will get the output like this this is this is how we can create database driven dependent drop down in flutter using get x i hope you have enjoyed the video please subscribe my channel thank you so much for watching

Channel: Ripples Code

Views: 6,390

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, flutter dropdown getx, database dependent dropdown flutter getx, dropdownbutton form field flutter getx, populate dropdownbutton from database in flutter using getx

Id: 8a_-u5sBAdQ

Length: 25min 2sec (1502 seconds)

Published: Sun Dec 05 2021