populate dropdown with api response in flutterflow

hello there guys for homer here and uh we want to build something now what are we going to build so you are going to be building this we are going to be building this drop down that has some data but now here's a catch this data is going to be coming from an api and not from firebase so this is nothing related to firebase so this is an add point summary i've created in my live server and i'm capturing this data from there so we want to build something like this so it's a drop down maybe you might add it somewhere in your form this is just what we need now let's go ahead and create this how do we do it so i'm first going to delete the whole thing in flutter flow just going to delete it delete we did it like this i'm just going to delete this because this is what we are going to be building a flash we just delete it so there we have a blank page and let's go ahead and create our add point so here we have this at point here which is basically an array it's an object of an array so i don't know i don't think i should create it again so this is how you create it it's an object of an area now you realize you might be tempted to test this i you you might be tempted to test your head point with flutter flow but i wouldn't really recommend using fatal flow for testing problems because flutter flow doesn't give you errors it only handles the responses that come from the json even if you go to an empty add point it will still give you a success but it says meaning it found that route but it did not really get the data so the best way you do it is either use postman or you can use insomnia to test your apis so right now i'm using this uh insomnia to test my code so i already have it here you you notice if i run this endpoint here it will give me some responses don't worry about this it's not related if i run it i get this area of objects here currency all right so i don't need anything here so i'm just going to remove to change this from json to no body and then let's run this there we go so we have these uh data from here so this is an area of knobbed object so mostly whenever you're working with your headphones you'll be getting your data as an area of objects so we need to capture every currency the name of the currency that's coming from here so that's what we need so this is just something we created from here very good now let's test our end point in flutterflow so i'm just going to come here and copy this that point just copy this endpoint i'm going to copy it and i'm going to paste it in flutter flow let's go to flutter flow and let's go to our apis and we are going to capture the to create our endpoints you see i have already created our endpoint here but for the sake of test uh doing it together let me just redo it i'm just going to delete this and i'm going to create the add point again you'll notice that flatterpro now has a new approach to everything you're going to come here and give it a currency let's call it currency there we go now let's slide our add point here so this is a public endpoint that's why i'm sharing it so we have some advanced features here i wouldn't recommend you use this if you are using uh a netpoint if you are not using firebase don't use this it will give you trouble don't use this one all right so there we go now we have a new way of adding variables but i'm not really going to look into this it's out of the scope of this tutorial let's go ahead and just test the response so let's go to the response part here just click on test api and it should launch this uh area for us now we'll notice something when you're working on this because if you had tried to do this area and you gave up i might just have this problem solved for you let's see what i did there i eliminate that very long all right so we save that and we go back to our code here we're going to go to our font head and we want to now add the drop down just come here create a row click here create a row there you go now inside this row we're just going to add our uh text the drop down that's just our drop down so we'll just type here drop down there we go we have this drop down from here now we want to make this drop down call an api and populate it's that data from the api there you go so i just make this float at the center so i'm going to come click on the row and make it load at the center so basically we want that in there there we go now this option here it needs to be coming from an api so instead of us adding the options manually we need to add it from the api so how do we do that first you are going to treat it like you're listing some data like how you would list it when you need to show a list of post blogs or whatever and you're going to make this an api call now this api is going to be coming from the api we just created right now called currency very good just click on confirm that is the first step now the second step is going back to the properties page where you're going to be designing it and we need to go to where we have these options so on top here where we have set from valuable click on set from variable and we need to be capturing from the currency response so this is the api lessons it's going to be json body and it's going to be a json path now you realize that our code looks like this so technically whenever you call the api flutter flow does everything for you it iterates through the array for you so it's just going to be iterating through so what you'll be working with is the json response now let me make something very clear here don't be tempted to do this we want to capture the role the currency here so because we are already told by flutter flow that this is a json body you just might be tempted to do this nope don't do that instead add an extra dot there there you go so adding that extra dot is basically just going to now do whatever you wouldn't have done before so you're just going to list our data here and display it in a checkbox so that being done that's all you need to do just click on run and this is this should just generate our code for us to generate the code for us i'll pause and come back later all right so now moment of truth let's go ahead and click on it there we go we have usb here there we go now what would happen if we add another one from our eight point left let me try and add another one from my point so i'm just going to create another extra re copy there we go and let me just add that i'm going to come here call it maybe philippines something let me just save that and let me uh go back i'll have to reload it all right there we go so uh click on it and there we go we have our extra php value there really nice so that's how you add a drop down from an api call it's pretty cool stuff in case this was your problem that was making you know to continue your project have fun working with it see you in the next video guys bye for now

Channel: wahome mutahi100

Views: 8,315

Keywords:

Id: RhekSmCbf7c

Length: 7min 54sec (474 seconds)

Published: Sun Sep 11 2022