Connect API in FlutterFlow | Teaching NoCode App Development

hey there this is akshay madan welcome back to a new video and in this video i'm going to show you how you can create an application using flutterflow using the apis so i got many requests that please teach us how you can connect apis in your flutterflow app so that you can create a full-fledged application using no code without even knowing this dart concepts or op concepts or anything if you are a startup owner if you are thinking to create an mvp prototype flutterflow is the best way of creating mobile applications if you don't know coding right so i'm going to show you how you can create or connect apis or integrate apis in your ui flutter ui that you have created on flutter flow so let me just go on my dashboard and i'm going to create a new project and i'm going to call it api app right and let's create new i'm not going to use any templates we are going to code uh we are going to use all the widgets uh that are there in widget tree and i'm going to use an cats facts api so that's an api which is going to give you uh facts about cats right so all the cats liver are happy now and okay so this is good click on next step and this is everything is good so i'm going to click on skip and this is my application right so what i want to create is i am i'm going to create a simple application there will be a text box and in that text box the facts about cats will be visible and below that there will be a button uh fetch or you can call it like give me the fact kind of that so whenever you are going to click on that button the new fact about a cat will be updated on that text box right so i'm going to use this cats api cats facts api so cats facts api this is the api and in this you can see if you just uh in this this is my end point and if i just add slash fact over here i'm going to get a json result so you can see this is my json result and in this json result i'm getting uh like dictionary in which fact is the key and length is the key so this is length is number of characters or and fact is my actual fact so this is the string which i want to print in my text field using uh like all the methods that are there in flutterflow to connect apis to integrate apis right and i'm if i'm going to write facts then let's see what we get so i'm getting so many cats so many facts about cats right so this is the result but i am interested in only one fact and you can once you all know all the concepts you can code anything right you can create anything so let's work with this thing so this is my end point and you can work with any apis you can work with headers you can work with parameters like so this means that you can take any api and you can integrate in flutter flow very easily right so let's go on flutter flow and first of all i'm going to go on this settings kind of icon so this is an icon for api calls so i'm going to go over here so let's go over here and click on add api call right and you need to give an api name so let's give it cats facts right and write the api url so this is the url or the end point that we have copied from here perfect and here you can add all the headers so sometimes what happens is you need to write headers you need to define some parameters like let's say you are working with weather api so of course in the weather api you are going to give a parameter of city of time of humidity or any kind of that in header you can give some api headers right so all those people who know about apis they are well aware like what are headers what are parameters right so i'm going to keep it simple and if you know headers parameters if you require them you can add them otherwise let's keep it simple and let's add the url itself and if you are having an api key so you can just write api key over here like whatever url or you can check the documentation of the of that api and you can work with it so let's click on add api call so api is added in my full application and if i just go over here and now something complex is going to happen so keep an eye over it and just be attentive because over here i'm going to click on this response and test so let's first of all test this api so that we are sure that this api is working in my flutter flow right so over here if i just click on test api call i am going to get this result fact and length but what i am interested in i am interested in this fact i'm not interested in this dictionary right so what i'm going to do is we need to provide some json paths so that this fact is stored in a variable or it is stored in some you know path and in my ui i just want that path and i don't want anything else i am no i am not interested in this whole dictionary i am not interested in this length i am just interested in this fact right so what is going to happen is i am going to add json path and click over here write a name of that you know the variable so let's call it fact and over here we need to define the path right so what i'm going to do is you need to define square brackets and inside that quotes right and let me just increase the font size you can see uh square brackets then quotes and write fact like this fact right so what i'm going to do is i'm going inside this result json body and i am interested in this fact so let's say inside this there were you know like this it was a result so let me just edit it this is very important so let us say the result was over here there was one more key and the result was let's say temperature and it was a again it was a dictionary right and inside it there were again some keys let's say of delhi and the temperature was let's say 38 and let's say another city was mumbai and temperature was let's say 27 right so let's say this was the api result right so let me just put it very systematically so that it's visible perfectly yes so now it is visible right so let's say this was the result now what i want is i want delhi temperature so what i'll do is i'll go inside temperature and then i'll go inside delhi so over here i'll go inside temperature and then i'll go inside delhi and whatever is there in the key delhi it will be stored in my variable whatever name you want to give it so how i am telling it like what's the documentation behind it so what you can do is over here there is an i button json path name just click over it and or if it is not clickable just write json path json path if you want to read more about it so json path syntax and over here you can see this is the way so this if you have a list then you can refer to the indexes if you are having key value pairs then you can like use the square brackets use the keys and you will get the value right so this was the uh like you know it was a hack or you know it was the logic behind it so let's keep it simple and let me just click on again on test api call and i'm getting my fact and my length and i'm going to remove remove all this and i'm going to keep it simple and i'm going to keep fact inside it uh yes so this is perfect and you can create one more path and you can keep it length and you can write the same thing over here and right length so length will be stored in this length fact will be stored in this fact right now what i want to do is i'm going to set my path so over here i just want my fact to be visible i don't want this length i don't want this dictionary so over here i'm going to write fact and yes this is the thing and why it is not visible so let's click on over here so this is not visible let's see what's the problem over here fact so this is the thing let me use double quotes i think it was double quotes yes so now it is visible you can use double quotes you can use single quotes that was not an issue i just did not save it so before like expecting the result over here you just need to save it and then come again over here and then you can expect the fact result so you can see now i can see fact so if i just click on length i can see length so whatever length is over here so now you can see that i'm able to get the keys data instead of getting the whole dictionary so now it is a time to code the whole ui and let's fetch the results using these apis right so let's go on our ui thing and let me just decrease the size yes now it is good and in the app title so you can see i'm on the pages and i'm having only one page at his home page and now i'm going to add uh i'm going to give it a beautiful title instead of page title so let's give it cats facts right cats facts app right perfect and over here i'm also going to change the primary color to teal or kind of greenish so let's keep this color no this is not cool and let me just keep it this one this is also very bright so let me use a darker color yes this is good this is good and now uh i think yeah this is good okay so now let's add our decoration image uh to this whole app so let me use cats thing and cats wallpaper google yeah cats wallpaper and i'm going to use this one so let's copy the address and over here in this i'm going to add a container so let's go to widget tree widget tree and let's add a container and this is my container now i'm going to give it full height and full width so let's go inside width 100 sorry height hundred percent and width also 100 so this is good and now add a path over here so you can see the cat image is over here now i want a text you know text box kind of thing so what i'll do is i'll search for a text box if i'll find that will be good so i'm having this only text so what i want to do is i will take a container though and i'll put my text inside that white container so that it should be visible so this container is taking the full height this i don't want uh let me just do it like this yes instead of directly putting the column let's uh directly putting the container let's put a column because we also need that button below that so i'm going to take a column i'm going to put it over here then i'm going to use a container like this and i'm going to keep the main axis alignment of my column so go over here select column and my main access alignment dot center where is the center yes this is the center but it is still not in the center let's see what's the error that's not a big issue so this is my container and what i want to do is i'm going to keep my height as let's say 80 not 80 let's keep it 100 itself and my width as let's say 340 okay and let's put a text inside it so i'll go in the widgets i'll select text i'll put it inside this text right and we need to make it like in the center so let's go to alignment where is my alignment box select the text text is selected and responsive visibility no so here is my alignment you can see and select the alignment and i'm going to keep the vertical alignment at zero so this is at the center perfect now i want this box also to be at the center so let's see how we can do it not like this and let me select alignment yeah this will not happen because it is wrapped inside a column so we need to do something with the column only so let's go inside the column and main access size dot max scrollable it's not the point it is at the center um okay that's not an issue let's add our button first so let's add the button so this is my button and now i'm going to give it some i'll increase its width to infinity not infinity exactly let's keep the same width as we give it to our container so 340. so this is good and heights i'm going to give it 55 i usually give height 55 to my buttons so this is a tip if you want it button looks good at 55 height so i'll use the same color like this and now i'm going to give it i want some space between it right so what i want to do is i'll go inside my widgets uh yes i'll take a container i'll put it over here and in my widget tree i'm going to use this button and this button will be below this container and now i'm going to give it lesser height to my height to my container which is between this text box and my button and now i'm going to give it transparent color so that it should not be visible so yes so you can see the gap this is good now only one thing that i'm not liking is it's not in the center so if you can't do it that will be very good but like what's the issue like if this is my column and this is my container and this is my home page so what we can do is uh i think what one thing that we can do is we can wrap this whole column inside a container and we can give expanded height to that container so that is your task if you want to do it but for now let's give this button some task so select this button and go inside this actions thing and click on add an action and you can see uh search for action on tab so when i'm going to tap on this button it will be not navigate it will be an api call so click on this api call and backend call then call name will be cats fact so you remember that we gave our api one name so that is cats facts output variable name so you can give one output variable name so i'm going to call it fact right so this is my fact and now this is all set button thing is done so whatever we want to do is it's all done right now click over here select the text and also you can see the set from variable below this you can see hello world and above it you can see set from variable so click on that and click on source source will be action output so that means there is some action there will be some output of that action and i want that output to be visible in my text box so action outputs available option fact so this is the variable name that we gave when we were defining an action to our button so fact response option will be json body so my output is in json body available option is json path and over here you can define that same json path so like like this give the quotes and inside it right fact right default value if your fact is not like till now it is not there so you can see sample fact perfect click on save everything is done and now i am also going to give this text as black color so where is my text color yeah it is already black so yes so this is all good i think we are ready to go and we are ready to test our application so let's click on run and let's wait so currently my app is running and if it is visible to you you can see this thing it is null but why it is in white color i don't know but let me just run it let me just click on my button and yes so i can see my cat's fact over here let me click on button and yes you can see the cat fact but why it is in white color i don't know so let's do one thing let's go over here and let's give this a container as black color so my main purpose is just to show you that our api is integrated successfully you can work according to you let me click on run so now you can see the application you can see the text as null and if i just click on button you can see another fact click on button you can see another fact fact fact so all these result is coming from our api that is cats facts api right you can create your own application you can work with the json result that you are getting now you know how you can go inside json body you can go inside dictionary and you can take the element that you want your whether you are working with weather api go inside the whole json body select that city take the weather take the humidity and show it in your application so i hope that this video was pretty clear and it helped you and if you have any kind of development work that you want us to do then you know that i own a grow monk freelancing agency where we provide app dev web ui ux services you can reach out to us you can also follow me on instagram and we will happy to help and you can also see that we use flutterflow a lot so if you also seeking for an mvp or a kind of product that you are seeking as a startup you can use flutter flow and you can create your product so till next content keep coding keep innovating and thanks a lot

Channel: Akshit Madan

Views: 18,576

Keywords: #developer, #flutter, #appdevelopers, #ios, #android, #google, #apple, #data, #datascience, #collegestudents, #engineering, blockchain, freelancer, college, students, internship, web3, solidity, python

Id: 3Bp_vXE04WY

Length: 17min 29sec (1049 seconds)

Published: Mon Apr 25 2022