Country State City Dropdown with API Calls in Flutter

hello guys in this video we are going to see the drop downs that is used for selecting country and with selection of country we will be getting list of states in a drop down once we have selected a state we will be getting list of cities corresponding to the state and then final output we can display okay so for that first of all I need to do APA course so let me just show you for this website is providing US list of countries states as well as cities so for this reference I will be using this I will add the link in the description and let's go back to the postman so I can show you here I have added these two apis call and once you call this first one you will be getting the list of this data that contains entries and corresponding States okay let us show you okay so for the second one we have to pass two things the country and the state and it will give us corresponding cities so we will be using these two apis so I will add the link in the description and if you want you can explore this as well I will add this link as well and in order to do API call I am using this HTTP package which I have already added in this Pub spec you can see it over here let's close it and apart from that I have created some folders like models pages and repositories so on pages we will be designing and on repositories I just added these two URLs so that I can do the API call as well okay so I have created couple of functions the one is get country state that gonna call the country API which gonna give us countries and states and the second one is for getting cities okay so let's do what let's quickly create model for the same and we can start with that so let's go to this app.quick type dot IO so first of all let's go here in the postman and we will call this and whatever response we are getting we just copy it go back here and paste it over here so we can name it something like country date model you can name it whatever you want let's select the language as start and copy this code go back to vs code and under the models I will be creating one new file that is country underscore State underscore model dot dot and paste my code over here fine and same way for second AP I will be just doing what hit this API copy this response go back to Quick type paste it over here and you can name this to whatever you want so I will say it is model let's copy this code go back vs code create a new file give it a name cities underscore model dot dot and paste it over here you can save it let's close it close it now we will move to the repository part so first of all in order to do APA call we have to go inside this try and here we need to do what we need to create a URL let's say where URL is equal to URI dot parse and we need to pass this you are so this is going to give us the URL so that we can do APA code so let's do what uh where response is equal to we do await HTTP dot get and pass this URL okay so once we are getting the response we can check for the response so what we will say if response dot status code equal to 200 then do what then we need to pass that data into model and we have to return the future of country State model okay so this we need to return before that what we can do here is so final country State model and I will say response model is equal to there is a function country State model from Json which can accept string that would be response dot body and we will be getting the model back so once we have received the model we can simply do what return that okay now if we are not getting this then we have to return something as well so let's do what simply return return black model and for error we will say no error and for message error it should be we can say there is a error because the status quo is not 200 so it would be error and the message we can say whatever you want you can say so let's say something went wrong and say here we'll say response dot status code you can display whatever kind of data you want to display and for data we will make it blank so now the error is resolved so this part is done same way we can go ahead and complete the second function let's go here let's say what you are L is equal to u r i dot parse and we have to use that City URL okay so in City URL what we have taken is equal to we have to use that okay so let me show you so here we have to use this thing this part is not added yet okay let me just paste it over here for the reference and we have to complete so what we can do is just use wellcote and then dollar that city state URL is equal to and then we have to do what we have to receive two things country and state that is already added as a argument so let's use the same over here pretty URL and then country is already added over there yeah so dollar country and percent state so we can follow it over here and the state is equal to dollar state so this is how the URL will be completed now we left with the API call so these APA goals are of get type so okay so if it is post you have to change it accordingly so let's do what uh simply use that same where response change it to where is equal to a weight s TTP dot get and you have to pass this URL that's fine and again you can check these things over there we just reuse this and we will modify so check for the response if status code is okay we have to do what cities model it is model response model and instead of using this we have to write here what City's model from Json okay and that's fine and again here cities model and that's fine it will remain same with this we have completed with the repository just one thing is missing like the way we have returned type specified same way we have to specify the here but this time the return type would be this City model point so with this repository part is completed let's close it now let's go back here to the home page and on home page I have already defined couple of variables like countries is there States is there citizens there and for this default values we have to display let me show you so here this would be by default select country select state select City and this we can make it empty because initially there should not be anything and let's do the API call First simply do what we have to get the name of countries only so what to do is let's create one more variable on the top so that out of which we can iterate through and get the name of the countries as well as States okay so let's create a variable country State model and say country State model is equal to country State model and for error we will be saying false and the message empty and the data is also empty we are getting some error okay so the problem is state is already defined over here so there is a ambiguity over here okay so what we can do here is wherever we are importing that State country State model we can import it as let's say as country state model underscore model you can say and we can use it like this yep okay so this will avoid the ambiguity problem okay all well tell this we have created this model and with this model we have to assign that values so how do you get that is equal to a weight for what we have already created instance of that Repository to use that dot get countries and states So This is Gonna Give You list of countries and states back so now we need to do what we need to add the states and countries so first of all let's do what countries dot add so we have to add that select selected country so this might be changed let's do it let's add it manually because I will be updating it at runtime same way we have to do what dates dot add and we have to add this select state okay these two things are required and then we can do what we can just Loop through that list of country states so do what where let's say element in country State model and if we have what Let's cross it so for Country state let's go here and see we are getting the data part so that means in data we have list of elements let's go back so we have to get it from data see first of all we are assessing the list this list now in this list we have to get what name so name is for country okay let's go back and say countries dot add and we will say what element Dot name so this we're going to add a list of countries to this countries variable so once it is done we have to notify so for that what we can do let's create one variable over here so let's say Moon is data loaded is equal to false and once this is done we can say true and once it is done you can set the state okay so with this we have done with this part and let's move to the design now so that we can see are we getting list of countries on UI so here what we are doing so first of all we can check here is data loader if the data is loaded then we have to do something otherwise not so let's say if data is not loaded then we have to display that circular progress indicator otherwise we will display this whatever we are displaying as of now and we have to display multiple things so for that I will not be using the text only so replace this child with column and add the children property and here we can add these things let's save it okay now the thing is we have not done API call yet so what to do is we have already done that's fine okay so let's just try to restart it or might be the ABS taking more time that's right okay so now you can see this uh loader is stopped working it is a removed because data has been loaded as we have added the logic over here so but we are not displaying it on UI site let's do what let's try to display it over here so for that we have to use drop down button and here we have to pass couple of things the one is items so items we are getting from that country's variable so countries Dot so we have to just pass this items okay so we can do what we can let's try to map it so whatever this we are getting we will be getting let's say the country ring this is country so whatever country we are getting we have to do what we have to return the drop down item so drop down my new item and as a child we have to return text where we have to return this contra and let me just format it and now we are missing what so we are giving this drop down back and Child Is This and we have to give the value as well that would be your country let me just do what so this everything is done we have to convert it back to list as well okay not here so after this country we have to add this and here we have to do what to list so this is done and let's try to you on change as well so on change we will be getting the selected value and here we can do whatever you want on the change of this country selection so let's do what save it first and check okay so we have a problem with this so what to do is let's add a couple of things over here so first of all we have to give the value that is uh initial value over here to the drop down that is our selected country which is we have defined on the top this one select control okay one thing is done let's try to save this and see if it works it works we have to add more things okay we are getting the list of fine okay what else we are missing there is one property is expanded let's give it two and check if it works okay so that will work now let's restart it quickly so you can see the loader so once data is loaded you are able to see list of countries coming over here okay so that is fine and once we are changing this list of countries what we have to do is we have to specify the selected country let's do what set State and simply say selected country is equal to selected value fine and what's wrong over here so we have to do what we have to just write exclamation in order to make sure we are getting the selected value okay so once it is done we are getting it into this now we have to do what we have to get the states so since we are getting countries and states together so what we can do let's create a method over here and say get States I think we already have yep so we already have it so what we have to do over here we already have list of countries and states so we can do what we can just use a loop over the variable that is where element in country State model dot data as we have done earlier now this time instead of using this we have to use what this state we will check for the country if country is matched then we will do what we will get list of states okay let's go back and here we will say if the selected country whatever is selected is equal to is equal to what element dot name so element dot name is giving us the country name we will checking the selected country same with this then we will do what then we will get these strings okay so let's do what if it is smashed okay then do what we have to say for where state in this element Dot not a limit value element Dot we have States let me just cross check we have the states okay so once we got the state one by one you can simply say States Dot add and estate okay again here we have state dot name okay so name gonna give us name of States dot net so that's fine let's save this let me just quickly restart so one more thing we are missing now we have to add this drop down over here as well okay so what to do is let's copy this port and paste it over here so before that post prized box just add some space and height of let's say 20. and here we will add it okay and here instead of saying selected country we will be saying selected date and here instead of countries we will be saying States and here instead of country we have state and state and date and instead of selected country so this is selected state is equal to that's fine so once this is done you have to call that get cities so get cities and we need to remember that thing as well we let's add a condition if the selector state is not equal to select date that is the default value then we have to do this apical otherwise not okay so let's save this and check let's use a country for example I will go for India since I know the states out of it and you can see corresponding states are coming now on selection of this we have to call get cities okay let's go back to get cities and here we will write the code so on get cities we have to do APA call so for that first of all we will say is data loaded is equal to false then we have to do what we have to do EPA goal so let's do what it is okay again we will be getting list of cities let me just scroll ship so we have to get it from the data okay to do what we will be getting the model back let's say underscore country state city repo dot get cities and you have to pass the country and state so country is available in selected country and the state is available in selected state and once you will do this you will be getting back one city model so what to do is let's create one more variable for City model as well like this error is false message we will not do anything and then data I just make it empty and go here and here we do what we will assign this response back to this variable okay so once we got the response we can do what we can simply Loop through this cities so let's say where City and we have this it is model Dot data let me just cross it so we have the state so we have to Loop through this and just add the cities so let's say it is dot add and simply say it is so this gonna add the list of cities and once everything is done simply say is data loaded so and do what simply set this date yep to save this and let's go back here down and we need to add one more drop down that's copy this and paste it already this time it would be selected City and here it would be City and City and City and that's fine and let me just change it later on selected value instead of selected City we will be saying if the selected city is not select City then we can display the output that is minor output to be displayed so here you can display whatever you want to display so I will say what country and then dollar selected country and in new line I will say it colon dollars selected state and in new line I will say City colon space dollars selected let me do like this you can do whatever you want you can design it more as well so let's do what format this document and just save this okay so we are missing something here instead of doing States we have to do what cities that will be straight so let's quickly reload it okay so what is happening here we are not getting the Deferred value of selected City okay so because we have not added that selected City what we can do we can just do it on the beginning as well so once we have done this we can add it here as well just say it is dot add select Infinity okay so otherwise we're gonna miss it so at the same time we can do it let's quickly restart and you can see now let's select for any any let's say Afghanistan and we get this bulk and then you get list of it is and you can see the final Dot okay so let's change it to Lobster and in case I change this let's say to horror then this will not be updated this for that what we can do we can do what we can add couple of more methods over here which we can code let's say we can reset these cities and what to do is simply say cities list is equal to empty so if the city laser list is empty we have to do what it is Dot add select City fine and that's we have to do what one more thing selected city is equal to select city as well and yep we can clear this text as well that is finer text to be displayed is equal to empty so this is what we can do with the city same way we may need to specify four states so reset States and simply says States and simply say just copy this and selected date and simply say state save this so now we can call these reset things inside the function so once the state has changed we have to do what once the state is changed let's say if this is fine and we have to do what just before this adding the elements we can call the reset over here simply say what at State and say we said this States as well as preset it is fine save this so let's quickly restart let's try to do what select the country go understand and let's say work and let's see it is full and if I change my city that will work fine but if I change my state to something else and you can see we are getting different one or the same one we are getting the same one I think so what to do is one more thing we can do let me just add one more thing here four cities once we are adding the cities you can reset this it is as well okay so just before this let's do what set the state and say reset cities save this and let's quickly reload and check it again okay let's try this time with India and so that I can cross check everything let's say India so select the state let's say either slope or Punjab and then I select for let's say any any of the city let's say bunga and if I change from Punjab to something else let's say Rajasthan so I should be able to see list of cities in Rajasthan you can see now it is reset okay again change it back to something let's say Punjab and you should be able to see and let's select that any of this let's say is wrong and you can see it is coming over here and let's try to change the last one that is from India to any other country let's say Italy and we will get the list of delete States let's use this and now you will be getting the corresponding it is for the same so that's fine and one more thing is here I just added extra import for console log let's remove this so that is all for this video if you have any doubt do comment in the comment section otherwise like share and subscribe thank you

Channel: Jatinder Verma

Views: 3,066

Keywords: Flutter Dropdown, Country State City Dropdown, Flutter API Calls, Dynamic Dropdowns, Flutter, Flutter Form, Flutter Dropdown Tutorial, Flutter Dropdown Menu, Flutter Location Picker, Flutter State Management, Flutter Dropdown List, Flutter HTTP Requests, Flutter Dropdown Example, Flutter Cascading Dropdown, Flutter User Interface, Flutter App Development, Flutter Development Tutorial, Flutter Beginners Guide, Flutter Widgets, Mobile App Development, jatinder verma, easy

Id: 7I3o36nw45k

Length: 34min 33sec (2073 seconds)

Published: Thu Sep 21 2023