 Hello guys in this video we are going to see the dropdowns that is used for selecting country and With selection of country we will be getting list of states in a dropdown 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 a pay calls Let me just show you For this website is providing us list of country 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 countries and corresponding states, okay, just 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 a pay call I am using this STP 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 orders like models pages and repositories so on Pages we will be designing and all repositories I just added these two URLs so that I can do the API call as well Okay, so I have created a 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.quicktype.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 state 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 API call, we have to go inside this trial and Here we need to do what we need to create a URL. Let's say where URL is equal to URI dot pass and We need to pass this URI So this is going to give us the URL so that we can do API call. So let's do what? where response Is equal to we do a weight STTP 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 of final Country state model and I will say response model is equal to There is a function country state model from Jason 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 blank 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 code 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 Will say response dot status code You can display whatever kind of data you want to display and for data. We will make it black 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 save or you are L is equal to you are I Dot pass 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 already 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 well caught 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 City URL and then country is already added over there. Yeah, so dollar country and percent state 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 API calls are of get type So, okay, if it is post you have to change it accordingly So, let's do what simply use that same where response Let's change it to where is equal to await sttp.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 it will modify So check for the response if status code is okay. We have to do what city's 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 city's model and That's fine. It will remain same So 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 Fine 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 a couple of variables like Countries is there states is there cities is there and For this default values we have to display Let me show you So here this would be modified 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 an 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 await for what we have already created instance of that repository to use that dot get countries and states So this is going to give you a 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 what let's add it Manually because I will be updating it at runtime Same way we have to do what states dot add And we have to add this Let's 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 go check 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 is going to add a list of countries to this countries variable So once it is done We have to notify. So both that what we can do Let's create one variable over here Let's say bool is data loaded is equal to false And once this is done we can say And once it is done, you can set the state 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 loaded 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 to replace this child with cola And add the children property and here we can add these things That's save it Okay, now the thing is we have not done a bake all 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 idea is taking more time. That's it. Okay. So now you can see this Loader is stopped working it is 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 a 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 Bring This is country. So whatever country we are getting we have to do what? We have to return the drop down item Yeah, 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 Sorry, 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 use on change as well So on change if we will be getting the selected value And here we can do whatever you want on the change of Thus 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 initial value over here to the drop down That is our selected country Which is we have defined on the top that's for 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 true 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 So 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 that 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 it Yep So we already have it. So what we have to do over here We already have a 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 the selected is equal to is equal to what? element Dot name 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 things Okay, so let's do what? If it is matched Okay, then do what? We have to say for Where state in This element Dot Oops not element value element dot We have states. Let me just close check We have the states, okay So once we got the state one by one you can simply say states dot Add and The state Okay, again here we have state Dot name, okay So name going to give us name of states dot name 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 board And paste it over here before that bounced Priced 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 state And here instead of countries we will be saying states And here instead of country we have state and state and state and Instead of selected country we will say selected state is equal to That's fine so once this is done we have to call that get cities to get cities And we need to remember that thing as well We let's add a condition if the selected state Is not equal to select State that is the default value Then we have to do this ap equal. 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 ap equal 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 ap equal Let's do what it is Okay, again, we will be getting list of cities. Let me just cross 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 rapport or 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 just make it empty and go here and here We will 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 cities model dot data Let me just cross up So we have the state So we have to loop through this and just add the cities So let's say cities dot add and simply say city So this gonna add the list of cities And once everything is done simply say is data loaded through And do what simply set the state Yep To save this And let's go back here down And we need to add one more drop-down Let's Copy this And paste it over here This time it would be selected city And here it would be city and city city and yep city and That's fine and Let me just change it later on Selected value instead of selected city We will be saying So if the selected city Is not select city Then we can display the output that is final 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 state colon dollar selected state And in new line I will say city colon space dollar selected city So we 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 was the mistake So let's quickly reload it Okay So what is Happening here We are not getting the default 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 cities.add select City Okay, so otherwise We may 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 cities And you can see the final output Okay So let's change it to lobster And in case I change this let's say to fora Then This will not be updated this For that what we can do We can do what? We can add a couple of more methods over here, which we can call Let's say we can reset the cities And what to do is simply say city's list Is equal to empty So if the city 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 final 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 for states So reset states And simply say states And simply say let's copy this And selected state And simply say state state Save this So now we can call these reset things Inside the function. So once The state is 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? Let's state and say reset There's states as well as reset cities Fine Save this So let's quickly restart Let's try to do what? Select the country go on stone And let's say bulk and let's say It is cool 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 So Four cities once we are adding the cities You can reset the cities 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 I just go for Punjab And then I select four. Let's say any any of the city. Let's say banga 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 Figure out 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 Delhi states Let's use this And now you will be getting the corresponding It is for the same So let's find and one more thing is there. I just added Extra import for console log. Let's remove this So that is all for this video if you have any doubt to comment in the comment section Otherwise like share and subscribe. Thank you