API Call using Provider | Flutter State Management

there in this video i am going to build the application similar to this one where we will have a api call using provider so here i am going to start from this point where we have very minimal code you can see just one page so we are going to use the package called provider which you can see here so you can go through the docs if you wanted but you don't need to go i will explain everything and they will use this api you can see here we get list of to-do so this is the api on which we are going to make a call so you see what package we are going to use and what api so first of all what we will do we will create a folder so the folder is going to be model and this model will consist a to-do model which will have all those four properties which we just saw in api so there is id user id moving forward we have title so title is string string and after that there is completed which is bull that's it so now we will make a constructor to accept these values so id title and completed and one more thing which is user id so let's make all as required awesome so now we have a model to store those data okay moving forward now we will make another folder for services so this folder will contain a folder called file basically to do service dot dot so what this will do this will do the api call we will also make one file for provider which is to do providers so dot dot awesome so now we have both of those files let's go to browser and let's search for the package so we need http package so currently we have this provider so let's write http so we will use this package to make api call so we will go to pubspec.eml file and let's paste it and let's save it so now it will do like flutter pubget moving forward we will get the provider package also and let's paste it so now we have two packages which we will use in this app so let's stop there and run it again okay so it's good to like restart the app whenever you add some dependency or package okay moving forward now we will start with to-do service so i will create a class called to-do service and basically this class will contain the api call thing so api call thing will be handled by this class and there will be a specific method for that which is get all so this is the url so let's copy it so we will make a variable and we'll store that url after that we need to pass this into uri so we can easily do uri.parts after that we will make api call to make api call let's import it and let's set alias as http and we are making a get request and we are getting the response after that we will confirm the response is correct or not so in order to confirm it we can confirm by status code so if the status code is 200 which means everything is good so if everything is good let's parse it to the json so json decode response dot body so when this is the body part basically and when we decode it it will give us a either list or map so in this case you see it is returning list of items so i am like you see list so i am manually saying as list so we know like the type of json is list so now we will map it json.map and here we will say to do service basically to do model and in the model we will map it so taking each map and we are converting them into a list of to-do so you see list of to-do's earlier it was just a list so now if the status is not good it will go to the else and we will return empty array but if you written empty array you will not get the idea there was some error so what we can do like more better will be if we throw some errors so we can say something went wrong so what will happen either it will success like either it will work properly or there will be some errors so we need to write try catch wherever we will call this the get all wherever you call this get all method you need to write try cash because it can throw error okay moving forward now we will come to the uh to do provider and create a class to do provider which will extend change notifier okay let's do one more thing so let's not do the throw part here because i already told you you need to add trigger so i want that you do that by yourself instead i show you how this works so i will show you something but it will be more simpler i want that you handle the error okay so if there will be any error it will written empty array i commented the uh error part you can do it by yourself also just by doing uh wrapping that uh method called try catch okay so now what i will do i will make a variable which will to do which is basically private and so that it can be only seen and modified in this class only so make the visibility of this variable outside of the class i am making a getter so how this variable value is going to get changed so for that we will make a method okay and this method is basically going to call the api and when this method will call the api it will update the value of to do okay so this is the method name which is get all to lose and which is asynchronous because when you make the api call it takes some time okay moving forward now we will take to do service and we create an instance of that because this is the place where we have defined the get all so now we will get the response here when we will call it awesome so everything looks good and let's store the response introduced i am getting an error because i forget to write await awesome so now you see only these two line are responsible for making api call but sometimes there will be loading state so for that i make another variable is loading and it will update the variable is loading and after that it will call notify listener basically it will tell all the listener that something has been updated please update the ui and once we got the response we are making the is loading as false and setting the response okay moving forward now i will come to main dot dot and here i will add change notifier provider and in the create we just have to tell the which provider so we will say to do provider that's it and moving forward now i have to tell child which is material app awesome so let's restart the that everything looks good till this point moving forward now here what we will do we will consume that how we will consume that like api response so for that we will use something called consumer but first of all how that method will be called so for that i will convert this into stateful and in the stateful we have init state so when this widget will be rendered init state will be called so i will say to do provider not to do provider provider of basically and we will say get all and probably this might give me some error let's see also let's make the consumer and for the consumer if you can see it takes three things uh context of value and the child okay so moving forward we will return just a text here okay very simple text to make sure the consumer is working so it takes a generic so the generic is going to be to do provider that's it so now the value will be to do provided you see the value of this consumer is studio provider now i got the error which was totally expected because the context is not valid their home state like that is being called before whom this unit state is getting completed okay so we need to call this after home init state has been completed so for that what we can do there is a callback for that which is add post frame callback so now the context is your level we can write the program like this but still we will get a error and this error is because we are using this outside of the widget tree so whenever we are using this outside of the widget tree we need to set listen as fall false so you see there is context and yeah there it is in line number 70 after context we need to set listen as false so what is like vegetarian so if you write the provider code inside the build it's a visitor you don't need to write less and false but if you write outside you need to write this and false if you call outside of the build method moving forward it will provide us list of to-do's and we will build a list view builder and we will provide the count so the value dot to lose dot length so we got the count and we can store this in today's variable and we can reuse it because to-do's will be used at multiple places awesome so now we got single to do using the index number awesome so you can see now we got the title and if you want to show the subtitle i think there is nothing to be shown in subtitle so let's make the leading okay so you see there is leading but that is not looking good we can wrap in circular after so this one is looking good now awesome there are more variable if you wanted to utilize them we can definitely like is completed so i want to have the color of the text based on the if the task is completed or not if the task is completed in that case let's set the color as black and in other case let's set it to the gray awesome uh yeah i think we said the color as the inverse we should if the task is completed uh it should be gray because it doesn't require our attention and in other case it requires attention so it will be black awesome so i hope that you got the idea how it's happening moving forward currently we don't have like the loading indicator so if it is loading so in the builder the first line is if it is loading so circular progress bar indicator and let's put this in center awesome so now we have this loading if it's not loading it will show the list view builder so you see how it works so thank you

Channel: Nitish Kumar Singh

Views: 19,779

Keywords: Nitish, Kumar, Singh, flutter, flutter state management, flutter multi provider

Id: Zg1oIUaOS04

Length: 11min 26sec (686 seconds)

Published: Wed Aug 31 2022