Flutter Api Calling and JSON Parsing using Dio and Json Serializable

[Music] hello friends i'm mad after from easy approach and in this video i'm gonna teach how to make api calls and how to parse data effectively and efficiently as i've received many requests regarding this topic and student normally face issues while making http or api calls and parsing it so i decided to make this video api is actually an in-between guide that connects our application to the backend where data is stored with using correct api you can get some data you can add some data or you can even update the data on backend in this tutorial we are going to use some dummy apis that we can get from this website that is request response dot in this actually short of request and response and over here uh just a little below you can find to multiple endpoints that you can use in order to get some data from their server or to get a list of data or to create a data or to update uh or delete so you can definitely perform current operations over the data that you can get from the the server and for making http requests on flutter we have many different options so we can uh use http package or we can even use devo package so in this video i'm more interested in using their package you can find the deal package on pub.dev and for installing it you can go on installation tab and you can just copy this line and you have to paste it inside your pubspec.cml file so you can paste it after capertino icons and you can click on this pubget so this would install this dev package and then we can use it for making http calls and once you add the do and you get the response once you make the http request you have to convert it into the real dart objects and that's what we call parsing of the data because we get the data in raw format in either json format or xml format so we have to convert it uh into real dart objects so that we can use it in our application we can either show it on the list or we can do anything we want so for parsing the data we have a couple of options we can use we can either use the dart convert library that helps you converting the json object into dart rail objects so that we can use it in our application but doing that you have to do a lot of work manually what we can rather do we can use this json serializable this actually uh generate a clause for json code that helps you convert the json data into real object and it actually helps you avoiding the boilerplate good so we are definitely going to use this in our application so for installing this you have to go in installing tab like you did with the dio package and you just have to paste this line in your pubspec.yaml file you can do it after do and then you are good to click on this pubget this would install the package in your application and you can use it in your application and now what we have installed couple of packages successfully the first one is duo that will help us making http requests and the second one is json serializable that will be helpful for us for parsing the data into real dart objects now what i'm gonna do i'm gonna create a new file new class file that will be actually for configuring the duo package and for making http requests so inside the lib you can create a new dot file with you can name it either duo service you can name it or http service this would make more sense inside it we will do all the stuff for for configuring the deal package and also for making http calls using do so just make this uh file and it's asking for okay so we can cancel it because we don't want to add it to git right now okay so we we can just make it an ordinary class and inside it what we can do because we'll make the http request using their package so we need to get the do object first you can make it private and inside the constructor of http service we can initialize this due instance so for initializing you can just write do and inside it you have to give some base options so the base options uh using base options you can actually give some global stuff like uh like base url so this base url will be used throughout the app whenever you'll make the http call you need to have the base url so in our case the base url is this request response dot in so we can just copy this this is our base url and at the top of the file you can even do inside the http service and you can make it base url guess i think you can just make it final base url and inside it you can just paste this so we can give this base url over here and if you have like a header in which you can give some authorization tokens or something so you can give it uh in a map form also but i don't think uh the api that we are using uh requires the header or authentication uh any sort of authentication anyways so we have configured or we are we have actually initialized the deo instance that we get that we will use actually for making http request and now we will add some interceptors to this uh do uh instance by interceptors uh what is actually interceptors so by interceptors you can have callbacks and those callbacks would gets called in different stages of api calling so you can keep track of what is happening because uh you know in some cases or most of the cases you have to keep track of what you are sending to the server and what you are receiving sometimes we make we make mistake uh while sending the data to the to the server and we got uh and we get some unusual response so for solving that problem we have to debug the code and we have to do we have to spend a lot of time but once we add the interceptors we can we can see the progress in console well like we can print uh what is the data we are sending and what's the response we are getting we can print it on console and then we can we don't have to worry about what is happening behind the scene so let's see how we can add the interceptors to the deo package and those callbacks would get call in every api calls that we will make using the package so for adding the interceptors first i am doing uh i'm making a function which is the initialize interceptors and inside it okay so we have to correct this initialize interceptors and inside it we can use this dew instance and inside the dew we have interceptors and inside it we have add and what we can do we have an object which is interceptors wrapper so i think i've made some typo it's actually interceptors wrapper so here it is and inside it we have callbacks different callbacks that we can use in order to keep track of uh what's happening uh while we're making the http request the first one is the on error the second one is on requests so this on request will get called whenever we make uh we'll make some requests and on response will obviously get call whenever we get some response so whenever there will be a successful api request so we will get some response and the response will receive inside this so here we have we got some response and this on requests as i said will get called once we make the http request so here it is request you can you can give it any name but the object will that you will receive over here will be request object and at last we have this on error so over here we'll receive the error so this callback will actually get called if we uh get some error while making the http request so inside the on error what we can do or we can just print the error message so you can see the type of this error is duo error so inside it we have a couple of things like we have the request options and a lot of other stuff but we are more interested in message so that we can see what uh error we are getting and we can fix it and inside the on request uh let's see what it is it is actually request options so inside it we have base url and we have the path and we have okay so what we can do we can inside it we can print uh the request type like a get post or update so you can print the request type using request dot i think it's type no it's something else i think it's method okay so this is how you can print the request method and after it we can print the url or the endpoint on which we are hitting so this way you can you can know what uh method you are uh using and what endpoint you are using for a certain request so that you can know it's actually right endpoint and right method so inside it we have the endpoint actually no so it's actually part okay so inside the on response let's we'll see what we have inside the response so it actually responds so we can just print the data in the on response so that we can know what data we are actually getting from the server for a certain request now we have to initialize we have to call this initialized interceptors inside the constructor after we configured the uh dev package so this is how we can add the interceptors and now what we have to do we have to make a method or actually a future for making get request because we'll first make the get requested that is why first i'm creating the future for get request so the future will return a response object that's actually from the duo package you can see the dart file so just give it a name like get request and obviously uh if you are making the get request you need to have you need to have the end point so over here we will receive the end point and as this is a future and we'll make some asynchronous api requests so we need to add the async now for making the get requests we can use the do instance so what we have to do we have to write do and inside it we have get and here you can provide the endpoint and this will return us the response type object so first let me create a response object which is from do and we can initially initialize it with this duo.get you can see it's giving some error because okay so there's slightly difference in the spelling and you can see we cannot assign this future response and to the response type so what we have to do this will this is actually this get is actually a future and it returns a a response type object so we have to use a weight to get the uh response object because it's actually a future and what we can do further we can wrap this thing and try and catch and this type of error we get the exception one while we make the http request using their package the exception we get is actually the do error we can specify here the type and just for the sake of debugging and making sure that we are uh not getting error and to know what sort of error we are getting actually so we can uh just print the error on console okay so i think it's should be error okay we can just print the message and also we can throw the exception with the error message so that the caller method will get the acknowledgement and he can catch the error so you can throw exception and inside it you can just pass e dot message and if there is no error you can simply return the response object so that's great and now we have the get request method that will be useful for getting the data from the server now let's create the model for for the for the data that we are going to get actually so we are going to actually get this single user first so you can see this is its structure so we have to make the model of this structure according to uh by using the json serializable and for for using json serializable we have already installed the package so what we have to do uh we have to go back to the project and inside the lib we can create a model folder and inside it we can create a file for for the user so it's actually the user model you can just keep it user now let me open the uh the model so this hole is actually the response of this endpoint for getting the single user so you can see this is the whole json object and inside it we have couple of more json objects that the first one is the data so data is the key actually for this json object and this is actually the complete json object just for the user and the other key is support and the json object associated to it is this so it's actually the support and some uh promotional stuff for this response or for this ape for this whole website so we are not really interested in this support thing but we are rather interested in this data part so it's actually a part of this complete json object so first we have to make uh the json model or sorry the model clause for this particular json object which is for data which is actually the user in this case so we have to make the json we have to make the dart object or model clause for just for this json object first so for making this what we have to do we first need to create a class and you can name it anything like i'm using using user and inside it we have to use json json value we first have to import the json annotation i think i haven't let me first recheck if the json serializable is installed just for the sake of confirmation i'm reinstalling it now let's go back to user.dart and we should be able to import annotation file okay here it is so this is json annotation and then what we have to do we have to use the json value so i think json the j is capital and then we have value and inside it we have name and here we have to specify the key for each of the fields in the user object so here is the user.json object and you can see inside it we have many different fields the first one is id the email first name last name and avatar so for each of this value there is a key associated so we have to uh we have to register these keys uh in in the user model so this json value is actually indicate that we are going to get some field with the name id and we have to store it because this is an integer value we have to store it in integer id again so there is some issue maybe i it's a mistake so let's see this is what it is okay so we don't need to have the name we just need to write here id something like this this is the positional argument not the named argument so make sure this id should match this id even though you can change the name of the variable because it's just a way you will call this id but this id should be same with the response that you are getting from the server if you don't make it same then you will not get the id in this id variable and then similarly we have to do the same thing for each of the fields that we have in the in the response so let me see what uh what is left then we have email we can rather copy this whole thing and paste it on the project file so that we can we don't have to navigate back to the website so the other one is the email so we can just copy this thing as i said this should be same the key should be same uh with the should matches the original response and then we can because this is actually a string value for the email so we can make a string variable and then we can store it with any name so i'm just making the same name but you don't have to give the same name actually it's not necessary and let's duplicate this thing again and then we have the first name which is actually the string again so and this is first name and you can see now we have a different key and the different variable name so you can do it and then similarly we have another field which is for the last name we can just change the key and also the name last name and then we have the avatar which is actually again a string value or a dummy picture or something so we can just uh get this avatar property and then we can give it a name of avatar and now we can remove this access code let's format it that's good i just realized that we we made a mistake this is not the json value this is actually a json key because we are not actually this is actually a key we are registering the key so now we have the property name inside it okay so let's rename all these so i can find in this whole file and then we can just rename it and also we can give here a name this is this is a cool feature of android studio now our model is complete but there are still some things that is that are missing and that are actually important of for json serializable to work on the model so the first thing is we need to have the constructor for this user model even if you don't want to have constructor still you have to create it uh you can make it empty constructor so making empty constructor is simple just you have to write user and then you have to write the round brackets and then semicolon and there are a couple of lines that you have to paste or that you have to write in this user model and that's actually the boilerplate code that you can get from the json serializable documentation so you can open the readme tab and then you can find the person model and of at the last the couple of lines you have to paste these lines in your code and then this is actually for the person uh they have given the example for a person model so what we can do we can rather have a user so just replace all the persons to the user that's great so it will definitely give us error because this user from json and this this user to json is actually will be actually generated code that you the json serializable will generate after we run some command so initially it will give error there's no problem we will solve it now for generating the file that will contain this user from json and user to json we need to do few things before uh js before it gets generated so the first thing is we have to include the user.g.dart file so this file is not currently present this will be generated by a build runner and this is actually this will be generated by json serializable actually so make sure you give the same name as the class name is just you need to add g dot dot so if it is x then it will be x dot g dot dot so this is what you have to do and now you have to install another package in your in your pub spec so this is actually built runner so inside the installation you can you can copy this thing and this time because it is actually dev dependency so you have to add it after sorry okay i think i have to recopy it you have to paste it after the flutter test so just remove this we just need to have okay that's good so you have to install this package so for installing you can click on pubget actually there's a difference in depth dependencies and in dependencies so the dev dependencies will only run at file time so this build runner will actually help us to generate the code for the model class that will contain some method that is not currently present in the in the file so so this will only work the generation of the code only works at compile time at the development time so these are called the dev development dependencies they don't have to work on the production so that's why we have to add it inside the dev dependencies all the packages are all the dependencies that works uh while the app runs in production those dependencies will go in this dependency section now after installing this you can see inside the model it is still giving error because the file is not yet generated so now for generating the file we have to write some commands so this is actually flutter pub run and then you have to write the build underscore runner and after it you have to write build so you have to press enter and this will do some processing it it will definitely take some time and it will generate this user.g.dart file that will contain these two methods and then there should be no error so the build runner uh runs com successfully and astonishing that it doesn't it didn't generate the foul let me see what happened okay so there's one thing that we have missed before starting the class we have to write json serializable so this is what you have to add now let's run the build runner again and this should now generate the file you can see success succeeded after 1.3 second with two outputs and you can see there is no more error again so and here's the file the generated file and it contains it does contains the user from json and user to json that will be responsible for parsing data from json to object.object or from dot object to json now as we have the model class for the user object we have to make the model class for the whole response for the single user so you can see for the single user this is actually the response it it contains the user json and it also contains the support json we are not interested in the support json but the whole json object contains another nested object that is user object so we have to make the json object for the whole response so for making it we have to create another file and let's name it single user response so i think i have made some typo but it doesn't matter we can continue with it now we have to create the same we have to write the same code that we wrote before like we did for the user model and this time we have to we don't need to [Music] actually we don't need to forget the json serializable and for this we first have to import okay we first have to import the json annotation and then we'll be able to use this json serializable and as i said already there is only one key in this response that is data we are ignoring this because we don't need it there's one key that is data and the type of this of the value that it associated with this key is the user so let's see how we can actually register this key so first of all let's make a constructor which is empty and then we have json key and the name of the json key is is actually data if i'm not wrong yeah it's data and it should be same but the type of this data is actually user that we have generated and you can name it anything so i'm giving it json sorry user it's giving some error what's saying too many positional arguments about zero okay if i go inside it there's a property called name and i think this it should be colin instead of equals to okay so there's only one property that is user and we have registered it now we have to paste the boilerplate two lines that we paste in the in the user model so let's go in the user model and let's copy these lines and just paste it and make sure you replace this user to the json to the single user response and they are okay we have to update this user a single user also this and again we need to add in this case again single user make sure the file name is same user and i made a typo in response so it is reponse so make sure you give the same name and then dot g dot dot so this is it again i'm telling you we are ignoring the support property if if you want to add it then you you first have to make the model for this support object and then we can register sorry we can register the support using the same code like we did for the user just you need to replace the key name and then you need to replace the object type from user to support now as we have set up everything we just need to generate this dot g dot dot file so again we need to do the same thing we need to run flutter pub run and the stuff that we did before in case of user it will again generate the file for you you can see it's generated two outputs and you can see there's no more error and if i open reopen this model you can find the single underscore yo user dot underscore response dot z or dart file it's pretty long so this is what you have to do for uh for a single api hitting because uh it actually uh include this whole response and we have made the uh dart object for this response and inside it we have a nested object that is for fuser and we have also made the user object for this json object as well now we are good to uh make our first http request in this video first of all what i'm doing i'm removing this my home page widget that it's actually the default widget i haven't changed it yet so let's remove the this stuff the default stuff and i'm making a state stateful widget in another plus like let's get a package for screen and let's inside this let's create a single let's name it single user single user screen so this will be actually a stateful widget and i'm for state management i'm not doing anything fancy like using provider or something i'm just going with the classical uh status state thing for managing a state so let's name it single user screen so the purpose of this screen uh will will be like uh fetching the user from the server using the dual package making http calls so let's import the material.dart file and let's make a basic structure of it like uh have let's have a scaffold and inside it we have an app bar and let's give a title something like us get single user and then we have body and initially i'm just having a circular progress indicator in the center let's wrap this thing in center and okay so we have to give the reference of this single user screen in the home and let's run the application again so this should definitely show us a screen having a circular progress indicator in the center and an app bar having a title get single user now inside this screen i'm going to make a future basically inside the state class i'm gonna make a future that will be responsible for getting user get user from [Music] from okay we can just have we can just say get user and as we have to perform the asynchronous processes inside this get user so we have to have async keyword of the name of the future now before calling the api we need to have the reference of this http service class so okay so we can so firstly we have to okay we have to make the object of this http service let's name it http okay now we have to get the reference okay we have to actually call the get method that's inside get future actually that's inside this http service so we can call it http dot get request and this is actually a future that will return us the response object so for the end point we will see what's the end point and we have to store it in the response object and since it's a future we have to use here a weight okay that's it so i think we have to import this response that's great now let's see what's actually the end point for a single user so it's actually single user endpoint we have slash api users and then the user id so it i'm just using a static user id because you know it's a dummy api and what we can do or let's uh split the variable declaration so that we can wrap this line inside the try and catch because as you know uh we have uh we have thrown the exception in the get request in case we get some exception you can see this line so this will definitely we need to wrap this uh cat request in the in the try and get so that we can get the exception so in case we get exception we can just print it on the screen okay it's just the exception there's no because we have returned a string form so we just need to print uh this string exactly not the message and another thing we have to do once we get the response we have to check if the response is okay so how we can check it you can compare the status quo with 200 and if that's the case it means there's nothing wrong with your api calling and in case if we get some other status code then we can print the there is some problem status code not 100 something like this and in case we get the uh correct output we get the response what we can do we can create another object that is for user now actually what we can do we have the whole object for get user single user response actually it's actually the object for the whole response and then inside it we have the user object we can get it inside it so how you can convert the response data into this single user object so for doing this first let's say single user response equals to and now we have to give the value so as you know we have made the uh single user response object and inside it we have a single user from json so what we can do inside the single user we have the from json and inside it we can pass the response dot data which is in the map form and then we would have the single user response object and what we can do we can we can wrap this thing as we don't have the provider or some other state management we have to do the classical way to acknowledge the flutter framework that we we have some changes in the state of the single user screen state and the ui needs to be re-rendered so we need to do the update things uh inside the set state and okay let's make another variable for user and then what we can do after we get the response we can also use we can also initialize the user so we can get the risk the user object from the response and inside it we have user so that's great so now we have the get user object the future actually that will get the user from the server and what i'm gonna do i want to make the ux more good more user-friendly so we need to show the loading stuff while the api calling uh is actually being in process so what we can do let's make a bool variable is loading and initially before the api calling it it should be false because it's not actually calling the api but before before we call the get request we need to make it true and once we complete the api calling we need to make it false and in case we get some exception again in this case we also need to do it false and now what we can do we can simply first check if is loading if this loading is true so if it is true then in this case we need to show the loader however if it is not true we need to show some content uh that will show the detail of the user so let's make the column widget because we have to show some let's reformat it and let's wrap this column widget into a container this is just a ui stuff you can make anything the purpose is just to show the data uh just to get the data and show it your utilize it in any way you want so i'm giving it a width double dot infinity and inside the column widget i'm gonna i'm gonna give the main axis alignment center so that all the content should be in vertical center and then in the children uh let's first have a text all of us have a network image so image dot network because you know we get the uh the string image it will be some dummy image that we get in the user and inside we have avatar let's use this and then let's make a little space of vertical space before the next item comes so let's give a container height of 16 pixels and let's make a text visit and inside it just write hello and after it let's uh give the username and also we can have the user last name as well i think this is enough to show the user detail and just to give you the idea that the api calling is working or not now as we have built the ui and we have the future uh now we need to call this future uh when this screen is initialized so what we can do inside the initial state we can we can write we can simply say get user this will call this future and once we have the user object then it will show the this ui we can we can do another thing uh we can check if the user because it's not always the case that if we have is loading false it means we have the user it may be possible that we have finished the is loading but still uh we don't get the user because of any reason so in this case we need to check if user is not null then show this ui else we can show in center child in the center we can say no user object something like this and this is it now okay now let's run the application and let's open the console also so that we can see if we get some error and we can see the progress because you know we have added the interceptors uh in the duo package so whenever we'll make some api call it will show us the progress in the console so let's uh restart the application and it should it should actually get the user once this app is successfully built and you can see we get some error get request was called on null okay because we we haven't made the object i think okay yeah we have to initialize this also so let's initialize it before the get user http equals to http service i think we don't have the default constructor now we have okay okay now we are good to re-run the application okay so let's run the application again make sure you open the console so that we can see the progress and the app is restarted this should okay so you can see it's calling the api and wow strange that it works on the second time okay so you can see that uh here it's showing that we are making the cat request and the url the end point is this and against this request we are also getting the also getting the data and you can see we have rendered the ui accordingly you can see the image and you can see the name of the of the user that we have gotten now let's uh create another view and this time we have actually a fetch single user from the server now let's uh fetch the user list from the server and for this we have another endpoint you can see this is the list user endpoint and this is the actually endpoint that we are going to use it also include the page pagination thing but we are not actually going to handle the page initiation stuff we'll just simply put a static page like one or two or anything and then we will make the response model uh according to this uh json object and then then we'll definitely going to show it on the screen so let's go back to the project and let's create another screen because as i said for each of the api call i will make a different screen so that it will be easy for us to manage and for you to when you get the code from the github you can easily identify what's happening with the which code so this will be list user screen and it would have almost the same thing just list user screen and it will be a stateful widget let's import the material dot dot stuff and then let's have a scaffold and if i can copy the code from this single screen so this is the app bar that we need to copy and then we have the is loading thing also we need to have the http object because we need to call the api and for this we need to have the http let's import this file and inside the init state let's initialize the http service object there we go and then we need to have the future for get list user so what we can do we can we can copy the same future because we need to change some things and we'll do it but first let's have this future and then instead of single user get list user something like this then we need to import the response is loading we just need to change the end point let's change the endpoint and for the list user it's the end point and as i said you can it's it actually accept the dynamic page it actually includes the pagination but uh we are not going to handle the pagination we just need to we just need to get the data from the server and in form of list and then we need to show it on the screen so let's uh paste this and let's uh give it page two or one whatever you want inside the set state where we actually get the response will not get the single user response instead we will get the multiple user response or list user response and for that we need to first create the model clause so let's open the project explorer and let's create another model and this time it will be not single user response but it will be list user response okay so i mistakenly pressed enter so let's again create a new dot file and this time let's name oh my god again press enter let's at least delete this and let's again create a new file list user response and then first of all we need to import json annotation and let's add the json serializable let's get a class list user response and now let's see what sort of data that what sort of fields we are having in this response so let's go back to the screen okay so firstly we have the these four properties that's actually for pagination but still i'm going to have these in my model so that you can have idea how we can handle this all things so let's paste this and let's cut this page make sure you you have the same key key names actually for the data so this is actually the page number so you can make you this is integer you can give any name similarly we have to do for the page so it's actually indicates how many items coming per page with a single page actually so you can give it per page and then we have total number of records so it's actually total and so these are the values too will be stored in this page when it will parse it will get the data from the server and this will be stored in this per page and this 12 will be stored in this total because we have matched this key with this variable so this is how it works and at the last we have total pages so this should be total pages you can give any name just you need to make sure that the key should be same as your response as in your response so now let's uh remove this whole thing now there's uh the most important thing in this response is the list of user and you can see here it's uh the key of this list of users you can see this is the user object here it is another one it's actually the list of user uh and it's wrapped in the square bracket it indicates that it's a list of user and the key for this whole list of user is data so let's see how we can manage it we have to do the same thing for each of the field we need to have a json key and as you can see it's data but the data type should be list of user and let's name it users so this is how it is it's pretty simple you know and now we need to have the same uh code to paste the boilerplate stuff just you need to change the single user response into list user response and then at the last we need to have we need to include the list underscore user underscore response dot g dot dot val even though it's not present but it will be generated by uh the json okay it's actually generated by the json serializable or the build runner so let's uh run the command and let's wait for it to finish and to generate the file for us okay so it's giving some error if we go back and you can see it's it's saying that this list user response has no default constructor and as i said we must have the default constructor in the json serializable object now let's run this command again this should now create the generated file successfully okay now you can see that it generates two files and there's no more error and let's go back to the let's go back to the list user screen so now when we get the response we have to parse it into list user response so let's uh first create the object for the list user response let's give it a name let's use a response also we need to have the list of users that will get inside the list user response so let's name it users we need to do the same thing exactly like we did in the in the previous screen so we first need to have list user response equals to list user response and inside it we have from json and here we can just pass the response dot data which is in the json map form and after this we can initialize the users which is the list of user that we can get from the list user response you can see inside it we have the list of users here it is and then we can we can render the ui accordingly so first of all we can copy the code from the previous screen because the logic is same if it's loading is true then in this case we need to we need to show the progress indicator instead of user we have users now and then we need to build the ui accordingly so just we are going to have the list of view dot builder because as you know we need we will get the list of users so we need to have a list in which we can show the users that we got from the response so the item builder is uh first let's define let's first define the item count and the item count should be users dot length okay and then the item count so the item builder should be first we have to pass the context and then we have index and then inside it we can just use the list style that is the default way of making items inside the list and then in the title we can we can just give the user first let's get the current user by calling users index and let's make it a variable so that we don't have to re-reference it every time and you can just inside the title you can just print the first name and in the leading you can use image.network and you can utilize the string image from the from the user object and in the subtitle print anything let's see what we have inside the user that can be printed so we have the email address let's print the email address and make sure we have to use semicolon at the last no okay just uh basically we have uh actually we have to we have use here a condition if user is not null then show this ui and then we have to define the else case in this case we can just uh we can go back and as we define here you can just copy this line and you can paste it okay let's reformat it and inside the editor state we can call this method which is actually a future get less users and make sure you change the single user screen to list user screen okay let's open the console and let's run the application again so this should first show us a loading okay so you can see it's showing the loading and it's actually called the api and we get the response and this should reflect us on the screen wow so you can see it's actually giving us the expected result on the screen so this is how you can you can make the http requests using deal package and you can see the progress before you see the result on the screen you can see on console and that's really a great thing to have because uh sometimes we we send the wrong data of in the endpoint parameter in the endpoint query parameter and then we get the wrong response and if you cannot see what you are sending actually then it will be really hard for you to debug and it will take your time really just to let you know that what's going wrong with the api calling but using deo package you can easily add the interceptors and you can get the response on console you can get the progress and we have also used the json serializable that's really great package you don't need to write a lot of tons of code just to convert the json into real rail.object or to rail.object to json so you just you just need to add the json serializable and you just have to write some few lines and this will do the work for you so this is it from the video this may things may look a small thing but you know in every application in every application you have to perform you have to do the network interaction you have to call the api you have to get the response and you have to parse it according to the according to the business logic and this is how you show the data on the screen so this is really something that can uh that can give you the ability to make a big application and to make a practical application so this is it from this video if you like the video please give a big thumbs up if you haven't subscribed the channel please subscribe the channel and share the videos with those who want to learn flutter with easy approach so thank you for watching

Channel: Easy Approach

Views: 53,414

Keywords: easy approach, maaz aftab, json parsing, json, api, api calling, api in flutter, flutter, flutter video, tutorial, developement, flutter tutorial, api calling in flutter, json parsing in flutter, dio, dio in flutter, json serializable, json serialization in flutter, json serializable flutter, json serialization, api calling in fl, how to call api in flutter, how, to, json parsing and api calling, api calling and json parsin

Id: lvRsi3PjckI

Length: 64min 33sec (3873 seconds)

Published: Fri Feb 19 2021