Flutter Bloc - Simple Cubits and Bloc Tutorial #7 | HTTP request | decoding JSON bundle.

[Music] hey everyone welcome back again to another tutorial and in this session we will discuss about how to make use of http get request along with fighter block pattern okay and this tutorial is going to be very simple and what we have here is a simple elevator button right over the center and upon clicking this load data button it is going to make an sdb get request and what the data is obtained as a result it is going to display that response in the list view builder okay and apparently in the back button which is present at the very bottom it is going to take us back to the install page itself okay this is a very basic example and hope you got a good overview of what we are about to discuss in the series with this idea let's move on to the coding part add two packages in your expected vmr file and the packages are http as well as flutter block and always check for the latest version as for the video recording day these are the latest version for these packages and if you're going to apply the similar kind of effect then you can also add that package as well in your prospect okay and after adding these packages um first let me just start explaining with the block starting with the states we will be totally having three states for this app one is the initial state which is the incident layout what you see right over here and followed by the initial state we have the loading state that is the similar kind of animations and followed by the loading state we have the load state finally and this load state is going to display the entire set of json bundle in the list view therefore we are going to create a variable for that since it is a final we are going to create a constructor for the same okay so these are the three states which we will be having for this app and moving over to the events here in the events file will be totally having two events one is the low data event which we get at the initial layout and the back button even which we'll be getting in the loader layout okay totally two events right over here and we can create the classes for the same events okay and this is all about the events let's move on to the block we'll be mapping events to states and we'll be checking for the initial event which is the load data if it is will be emitting the loading state that in turn will be rendering the similar effect and followed by which will be lasting for around two seconds and after that we will be making and get request function call so fetch data function is something which is written on separately say the repository folder and i will come back to that later on and the response is just stored in the variable which is data and after the successful get request is done we'll be emitting the loaded state and passing the data as the parameter okay and this is all about for the event which is low data or else if the event is going to be navigate back button then at that time will be rendering or will be emitting the in series state itself okay well this is all about the mapping of ebert's resets inside the block file and with this we complete the setting above block for this app let's move on to the apis and for the apis you can browse over here and say the data folder and inside the data folder we have the separate folder for ap base url and inside the model we have created a basic model for the json bundle which we'll be getting as a reset of the get request okay and we having name address and company name okay and make use of jsonp code and json encode methods you can make use of the extension upload vs code to generate these kind of methods okay and after doing that and we go into the repository folder here is where we'll be making the history begin request okay and you can make use of uh get request and pass in the base here and append the endpoints if the status 200 we will be decoding the json bundle and converting is a list with the help of the tool list of method or else if the request status code is going unless the response status is going to be anything other than 200 then at that time be throwing an exception all right this is all about uh how to make an hdb get request okay now now let's move on to the ui part and let's see how to wire them up all together to get this app completely done we have the entry set of ui which is uh predefined for the insert layout loading as well as loaded for the install we have a simple elevator button which is low data and upon clicking will be triggering the load data of method which is present inside the block and for the loading will be making so the simmer widget okay and inside the loader is where we'll be making use of the listview builder to display the entire set of jsons okay and make use of the dot operator to access the particular kind of value and we can make use of these kinds of widgets and save the block and render them accordingly okay and here let's create a body and the body is going to have the block consumer that is in turn going to take the states as well as the block and we have the listeners and the builders and for the lizards we are going to have nothing anything you're not going to have anything inside the listeners and see the builder alone will be checking for the states if the state is loaded then at that time we will be entering the build loader layout meth we'll be calling them lord layout method by passing the data which we get as a result of the api call or else if the day of the state is going to be loading then at that time will be rendering the loading layout or else if it is none of the state is going to be there then at that time will be simply rendering that in c layout state okay this is all about how to map how to render the particular kind of widget upon the particular states with this we complete the wiring up of a block pattern as well as the http get request api calls okay hope you guys enjoy this video if you do so consider subscribing and i will see you in the next one bye [Music] you

Channel: vijaycreations

Views: 1,604

Keywords: flutter, mobile, dart, UI, mobileapp, flutterapp, flutterapps, flutter web app, appdev, flutter web, flutter bloc, bloc, bloc pattern flutter, state management using flutter bloc, flutter bloc cubits, cubits, bloc and cubits in flutter, flutter app state management, bloc and cubits, flutter bloc pattern, cubits in flutter, cubits and flutter bloc, state management in flutter, flutter state managment using flutter bloc and cubits, cubits and counter app, counter app, cubits part1, app, apps

Id: iCUwEr9xZpU

Length: 6min 33sec (393 seconds)

Published: Sun Apr 10 2022