Networking Requests in Flutter | Day 10 - #30DaysOfFlutter

what's going on everybody it's your boy kilo loco and today we're going to be working with letter so we're in at day 10 of 30 days of flutter and today we're actually going to be working with one of the most important concepts that you're going to come across as a developer and this is going to be network requests so in this video we're actually going to be going over how to make a network request go up to an api and pull down some data now we won't be working too much with flutter in this tutorial but i will you know since it is hashtag 30 days of flutter i'm going to show you how to display the json onto the screen just so that we're doing something flutter related but this is a core concept that you need to fully understand before we move any further because we are going to start doing networking requests and building out more um relevant apps in in the next couple of days so with all that said let's go ahead and jump right on in all right so as you can see we're starting off at pub.dev the package that we're picking up today is http just like that thing that you put up in that that browser bar right so go ahead and select http now it's relatively simple to work with um http the package all you need to do is come up with some url or a uri you pass it in and then you um and then you essentially create the the request or you perform the request now this is showing you how to do a post we're only going to be working with a get today just to make it really simple but i want to make it very informative for you so that you're comfortable working with json understanding how it's structured and getting that into the app so let's go up to installing and we're going to grab that that little dependency right there we're going to be like bam we're going to head over to the pub spec dot yaml and we are going to paste it in under dependencies we hit save like bam and let me just show you what the app looks like right now so as you can see all it is is just a simple button you should be comfortable with making buttons at this point i actually used a widget that we haven't used this far which is called an elevated button but other than that nothing crazy going on right here we just have a child of text and then on pressed method right here which is um you know make requests it's an asynchronous function i'll show you a little bit more about why it's going to be asynchronous in a bit so with with our new http package all up in our project let's create a new file called data service all right so we have our new data service object our new data service class and we're just going to have a single function in here now the reason why we created a separate file and a separate object a different service is because generally what you want to do when you're working with you know different services like http or you're like trying to do one type of thing while you're programming you try to clump all that that that functionality together into objects or into like these services that we have here so this is going to be the object that's responsible for going out and getting our data and returning it to us so that's why i made a separate class we could pretend we could really do it in the main.dart if we want it but that ain't this it's just not best practices so let's go ahead and create a function that's going to be called um get or perform request or something like that so now we have this function called make request to api now just so that you know what api is it's application program interface don't worry about memorizing it nobody needs to know what it really stands for but i want to show you what the api is that we're hitting all it really means is that we're interacting with some back-end server that has information that we can ask for so we're able to talk and communicate with this back-end server this back-end computer that we can say hey can i have some information and it's going to be like oh yeah sure kilo sent you why not right so i have this api let me go ahead and type it in for you so you can feel free to go out and google and check all the different apis there are but this one's obviously going to be the simplest because it doesn't require anything it's this api.kiloloco.com users so this is just an api that i created and it it simply returns back like the members of my family right in our ages and it just gives us a little bit of information here so as you can see an api gives you back it it will generally give you back json that's usually what you're going to see apis give return to you so it's going to give you back data like this and as you can see there's like a pattern to the way that the data is structured right we have these these uh square braces right here at the top and at the bottom you see ones open and one's closed now this means that it's kind of like a list right it's a list of whatever's in here so just like in dart when you want to use square braces and have like a list of things like we we've had a list of states a list of um i can't even remember all the different things with that we had lists of but we have a list of things in here now these curly bra braces right here that you can see represent um that that means that's an object so we have a list of objects inside of our our square braces now inside of those curly braces inside of our object we have different properties right so the properties you can see we have on the left side which is a key from what i know all apis return keys as strings so just keep that in mind but like yeah we have a key and then we have a value so the key is just going to be some name and it's going to say okay it's going to separate the value by a colon so for this for this object we can see that we have a key which is id and the value is one and then we have a name which is the key and then we have a value which is kyle another key another another value so then you can see that all of the data is formatted in the same way right so each of these objects have an id they have a name and they have an age right so all of our data is very consistent and that's what we're generally looking for when we have an api now there are much more advanced apis and sometimes the data isn't always consistent but in our example today it's going to stay consistent so we don't really have we don't have to name this object anything specific we could call it a person we could call it a human we could call it a car if you want i mean call it poop i don't care but what i'm gonna do is i'm gonna say that we we generally have a list of users we're not going to be creating any objects to encapsulate that data but i'm just going to refer to this as our list of users so now what i want to do is i want to retrieve this data and i want to show it in our app so all i want to do is i want to go up to the internet i want to hit this api this this url right and i want to get this data back so that i can display it in my app just simply just as it is right so that's what we're going to be doing now i want to take this i want to take this url because we're going to need it and go back over to our data service and what i want to do now is i need to create a uri i actually don't know the difference between a uri and a url but you can think about it as just essentially being a url for the most part all right so as you can see we're going to create a new uri object we're going to use the constructor called https and this takes in two different arguments it takes in the authority which is essentially just the host and we can see the uh the host name right here it's essentially this part the base url for the most part so it's not the https it's not the colon slash slash and it's not the end path right here it's simply this so we need to pass that in there and we pass it in there as just a string so if i do this what i want to do is i want to remove everything that isn't the um the base url so anything that has a slash this part can't par slashes or any of that so we want it to look like this then we need to finish adding in the rest of our of our url right which looks like this so we want to add in the slash users into the un unencoded path so we're going to add that in as a string as well and we could just say slash users and that's all we really have to do for this very simple uh api we just need to go to this endpoint and then we get our data back it's as simple as that we're going to be working with a more advanced api in the next video tomorrow but for the most part this is like the core concept of everything that we're going to do so now that we have our uri what we want to do is we want to actually go out to the internet and get it and we do that with http which is the package that we just installed so up at the top what we're gonna do is we're gonna import http now as you can see i'm gonna i'm gonna do this manually and the reason why i'm gonna do it manually i mean you could auto import it but what we want to do is we want to cast it as and when we give it a name you could you could put poop right here if you want but i'm just going to put http i don't i don't fully know the reason why they recommend that we do it as http and if you take a look at the documentation they do it in there in the example as well so you'll see at the top that they cast it as http what it's doing is it's saying that if you want to access http then you have to specify it as http so you'll see what i mean right now so if we do http and what we're going to do is we're going to do a get request that means just simply go to the server go to the api and ask for it just ask for it don't do anything special don't put anything in there just ask for it so we're gonna do get uri like that and it's as simple as that and then we'll get a response now if we didn't do this cast up here then we could technically just do this get right here like this and this would work i think that the reason why they recommend that you cast it is because like these names can get kind of overloaded and reused in other places and that's why they do it so i'm not really entirely sure why but um if i had to guess that would be the reason so obviously you don't need to know if i don't need to know right like just to get started at least so as you can see we're gonna have the response and then also oh well we need to make sure that it's cast right as http so we're going to get a response now the response when you're doing a networking request it's just like when you go to a website right and you know that you know you're obviously watching this on on the internet so you know that when you have a bad connection to the internet or if your data is just slow that it takes time for for information to get back right like sometimes you load a website and it takes a little bit of it takes a while before you're actually able to see the website sometimes right so that means that we're going to be getting back the value at some later time and when we when we're working with values that are going to be received at a later time we're working with asynchronous task and that means that we're going to be doing away so we're going to mark our function with async we're going to await for our our response and then once we get our response what we're going to do is we're going to have a body on the response the body is going to be whatever comes back from that that uh that networking request so i actually want to return this body from this function right here so what i'm going to do is i'm going to change the return type to future and make sure that it specifies a string because it's going to be returned as a string we're going to talk about how to convert it into an object in the next video and we're simply going to return the response the response dot body like that so now we're going to get back whatever the the url gives us right so if i go over to our main.dart and in our make request we can actually get that response but first we need to actually get an instance of our networks or our data service so let's do that first all right so we have an instance of our data service right there and we're going to open this up and we're going to say uh final response is equal to the the data service and then we're just going to call make request to api right so then we have this response right here now we want to display this in our ui so what i'll do instead of showing just the elevated button let's go ahead and refactor this into a builder so that we're able to do an if statement and show some text if we have um if we have the response back all right so as you can see we wrapped our elevated button into a builder like um build it bob and now we're able to do a return statement inside of our builder so what i want to do is i actually want to hang on to the response in a property up here and we could just make this a variable this will just be like a string and we could just call it response right keep things simple and then if we have a response then we can show the text but if we don't have a response then we won't show the text all right and there we go so now we have this if statement inside of our builder if response is not equal to null then we'll show that response inside of a text widget but if it is equal to node then we'll show our elevated button and then all we have to do now is just simply make sure that we're returning our response or we're setting our our property response up here to whatever value is in here and since we're going to be changing state we need to let flutter know about it with set state all right and there we go and i actually added in the away i had forgotten to do that because remember this is an asynchronous function so we need to wait until we get that response back and then we're just simply setting our response up above to whatever this response is right here so now our app is pretty much done let's reload it pull it up onto screen and let's see if we can actually make the response show up so we're going to do make request and there we go so now we can actually see the json that we we saw on the website like in our browser on the screen and we're going to be working with this a lot more in detail in the next video not with this specific api this is a little bit too simple um but we're actually going to be uh working more extensively with json creating objects and then doing stuff with those objects so i hope that this was a informative video this is a very core concept so if there are any questions that you have about networking requests make sure that you ask the questions in the comments down below or head over to the discord you can find the link to the discord in the comments down below as well this is a very important concept and it's very important that you understand how to make the networking requests what's going on during the networking request and how to read this data because it's going to be like it's going to be a huge part of about how you go about being a developer so that's going to be it for today i hope you enjoyed the video if you learned something new make sure you subscribe so that you can keep learning new things and i really appreciate your time now go out there and keep coding passionately

Channel: Kilo Loco

Views: 6,731

Keywords: flutter tutorial, flutter example, flutter for beginners, build a flutter app, 30 days of flutter, 30daysofflutter, #30daysofflutter, flutter course, flutter free course, dartlang, flutter dart, flutter tutorial 2021, flutter example 2021, flutter visual studio code, flutter for beginners 2021, 30 days of flutter google, flutter http, flutter networking request, flutter api, flutter json, flutter download data, flutter https, dart networking request, dart api

Id: 6uBfuGr4rvo

Length: 15min 55sec (955 seconds)

Published: Thu Feb 11 2021