API call using Cubit | Flutter Bloc | Flutter State Management

hello there in this video I am going to show you how you can make API call using qubit so I have very simple code here and I will start from here first of all I will create some files and folder to follow the qubit structure so I will create a feature folder inside that there will be a qubit and views after that I will create a repository where there will be all the API calls so to do repository because we are doing everything related to do the qubit will be to do qubit and to do state moving further the views will be to do page dot dot okay that's it so we have enough files now moving further I will show you what package and Library we are going to use so basically we will use the package called flutter block for qubit so let's copy it and go to pubspec.gml and let's paste it the next one is HTTP let's copy it and let's paste it the next one is the API which API we are going to use it let's save it it will run the flutter object and let's restart the app okay meanwhile what I will do I will take the to-do page code and put it into to-do page okay so I put the page or screen in the dedicated file so things look good now moving further first of all I will create the to-do repository so here the API call will be happen so let's create the method for that so it is going to be called like get all it will be a synchronous method and here we will make the API call so first of all we will need the URL so let's create a variable and let's store the URL now we need to convert the URL into URI so let's convert it later we need to make the API call using http so I think we have not imported the HTTP so let's import it first and now we can do http.get and the URI and let's do a weight and it is going to return some response if the response status code is 200 which means everything is okay so everything is okay so we will take the body of the response and decode it to the Json so you can see this is the basically body of the response so I take it and as I know the response body is list so after decoding I will get list awesome I missed one folder which is model so I need to create a model for to do to do dot dot so this model will have all those four properties which is available in the response which is string title and string int ID and int user ID and the last one is bull completed so now we have all these four property moving further we will create a Constructor which will take all these four values and this should be required that's it so now our model is ready with minimal code yeah okay moving further now this is a list of type Dynamic but we wanted to convert into the list of to do because this is what we are getting from the backend response or the API response so for that I will do Json dot map and I will make or to do objects from each map that's it once I map it I will get the response I will store it into result and I will apply to list which will convert iterable to the list so now I got the response and I am returning it but if the status code is not 200 I will throw a error called something went wrong and let's attach something else with the uh error which is status code what status code is there so response dot status code okay so awesome now our repository is ready where we can make the API call if everything is okay otherwise it will throw the error moving further now I will go to to do state I will create abstract class called to do state now I will create few more class which will extend to do state so one will be for init to do state like when the to-do state is initialized okay so let's extend it the other will be for the loading when the to-do state is loading the other one will for the error and the last one will be for response currently all the class is empty there is no any data member but when we will need it we will add something inside this moving further let's create the to-do qubit so class to do qubit which will extend the qubit awesome and it is going to hold the to-do state which we created in other file just now now it is complaining something like we have not in the slide the parent class so let's initialize it so let's refactor the code because that was the pre previous version code so when it will be in slash it will be initialized with the init to do state okay moving further we will call a method which we'll call the repository API call so first of all whenever someone will call this fetch to do we will start the we will update the state to loading to do state because now we are going to make the API call also in order to make the API call we need the access to the repository so for that either we can create an instance of repository or we can inject it from The Constructor so we will inject it okay so repository dot get all this will um give us the response which will be list of to do so now we will emit response to do state because now we got the response and the response is list of to do which means this state should hold some value and what will be that well that value is going to be response of to Do's because this state is mainly responsible for holding the response of to-do State and we will have a Constructor which will take that value that's it so now here we have to pass the response okay that's it so loading State and response State and if you remember if everything goes well then only it will work if there is any exception it will not work so we need to add try and catch and in the catch we will get the error so when we get the error we need to emit another state which is error to do state okay and here we will pass e dot to string basically the message which is for the error so now in the error to do state we will create a string called message this will hold the message so let's create a Constructor also that's it Okay so one parenthesis was missing awesome so now loading State response and error State okay so we have three state in Fetch to do so awesome moving forward now I am going to use block provider in order to make this qubit available in our widget tree so block provider and in the create we have to create the qubit instance to do qubit awesome and here we have to pass the repository I will pass in a moment so let's pass the child first awesome so if you remember in the to do qubit we have to initialize to do repositories so here I will pass the to do repository in stance or we will inject it inject it basically okay that's it so things look good here and yeah moving forward now we need to use this qubit in our UI so I will start with uh body so in the body I will use the qubit and which is going to be block consumer okay so it will have the Builder which will have the context and state and let's just show the ah state so it is complaining something so let's pass the uh qubit and the state of the qubit so we passed it still it is containing the listener is required while The Listener is required okay I think I used something wrong I should use uh block Builder instead of block uh consumer because it does not have the listener as required awesome it handle the new state so whenever the state will change it will get notified and it will update the UI instance of you need to do state so the value of state is object of init to do state so if state is in it to do state in that case we want to just have a circular progress bar indicator so using like state is you can check if that variable is object of some specific class or not now I will make it stateful because usually we have some button for performing the action but here we don't have any button for performing the action so we want that whenever this page gets rendered in the init state it should call the uh fetch to do okay so we will use add post framework callback post frame callback because this makes the context complete which means the init state has been done completely so using this I will get the qubit and after that I will call fetch to do if I refresh it you see instance of response so for the instance of response what we will do or before that let's do one more thing there is loading State also for loading and in the state you see there is loading bar moving to the next one if the state is response to do state response to do the state if it is response to do instead in that case we want to have list view Builder and there we will have list tile awesome list view builder takes a few things so first of all we will take the to-do's from the state you see we get the suggestion for uh to do but if I do the same thing state DOT I don't get to do suggestion because here I check that state is response to do state that's why the suggestion was working correctly so once we got the to-do's the next one is to get uh each to do one by one and render it so to do dot index and we got the to do and we are having this to do title also this one is also working moving further let's have the error State now so if we update the URL to something else okay to do three if we refresh we get the instance of error so we got the error also so here we can just check if the state is error to do state in that case we can show the error however we want so we can just say return text and it will have state DOT message that's it so now we can so this one also you see something went wrong 404 because that's not available so I hope you got the this one idea also um how this error is stateful so if I fix it it will work as expected and if I make few more mistakes something like if I have some incomplete URL you say failed to look up this one so the catch will I have like catch all other error also any kind of error will be catch by that so I think that's it I hope you got most of the idea how things are happening if you have any question or down please let me know thank you

Channel: Nitish Kumar Singh

Views: 5,438

Keywords: Nitish, Kumar, Singh, cubit, flutter, flutter state mangement, cubit api call

Id: Pf7R4sBHeNc

Length: 12min 49sec (769 seconds)

Published: Fri Sep 02 2022