Flutter Tutorial - Flutter Riverpod Fetch Api | Fetch Api State Mangement

hi welcome to flood Junction uh today we are going to learn how to fetch API using reward bot in Florida and riverbody is the Estate Management tool just like River provider and get X and also block right and this is how our final applications I'll be looking and let's go back and then come to our app again and first we shall be seeing the circular progress indicator when our data is being loaded and then when the data is loaded we are going to show them on this list in our application okay now let's get back to our topic and for that we are going to use the two packages that you need to have to install into the uh it into the package.aml file in the dependencies here and dependencies you need to add these packages here like it's follows okay after adding now let's get back to our meta dot file and first we need to create the mechanism to get the data from the API and for that let's create the new folder here and name it services and then Define new file Services API understand services dot dot and inside here we are going to create a class named let's say API services and then create the method here and to have the data to get the data from the server we need to have an endpoint and this is going to be our endpoint here you can see this is our endpoint and now we are going to get the quality get method from the HTTP to get the uh data from this endpoint and for that okay as it is await we need to make its racing and then we need to import the response from hdb to dot right here what is happening is we are calling the get method from this end point and then we are saving it into our response here right and before that let's get to get to our uh this unit point and see our how our data is being uh looking and this is how our API Json would be looking you can see here we have page for page total total pages and we are not going to use this we are only going to use this data uh and this attributes of the data ID email first name last name and Avatar okay let's get back to our program we check the if our response is success or not and for that we check if our status code is 200 or not that means this status code 200 means our API our API is okay and then whenever we don't get the data from the uh API or we get something some either we are going to throw the access plan from here here and now here we are going to get the data from our uh server and then decode it here we get the data from the server and then if our response is okay then we are yeah decoding our response body and then getting the get attack from here as you can see our uh response this is our response and we are only going to use this data uh and these attributes into our application so we are using the data into our application yeah all right now we need to uh get the data in the form of object so we need to create the model okay let's create the name folder and then the new file name let's say user model dot dot and inside here we are going to create our user model class and this is our user model class and we are only taking ID email first name last name and avatar from our API and then here this is our Constructor and then we are going to get the data in the form of Json so we are getting the data in the formation from here in this Constructor and then we are going to return and this method this Constructor returns our data in the form of object and then we can access them using the dot operator into our UI right now let's get back to our API that Services file okay here now then we convert we get the each items from this result and then convert them into the object and then we return the list of object from here as follows right let's import the user model okay what actually here it is happening is we get the result and then we are getting each item from this result and then these items are converted to the object and then we are returning the list from here and this is how it is working inside the application okay and now here we need to return the future the list of user model okay yes the method is async we do have the future return from our this method and this list of user model that means we are going to return the list from here from here that so we are using the list of user model now over here we need to return our provider from reverbot provider so here we do provider and it takes the type and for our case it will be API services and then okay let's import the provider from the river part and we need to import really work one okay and then and then it takes the type and for our type it is the API services and then it takes the function and it takes the reference object and then here the API services and then we need to assign into the variable and that would be our user provider and the user should be gone now okay okay now let's discuss what this provider is in Riverport this provider is the entry point of the shared data and the reason for using reward pod is to maintain our state which means that there will be data in our app and we use this data in different places of our app so that all the data are shared whatever we do all the pages or UI will share this same data now riverpod would help to create the shared state which means the river part the data and that data could be shared and if there is any change in the data the developer would like to know that no the UI that there is change in the data and the reworker says Hey There is change in the data you need to update so for this reason it takes the tag and in our case this is our class API services and then it takes the object and the this array and then we return the our API services from here and here this ref is more like the uh context so which is the uh which is default in the flutter framework and we use this ref because we are using reverbot to maintain our state and then it Returns the function and it doesn't have to return the function here and let's say for example we can also return the string from yeah let's say final slide Z and then provider uh this API services okay not APA service here we are going to return the string and then the rep and then the string let's say hi product then we can close it okay and this syntax is somehow same you can see here we have the provider and the type here it is string and then we have the API services and the same reference object object and then here we are we are returning the function from here but here we are returning the string so the idea is if you create the class and for that class if you want to maintain the state you need to inject this class inside the provider so this is more like you are injecting the class in the provider now move over here and then create the new folder name let's say provider and then a new file name let's say data provider Dot car and now inside this class we have this object of future provider and this user provider is coming from the reverbot you can see here so basically this filter provider is useful if you want to create an asynchronous request and for example over here we are doing the network call you can see here and which is the asynchronous over here we are doing the network call here we are doing the network call and the data may not be available immediately even though our provider will hold the data but if there is change in the data we would still not be able to know about the new change as it is asynchronous request it doesn't happen automatically because here is the server involvement so it is asynchronous required let's remove this first and then go back to our data provider yeah and in general if you have asynchronous request and for flutter River board you have to do that request in fact ensure this user provider and now over here you can see we are referring to this user provider which was created earlier into our API dot Services This Global variable but because and this is the asynchronous request so we need to wrap into the user provider we don't know when our data would be gradient so we need to wrap it with the future provider this future provider ensures us when the data is ready to view and from this method we are from this reference we are calling this method get users so here uh this provider also means like the instance of the class this class API services but the only difference is that you are wrapping it around the provider so of the river part which means this shared state so this data is in shared state which means it could be shared across all the pages of the application and at the same time using the user provider we could access all the methods or the properties so what we are doing here we are assessing using this user provider we are accessing this get user method and the another awesome benefit of this future provider is that it is the asynchronous request and you can use this methods you can see here either and data and loading state so inside here when something goes wrong we are going to show the error error messages are error State and whenever our data is loading we have loading State we are showing the so we can show the circular progress indicator and when the data is ready to use we can return our widget so this is the beautiful benefit of the user provider and also over here uh because we are listening to the data we are observing if there is any changes in this user provider which is coming from the Network request or API request so that's why we are using this train.watch it means it says hey I am watching you this user provider and says whatever happens I need to get the data from the network so after this we are ready to throw our data into our UI now let's get back to our main.file and okay uh before that let's create the new folder let's send any screens in here let's create the new file name Dot and then the stateless widget let's say home page and we are going to use the reverbot extract management so we don't need the stateful widget so we need to Now find a method so that we could access this method okay data Provider from here this method into our homepage dot dot so for that we need to get the consumer widget from our flutter River part let's close this and let's import the material also first right let's close this and the error should be gone now and it is showing the error yeah because it is going to take the red hair and this is this consumer widget is more like the stateful widget and as you click here you can see it is extending the consumer stateful widget and this consumer stateful widget eventually is extending the statement widget so which means this consumer widget is also a stateful widget and this ref here is the river part context using this we can refresh our data provider so here we are going to access this provider here this user data provider to access the data from this from here so for that we need to coming back here and into Ray dot watch and open and user data provider which is coming from our data provider class you can see how this user data provider and then we assign it into a variable let's say name user data and error should be gone now and over here I have created this scaffold and then I have the upper here with the title reverbot example and now here after app bar let's create the body and inside this body we are going to call this user data when it is very special which contains of when you can see here a provides Austin methods for data error and the loading okay let's close this you can see clearly you can see data error and the loading state and as the name States here the data should show the data and error uh should show the error message and when loading it so the loading state or loading uh progress indicator and for loading we are going to return a simple hash in Center we are going to return our circular progress integral that means our loading indicator and an error we are going to show our error message yeah it takes error and this stack Trace we are going to return our error message here this means if we are getting the either we are going to return the error into the text we are going to show our error into the text and you can see these all three properties are coming from our this provider and if you are using the river provider you are getting this access to this methods or parameters now coming back to data you can see here it takes it is it takes the function and that return this the list of data you can see here it takes the form function with the list so how to deal with it so for that so we are going to create a function method and then return for now let's say only container and the error should be gone now and we know that and this data user data holds our data in the form of list so inside here we are going to create the new list that would be list of wizard model and let's say name is a list and then it gets the data the data Dot map the and then it returns get the object and we return the list all right so what actually is happening here we are taking this user data from here and then we are mapping it and getting its item from here and returning its item and then we are converting this iteration after completing the iteration we are returning this layer East right now how to use this user list into our application so this user list holds the information uh from the data all the data that we are getting from the API now inside here I am going to have my list view dot build I have my widget as you can see here this Builder and our item count would be the length of the items that it holds the user user list holds and then we have the other properties in the list to that Builder item Builder which takes the context of a now it is empty and then the index and with this index we can access the data from our user list list and then the padding it provides the padding and we are using symmetric from vertical we are using four and then with the original We are giving 8 and then inside the padding we have the card and then insert card we have the list type here we are showing our joining our user list and the first name and the last name you can see here we are taking the user list and then the index of the user list and the first name that means we are getting the first name of index of the user list and then similarly to the last name also and then on subtitle we have the email as you can see you can see here it is uh the name is here and the other is the email and the leading we have the circle Avatar and the we have the image the user list index.ever you can see here this is the leading Circle Avatar and this is how our application will be is work nowadays it's time to run our code and now we have our application installing okay we are getting the home page demo home page because we have one edit our homepage to our main dot dot file we need to go to our main.f file and let's clean this first and then these also we didn't need this and let's add them also and here we are going to call our home page and we are not any passing anything from in this home page also that we are not only getting this data from our home page because we need to wrap our my app with the provider scope we are using the flutter River board we need to wrap our Amaya with our provider scope and so for that we are going to wrap it with a widget okay widget and then name it provider scope and this provider scope is coming from the flutter River part and then let's remove this const from here and then okay now we are ready to go now let's restart our application again you can see we are showing our sort of practice indicator and then we have our data loaded again let's restart it we can see the software progress indicator and it was so first that we cannot see so let's run it again and then we see our circular progress indicator loading indicator you can see here it is loading and then our data is is being sown so what basically it is happening here is we whenever we come to our main.file we wrap it with our provider scope without further a river board and then into our homepage in the build method you can see so in our homepage we extend our consumer widget and then with the we pass the river part context and then we watch our user data provider and then we get the data into our variable user data and whenever our application goes to our user data provider it costs the future provider and rep and then it calls again the it access the user Provider from our API services this API services and from this API Services we are calling this API searches function and here we are getting the data from this get users as you can see here this get user methods is called and after calling this get users we are getting the response and then we are returning the list yeah after getting the list from our response body we are accessing the data from our API for this application uh it may be different uh regarding your API and after that we are returning the list of Future model future uh we are returning the list a list of user model and in the in the future because it is asynchronous and then after getting the data and it is watching our user data provider and after getting the data from the gate users and we are calling this user data provider it to it we can access the data from home page here and after getting the data we are finally assigning the data to our user data and then in our body we are accessing the data this user data dot when and this is when is provided by our flutter River Port and here we can see the three parameters data error and loading this loading is used to show this circular progress indicator when our data is loading this loading this is the loading State and whenever we are getting the error we are returning the error into the text form and when our data is ready to use we are returning the the list we are accessing this user data and then mapping and then we are returning the list of user list and this user list is used to ah used in our widgets and you can see here user list index first name email and then the avatar so to check the error we can go to our API services and then let's remove the endpoint okay let's delete this and then restart it restart our application again you can see here we are getting the error here format Etc unexpected character eight hour dock type HTML this means we are getting the either in the text form and then we again remove this and restart it again and it should be fine now and it is working fine right and in this tutorial you learn how to use reward fetch API from the internet and if you have any queries regarding this tutorial you can ping me on comment section or you can also mail it first Junction gmail.com and if you like this video don't forget to like comment and share it with your friends and also if you haven't subscribed this channel don't forget don't forget to subscribe and press the Bell icon so that you can get notified and upcoming videos thank you happy coding

Channel: Flutter Junction

Views: 4,159

Keywords: flutter, flutter tutorial, demo projects, learn flutter, dart, flutter video, flutter projects, projects in flutter, flutter basics, flutter fo beginners, learnflutter, basic in flutter, programming, learn programming, programming for beginners, flutter course, dart course, flutter full course, flutter tutorial for beginners, app developement

Id: EG_qZfkWtpU

Length: 27min 9sec (1629 seconds)

Published: Sun Jan 22 2023