Network Request - Flutter Explained - Level: Beginner

hello my friends and welcome back to another episode of flutter explained one of the last videos was the future builder and here we use the future to receive a network request and show something like on the right side a list of users in that case so today we want to do the same thing by challenge getting some data from an API with the HDP package but this time we will not take a closer look how we create the view we will take a closer look how we can create a network request to get the data without further ado let's get started alright so I want to begin the journey to get the network request on public death because in Poplar death we have the possibility to download the HTTP package and at HTTP HTTP package is necessary to get a future based library to making HTTP requests if you don't know what an HTTP request is it is the way how service and clients communicate on the Internet and for that you can read a lot about that stuff so if you don't have a clue what HIV requests are maybe you should check out that video on another time so but we won't use that HTTP to get some data from an URL so that package provides that for us and we can read how it is used and we have to install it as a dependency again in our library and the second thing that I want to show you is the random user generator and I use random uses user generator is created from the random API people as you can see it delivers us like lorem ipsum for users or people so we get a picture we get a number phone number we get even the address or birth dates and everything and you can see there is a documentation for that API so how we can get different things so this is the answer that we get from the API whenever we call the API and as you can see there's also an URL that we can use to request multiple users so I entered it in my browser window and press Enter you can see we get a list of results as a JSON object so we receive a JSON and in that jason we have multiple and elements inside and each element represents one person that we can use for our library now so we want to get these information decode the jason and receive the data as a dart object in the end so let's get into code so i'm back with a new haircut and also a bit more brighter shirt so i'm ready for you guys and as you can see we are back into Android studio and we have Sadaat it with the dark mode and also what you can see is we have already a home screen and I already prepared some stuff with a future builder and a list I'll build a few ListView builder all crazy stuff that will display our list later as soon as we have the data but because we want to de focus only on the network service I would just suggest taking a look into our lip folder we have created a model here which is a person to Dart which is as you can see empty we have a home screen that is our screen that shows our date and data then we have a service which will fetch our data today and the main dot dart is only difference is that I turned on the dark mode that is something that I will maybe explain in another video all right so first let's start with the model we want to get data from the internet and for that we have to create a person model at the end so whenever we fetch that information we want to create a person for every and element that we find inside of our JSON so we need of course a person inside of dart so I create that person for now we want to have a class person and this person should contain a name the phone number and an image that we can show so all right so give it the name is of course a string right string name and with that I mean the full name I can change that to a full name yep so and then we want to have the phone numbers also a string and the last thing that we want is the string of the image URL or what we yeah let's keep it image URL and I think I would keep that also name because my template is working with that the easiest so and now something new happens so what is it Jason a Jason is a very long stream with a key value pair and in Jason it's always a key that is a string and something else it could be a boolean it could be a number it could be a string as well so we have some how to transform this string that is a map between a key a string and something else into this person so how we can do that is in the easiest way we create a new constructor for it so in the accusal way we would create a normal constructor like so this dot name and this dot phone number and this dot image URL and this would create us a person whenever we call it but there is also something else that flattered provides us this is called from Jason and from Jason is from Jason itself is a constructor from person even though we can't see it inside so there is nothing but from Jason creates us a constructor that returns something so we want to have an app here inside and this map is a string to dynamic pair and this is a JSON object right because we have the key that is a string and a dynamic that is anything like boolean string or number and this from Jason should return us now a new person object with this call on here I can create immediately the new object out of this Jason so I can say the name parameter of this new person object will be from Jason now we have a specific car if you look into the API and so if we take a look into our API we see we get the results and after that we get the different objects which all of these objects represents one person of us right so we look into the first object and now we check okay we get the name object which represented by free other deep attributes title first and last and all these together gives mrs. Brandee Walker okay so what we have to do now is we have to say because we get for every object that we have as a JSON we get the name and title and the name and first name and last so let's do that together so back in our code now we have to say our name consists not only as name then we have here the title and that could be it already right so now we have already the title but of course the name consists of more than just the title so I recreate a new string out of it and I'm a bit a first and last is command V I'm sorry come on V and last voila so I believe that we have already created a new person object but we only set the name of that person object so of course we want to have also the other properties so we make as a comma behind of it and after the comma we write now the next thing that we want to set the phone number which is also I have to be a string right because it's a phone number we don't know how it is created and we know because if we look at the API we see that the next that is inside of our object of person it is in immediate ascendant so it is phone directly without any name or anything and last but not least the image URL and here we have again it is inside of picture and inside of picture puts what I'm doing we have another object called thumbnail cool so if I save it and reorganize everything a bit it looks pretty good so that means we create now from adjacent immediately one of these person objects great so next step the next step is to get the data actually so for that we want to create a new class called person network service and this person network service should return us always all the information that we want and for that we will create a function so I call that fetch use persons and voila so for now I want to be a bit lazy and I don't return anything yet and or at least I don't tell dart that I will return anything if there is nothing it will be always void this is not true so I leave it out for now and also there is no parameter at the moment but because I know now that I want in the future to have something there we want to take one step after another so first we want to specify the URL and I could do that here in a class as an attribute but I know this URL part will never change as long as the application lives and because it will never change I create a constant string that I call a random person URL equals a string and this string has to be the URL part so if we go back to the readme user me we can see this part will never change for all the API calls that we do so back to our Android Zoo you will take that part and now now we want the first time to call the HTTP and if we take your look I don't have the HDPE package yet and that call says me that I have to import it and as we already know the dependencies are very handy in that so let's go to pop clock death and get the HTTP package and we have it here and now installing getting the dependency going back to our Android studio and add that and of course package don't get Wow okay so now we have two dependency we can to check that against in the dart packages if we want we can see it here let's install it now perfect exactly what we want and now we want to make this HTTP call so for that we say HTTP right Oh what happens why I can't import it hmm that is a very good question so for that we have to import something and I have to manual write something in Android studio like import normally this never happens and if I enter yeah HTTP we can see it is actually there why could Android studio not identify it so if I import that for now and I just jump into the code here it looks a bit different than usual as you can see there is no class surrounding all of these functions and all of these informations and because there is no class around in them Android studio has trouble to identify this object so for us that we understand this is this comes from the HTTP package we give it a name we give this specific import and name and so we can use everything inside it if we add DHAP in front of it of course it would work also if I just leave that out and now would write something like get then you can see on the here in that part that we import that from the HTTP package actually but the problem is if I just write there the the get and write the URL then it is very hard to identify that this one comes actually from the HTTP package so I always recommend you to add this HTTP whenever there is no class surrounding the inners of an import cool so we give it a name and say HTTP GET and now we we call this gate function that is amazing because now we get really an attribute but now something else happens there's HTTP GET actually is a future but we don't want to have the future we want to have the response inside of it and that's a very good thing so what we want to have is the response and sorry I have of course to say HTTP dot response response equals this of course we have to give that variable in name but as you can see somehow it doesn't work and that is the problem with the futures we have now to wait till the future is completed we already talked about the futures in another session I hope and now we have to add an async modifier if I do that you can see immediately up there there's the asynchronous and now we can use that response now we get not back and future of a response we get now back the response itself and that is great because now I can access all these parameters that was not before there so for example the status code and as everyone knows these status code 200 is our favorite one because it is okay everything works well and else if we don't get this 200 we throw an error an exception in that case and I give it a message like something gone wrong and I add the response that's that is code just to see whenever this error comes something went wrong and I get the status code the benefit of that is I will use a future builder and with that the future builder will understand it as has error and will display an error case in that field let's take a short break let's take a step back what did we do we created a person we created an instance of a person with the constructor from Drayson and now we created a person network service we dependent on the HTTP package and we use the HTTP package to create ourselves a future with a response and now we check against the status code which is 200 or 400 or anything else and if it is 200 we want to do something with this response and now we are talking of always about these JSON that long string where do we get that from well the response itself has something called body and in the body there is a very long string now as called jason the problem with that is this jason is nothing for dart it doesn't understand that it's just a string so there is a package called JSON decode from the dart convert package and as you can see I just write JSON decode and now I can import the library dart convert we import the dark convert and have now the JSON decode in that place and this one returns us a map a map of people data so and that is amazing so what we have here is all that string is now that JSON and what we want to have from that is people data we want to have the results because inside of here we have a list of dynamic because we don't know what is inside this list and this is now the pea pots so inside of that list we have now inside of that list if we go back to our result we have noticed all of these objects inside so 0 1 2 3 all of these people and what we want to have is a person's object and luckily we created already that nice little b from jason constructor for us so what we want to do is we want to go over each JSON and give it into that person object and return a list to our whoever gets the information so first we want to map the JSON that we got from the the response body and we want to map that and map you can understand like we have one object on the one side and now we want to have a second object something else on the other side and we want to transform it from that part to the other one I maybe make another video if you like so just write it in the comments but for us we get a JSON in that file in that case I could be more specific but this is enough for today and what I want to create is people dot sorry not people we want to have person dot from Jason oh of course person we have to import it and then dot from Jason and we enter the JSON so and if I say in our return we will see everything is fine but I can make it even a bit better by saying to list and with that we collect everything that we have inside a list and this list we return back so can you tell me now what happens here I'd still didn't have any return parameter for this function and I am not really a fan of that because we have a type network I also want to be very specific with the types that we return that every developer understands which type fetch person's returns all right let's see first we have a sink so that means we return a future of something that is something for sure as soon as we have here I using we return something as a future now we return it seems we collect everything inside of a list so we return a list of something and now we map everything to a person so it seems that we return a list of persons so we wait a while and somewhere in the future we promise from that fetch person we promise that we return a list of person cool that's that so we managed it to do that we return a list of persons and now if we are lucky enough we can try to also specify the amount of people which I didn't do here so I say this Fitch person gets an integer of the amount that we want to fetch from the service so as you see here I do it already with that parameter everything after question mark is a so called parameter in the URL you can read more about that it's also a very interesting topic and now we make HTTP port get and now we add this stuff behind the URL right now we make it a bit different sorry for that voila and we say that when we add and instead of 10 we use the amount and with that we have now our functioning person network service and if we go back to the home screen as I said already I prepared a little thing right so what we can see here is we I create and let's change that and just re-implement that thing and as you can see what the home screen does right now it takes the person network service which I import yet and creates one for us and it needs to be final because we are in a stateless widget right and now we fetch persons and it finds this method which returns inside of a future builder because it returns a future if you remember and we fetch ten persons and if we take a look here we have a list of persons and now we check if we have data we show a row and all of that kind so if I activate the iPhone again does it bring it in the front so and we reload with the state then we should see we have a bit of luck a list of ten people isn't it great and I can also scroll in it because it is a list view and also what I can do I can improve that to a 100 as you can see immediately it fetches the new data and displays them cool all right thank you so much you've made a very good job if you've come this far today so you learned how to use the futures how you create your own network service that catches the data from API you created your own constructor from JSON which is very important and very handy that shorthand to know and then after that you also created persons out of it and send it all that stuff back as a future very well so as you can see then I under on the right side you'll find the idea if you are interested in a little challenge I would be proud if you take that thing as this inside of my github repository and make it a much more beautiful add a scaffold bring some colors inside maybe also bring your own API information out of it just take the the persons that you have there with all the information and enhance this list with phone numbers email addresses age whatever you like just try that out because with that training you can ask me questions underneath of the video and I can answer them which would helpful for both of us I think cool all right so thank you very much for joining me today on this adventure if you have any questions or comments please leave them below or on Twitter I'm very happy to answer them and for everything else thank you for watching on the right side there is the very Big Apple button right and on top of me you will find the two videos that are interesting for you and thank you for watching

Channel: Flutter Explained

Views: 2,134

Keywords: flutter, flutter tutorial, flutter http request, flutter http, flutter dart, flutter sdk, learn flutter, flutter network, flutter tutorials, flutter json, flutter basics, flutter app, basic network request, flutter widgets, google flutter, flutter development, flutter listview, flutter provider, flutter state management, flutter course, network request, flutter for beginners, http request, flutter http request json, flutter network image

Id: hz2LQ43muio

Length: 23min 52sec (1432 seconds)

Published: Sun Feb 02 2020