Detailed Flutter API Tutorial | Fetch Data from Internet | Flutter Tutorial

hey guys what's up we'll come back to the channel during developer here I am with another video which will be featuring fetching data from the internet in this video we are going to learn how we can get data from the internet we have the EPA's how we can parse different formats of data like string data a JSON data a list data and how we can handle those data and extract the valuable information from the API response so as you can see that this is a demo application that I've made just using the data just using the API that we have and without causing any delay let's start this video [Music] so what we're gonna do is I will just terrible every cool from this and quickly import the material package you so for the structure part I've just created a scape world with a neighbor with a navbar that says fetch data from the internet and next thing first thing first you need to understand some of the terminologies that I'll be using when I'll be calling the AAP first thing is the EPA URL it will be the URL from where we'll get the response second thing whatever you see in on the browser window it will not be direct data structure you will get it as a string so we need to parse that as well we'll look into how we can parse everything and there is fonts codes there are many response codes that you can tackle some of them are two hundred five hundred and four zero four four zero four four error not found 200 for the completion of the request and I guess 500 or 400 is for the server internal server error so you can always learn about those Goods I will also write the blog about that on my website oh yeah we have the website so let's see where from way we can get the EPS right so open up your browser and go to the growing developer dot RG yes it is taught over Jade not.com I couldn't get the domain calm because it was already registered by someone so this is the website this is how the website will look we have the welcoming banner and all the videos for the YouTube channel and then we have some programming tutorials and articles where I write write about angular articles I write about flutter as well as some miscellaneous articles and photography is my secondary passion so I so photograph a lot of moments so go and check out that as well then we have the section sample API I specifically made this section for you so that you get everything to get started with your app developing career for this sample ap with the list response if you click here you can see that we have a list response how to fetch this and how to parse this into list and handle the data next thing is sample EP with a JSON response now this is a much complex response we will see how we can is this data into our handleable form and then we have a strange response this is just a single string response and these type response you get using WordPress API is when you get some likes and comments from the structures so we'll start with the string response I guess so go to your hundred showed you and and one more thing and one more thing these ApS are just for demonstration purposes and they tend to change so to get the URL you should always go to this website go to sample a page click on check data and then copy this URL force and now let's see how we can display it so let's quickly make a body inside that I'll use a text widget this text widget I'll straight string response right let's save it and you can see that the string response is getting displayed I'll just increase the size yes it's visible now right so we have to display the value here so I'll just quickly make a variable to name it as strange response and we will populate this variable with the value that we get from the Internet now to make request to Internet we have a package go to a pub state or Tamil and add this line HTTP colon let's quickly import the substitute package the one thing we have to name this package as HTTP why I am using this names because the make because many methods in this package can conflict with the existing methods in our dart library so that's why we use this name now this package can be referred with this HTTP name anywhere in this file right so what we'll do is let's create a method the return type would be a future I will explain this to worry fetch data and then let's see now after this face data a sink keyword if I am using a sink over the sink means means an asynchronous execution that means the whole of the UI will not wait for this function to execute this function can execute along with building up the UI so nothing gets blocked now we'll write HTTP dot get and let's face the URL string format so this is the URL that you can use to get the HTTP request and response now we now we requested the server to get some response but we didn't catch the response to catch the response we need to have some kind of variable to store the response so it would be HTTP dot response type once again HTTP is the name of the package and response is the actual data type for that so try it response right after that just wait and watch him if I write response equals to HTTP GET you get the error why because this response will not be immediately populated with the values this will take some time as fetching from the dead can take some time depending on the size of the data we are downloading so for that we use the word of it what does this await means wait for this method bid for this gate method to get some response once this method will get the response it will automatically populate it inside this response variable now what to do after getting the response if you see this pause dot we have many properties like body body by its container content length status code so we have to check forth everything we will write F response dot code status code status code equal equal to that that is if our API call was successful if it is successful then we'll set state and right string response equals two response now this is an object of type response right dot body whatever contain that is being displayed on the browser it's in it's in is inside the body so it will be response dot body done so if you open this whatever is getting displayed here is the content is the body of the response so that's why we should always use response not body to get this was not only the response here so instead of this string response I'll pass the value of this variable done now I'll use the two string method why because initially the string response will be null and you cannot pass any null values to fixed-pitch it so it will throw some error that's why I'm choosing to converted into string so even if it is null only null will be printed let's see start this application and see what happens and you can see that null is getting printed but there is no update of data why now this is some silly mistake that I personally do a lot of time that is I forget to call this method to call this method you have to declare your unit state and inside this unit state call the method most of the API calls are done inside the unit state method yes you can always use future builder stream builders and what I'll stuff for this but right now for the basic stuff I'm using the init straight for this now let's restart this application so once I we start this application it was null initially and then it got updated with this is example API data that was displayed on a browser page so this was a pretty simple thing pretty simple data we directly initialized the string response with the response dot body now what if we get some kind of list with this so let's move on to this sample a key with the list response this sick data and you can see that we have a list of strings first ring is the next is growing you can see that this is a list of data so we'll just copy this URL and instead of this we'll paste now you should always know the type of data that you are getting in return see this is not giving any errors right why because a response to a body is actually a string it will always be returning a string now you can see that this is a list here but eventually when you get the response you get it as a string so you need to parse it you need to convert it into a list to handle it like a list so for that I'll make a list name it as list response and instead of the string response I'll write list response now you can see editor why this response read body is the type of string and this is a type of list for that we need to import a package which is conferred package from that now it has all the decoding and encoding methods that you can use so I'll write json dot decode now this list also comes under the json only JavaScript object notation so just paste it and you can see that it is now gone now instead of the string response I'll write less response to it dot to string and restart this application and initially it was null and then you can see that we have the list now to handle the list what you can do is list off to list of three list of two will give you the developer so let's restart this application and see what happens you can see a red color screen some errors and this developer is being displayed why did you got the red screen let's see the error the method opening and closing bracket was called Ahnold that means this list this list response was initially now so how to handle this before this you can always cite list response equal equal null that as if our list response is null then we'll just simply display a container an empty container is nothing of whitespace it will not take up any space if it is null not null then only display the text let's restart this application once again and now you can see that there are there were no errors right then we'll be able to understand this now it's the time to build our own application and handle some conflicts stuff let's move on to our website and then we have supply piays sample EPA with JSON response seek data copy the URL always copy the URL by clicking let's check data because again I'm telling for some days these URLs might change so this go to the website and get this URL right now next thing we have copied the URL let's minimize it and understand how we can do this now instead of this I'll paste the URL that I just copied and you tell me what kind of it result it would be let's see this you can see that we have the curly braces here now these curly braces means that it is a JSON object that means it is of type map so to handle this we need to have a map response variable right we have the map response variable and instead of this I'll write map response everything is same we have the URL we have we have chicken we are checking the response code and then we are setting that my plus one is equals to json dot d code now json dot d code will automatically take over the object and change its route map here ok now next thing how to handle this map how to get the values how to extract the values that we need from this map now this is the structure that you normally get from every API is actually so how to get this first a call for this category I want to show which category we are following right now to get what is inside category we can use the category key understand this inside these curly braces first Calibri and the last curly brace we have one two and three values first one is ID second is category and third is fact this category is having a string response right now this fact is having a list as a value to get this list we can use the fact property to get this string we can use the category operating I'll show you right now so instead of this this response I'll try to map response if the map response is null then show the container otherwise would to show map response and in map respond instead of this to alt right category that is from this map from this map display the value which is falling under the category key these are the key and these are the way - these are the keys and these are your treasures you can say like that to access these treasures you can use these keys this is also known as key value pairs so let's see if it works or not so lets you start this application and see what happens and you can see that this is being displayed that is whatever is the value of this category is getting displayed here so let's move and like let's move and make our own application with with this so I wrap this text with the column and after this I'll use this Twitter builder just we I'm using this list builder because right now the fact is having only four values but as the time proceeds I might change the number of facts might add the number of facts so when you don't know what is the exact size of this lest it should always useless record builder because it automatically handles the length of the list so how to get this list first of all how to get get this list of facts from the value fact so how to do this so after this map response are tray so I'll just declare another list name it as list of facts right and as soon as I get this map response I'll write list of facts equals to map response whatever I get the response whatever is inside our map get the value of fact and you can see that when you see this response the facts is holding a list so from these facts as a key you will get a list and this list is stored in our fat list right now this list is again having 4 maps so if you are if I write list of so let me just change it like this okay so now understand this wait a minute yes so now understand this inside this list I have a map so if I write list of facts 0 what will this return list of fat 0 will return me this map and to get the title from this I'd write list of facts 0 that is this map and from this map I want the title so I'll write title and this way I can get the value of the title let's see how it works so just minimize desktop let's see so let's move on to a list view dot builder and inside this builder I'll pass content context and then we have our index in this now this will return some kind of widget right now returning in container yes now this is the container being replaced now this index will automatically go from zero to whatever length you give you should always give some length to do you should always give some length to list to tour builder so right now it is having an item count broad property now understand this initially what will be the value of list of parts the list of facts initially will be null when the request is not made when the request is complete and then the list of facts is populated then only we want the list view dot builder to be shown so we'll try it list of facts equal equal none that is at the list of access null question mark if this is true if this is true then null that as item count should be zero I don't want to show any of the items otherwise if it is not null it should be the length or list of facts red got it that's how you can manage the dynamic length of the EPA calls now let's see how we can display this inside this container as a child what I'm going to do is I'd write a column once again another children first thing would be image network and from way will you get the image URL if you see that it K you can see that you can get the URL from this list of fats so I'll write the list of facts the index value from this index value will get the map and from this map you want the image URL similarly you want the title and the description so we'll write list of facts top index now this index will vary from 0 to 8 after this index I'll write a match URL let's read let's save this and see what happens if we save it you get some kind of errors now this was intentional I wanted to show you what you can do with this and one of the common errors that we normally do is that vertical report was given unbounded height this column expands this column yes this column expands vertically and inside a vertically expanding widget you are declaring another widget with expand vertically so for that you need to specify something so inside this shrink-wrap inside this list chute or builder the shrink-wrap property is said to be true that is existing to the size that it can hold so that it is giving some bounded height now let's save this and see what happens and you can see that we can have the title now let's restart this application okay now you can see that we have the title but the images are not shown why because we are not restarted this application yet and this list is not yet populated so let's restart its application and see if it works or not if you start this application you can see that the images are being displayed but now another error a render flex overflowed by 174 how to handle this error this is now you are getting this error because we have used column for these and the column is by default not scrollable to make anything scrollable you have to wrap this with a single child scroll view widget right let's save it and you can see that the error is gone now these facts are separately scrollable and this column is also scrollable so we don't want this type of behavior in our application so what I am Dewey's inside the second student builder I'll pass the physics as level straw labels for physics that means I'm not making and I don't want this ListView to scroll so this is not volleyball and the complete screen is now scrollable so being able to understand this after this I'll just go up with this text from here and paste it now instead of this nap response it will be list of facts and the index value of course and after that to get the title we have our title right font size would be 24 and let's add some kind of weight to it I'll just hold it out let's save it ok we got some kind of error so we need to have one more place and let's save it and now you can see that we got the title let's see the EP in the same and then how you get this image URL you can get the title as well now below this title I'll just copy this paste it here and instead of title I'll write description and I don't want any font weight to it size should be 18 let's save it and you can see that we also have the description here so we'll quickly add some margins to this so inside this container I will give it a margin of 10 pixels from all the sides let's save it and you can see that it is now beautifully aligned so that's how you can make an application and fetch the end data from the internet and how you can extract the valuable information out of it so any kind of data any kind of structure you will be able to parse it in the same way that I am doing just ensure how you are seeing the data so yes that's all for this video hope you like this video hope you enjoy this video go into the website I constantly write blogs there so it will be useful to you and how you feel about this video how you feel about the website to write it in the comments and that's all for this video hope you liked this video hope you enjoy this video goodbye have a nice day stay safe

Channel: The Growing Developer

Views: 21,133

Keywords: flutter api, flutter api integration, flutter tutorial, flutter fetch data from api, flutter, flutter 1.17, flutter tutorial for beginners, flutter http, flutter http get, flutter parse json, flutter api call, flutter api json, flutter api integration tutorial, flutter api fetch, flutter api tutorial, flutter fetch json data, fetch json data, flutter fetch data from internet, fetch data in flutter, flutter json to list, background fetch flutter, fetch api in flutter

Id: MEqUx3_KrFo

Length: 25min 45sec (1545 seconds)

Published: Sat May 30 2020