Flutter Tutorial for Beginners #26 - Flutter Packages (http)

all right and gang so occasionally when we're creating flutter apps we're going to need to add in some complex functionality now that could be to implement some form of animation or maybe to work with files and folders on the device or something else that is going to require us to write a fair amount of code and logic now I suppose we could do all of this ourselves from scratch or we could make use of flutter packages now lots of packages are basically just bundles of code and logic that other developers have already kindly written and which can normally be used to implement some kind of specialized functionality inside our own apps like a sliding menu or a date picker or some kind of file upload or something like that now we can use as many different packages as we want in our apps to do different things for us the one that we're going to be using inside this video is going to be the HTTP package which is going to allow us to easily handle HTTP requests to third-party ap is now eventually we're going to be using a third party API to get time information for different world locations but we could use this package to make any kind of network requests to different api's or endpoints so what I'm gonna do is first of all come to this address pub dev forward-slash flutter and then I'm going to search for a package called HTTP and press Enter and we can see the result right here now there's going to be quite a few different results and you see this little circle over here this is the score of this particular package now the higher the number generally the better it's going to be not always the case but it's a good indicator there's different measurements that determine this score things like popularity how often books are fixed things like that but anyway this is the one that we want HTTP and you've got a little readme here which kind of shows you how to do some of the basic things and we also have this score tap which I talked about these are the different areas it scores the package on so we get 100 which is good and you can see over here installing and this is how to install the actual package so it says here add this to your package pub spec Yamal file so all we need to do is grab that line of code right here and then go to our editor and add it in okay then so now we need to go to our pub spec file down here and we need to scroll down to where it says dependencies now at the minute we just have this but we need to go down to the next line and tab in one and we're just paste in the HTTP want like so so this right here is the version number this caret basically means that if there's a newer version when we get this package just install that newer version you a minor version anyway so let's save this and what I'm going to do is cross this off and then say get dependencies over here so that's going to go out and get that package for us and install it so we can use it inside our project okay so it's finished now so we can close this down so what I'm actually going to do is get all of this stuff here where we have this get data function and this in its state function and I'm going to cut it from the choose location state object because really we're going to load the data initially from the loading screen so I'm going to save this now and then I'm going to go to the loading widget over here and I'm going to paste it inside this state object instead so now we have this init state function inside here which is going to run when the widget first starts and we're giving it rid of this print statement we don't need that but we still have this get data function and it's up here still asynchronous but now let's get rid of this stuff inside it and actually use the HTTP package to make a network request to get some data now for now we're not going to get the actual time data we're going to use an API which is called Jason placeholder and it's just going to get us back some fake Jason's some dummy data if you like and basically we're going to use an endpoint which looks something like this and we're going to get some data back which is a to do we'll do that in a minute but first of all we need to import the HTTP package into this file so we can use it so we say import and then we want package and then we want the HTTP package so just do that one right there okay sorted now we can use this now the way we use this is by saying get and then in parentheses whatever the endpoint is that we want to get data from now the endpoint we just saw on this website by the way I'll leave this link down below so you can use as well this is the endpoint to get some data and this is going to return to us some JSON data so let me grab that and paste it in here now Jason works really well with JavaScript but we can also work with it in doubt and other programming languages as well it stands for JavaScript object notation so our objects that would get back from this look very much like JavaScript objects so what we're gonna do is now store this in some kind of variable now to do that we have to say await because we want this to finish before we store the value and then we're going to store this inside a response object like so so the response type here is actually given to us by the HTTP module and it's going to contain information about this response that we get from this request now one bit of information about the response is going to be the body of the response that's the actual data that we get back so what I'm gonna do is print it down here by saying response body so let's have a look at this in action what I'm gonna do is actually go over to the main darts and I'm going to change this initial route to be just a forward slash and that's going to load up the loading widget which is what we want to happen because this is the widget with all of this code inside it so let me save that now and then we're gonna go down here and we're gonna hot restart and minimize that so hopefully when it loads it gets the loading screen now if we keep this open you're gonna see we get this data back this is the stuff that is now printing down here it's the response body now this looks very much like a map right but it's actually not a map if we try to get one of these individual properties for example the user ID this is not going to work watch this user ID if we save this and we could already see that we don't have this property on this body but if we save it then it's not going to work and we get an error and that's because this is no actually a map or an object of any kind it's a string and that string looks like an object but it's actually not an object it's a string representation of that object and that's what basically Jason is so this is a JSON string and we need to convert it into some kind of format that we can use so what we can do is actually use a method or a function called JSON decode but to do that we have to import something so I'm going to say import and then I'm going to say convert and it's this one right here dartz convert and this allows us to convert this JSON string that we get back from this request into data that we can work with so we can do stuff like this so what I'm going to do is delete that right there and we're going to delete this print statement as well and instead what we're going to do is decode this JSON string by saying Jason decode like so and then pass the response body in now we can only use this function right here because we imported this okay so if we don't import this we can't use this so this is actually now going to return towards some data that we can use and it's going to be a map so I can say map and then data is equal to this thing and now if we print the data which is now the map it's going to look pretty much the same but I'm going to save it anyway and come to the run tab over here and I'm gonna hop restart so that we can get this data again and after a second or two now we can see this data it looks very similar now it's all on one line but if we try now to print one of the properties we can do so I can say now prints and then we want the data and then in square brackets remember that's how we can get values from keys inside maps we pass in the key here so I could get the title for example and that is going to get us this thing right here so let me know save this and hop restart and we should see that in a second okay so now we get the actual data and just the title as well so that was pretty simple right so all we're doing is creating an asynchronous function we're using this package right here so that we can use the get from and this get function goes out and gets data from an end point we await the response of that and store it in this response object of type response on that response object we have a body property and that body property is the actual json string that we get back from this we then decode that json string into a map stored in data we then print that data and the title property from that data so we can actually do something with this data now so now we've seen how to use this kind of asynchronous code and the HTTP package and how they work together in flutter let's try now getting the data we actually need for this application using the world time API

Channel: The Net Ninja

Views: 121,811

Keywords: flutter, flutter tutorial, flutter tutorial for beginners, flutter for beginners, tutorial, dart, dart tutorial, dart and flutter, dart flutter, dart tutorial for beginners, flutter vs react native, flutter packages, flutter package, pubspec.yaml, pubspec, packages, flutter install package, packages get, http, http package, flutter http

Id: WdXcJdhWcEY

Length: 9min 36sec (576 seconds)

Published: Tue Sep 17 2019