HTTP GET and POST Requests in Flutter | Fetch Data from the Internet

in this video i'm going to show you how to make http get and post requests in flutter i will be using a resource called jsonplaceholder.ipcode.com which provides a fake rest api that can be used for prototyping and testing so in this video we will not be creating our own rest api instead we will utilize the json placeholder to fetch and upload data through get and post requests i will put the link of the rest endpoint that we will be using in this video so you can easily copy it from there now let's get started i have a brand new project here and to be able to perform http requests we of course need the http library as a dependency so go to the pub spec dot yaml file by the way if you press control plus p in vs code then it opens this file search and you can search for any file in your project and then you can navigate to it a very helpful feature under the dependencies add the http library with the latest stable version you can find the latest version on pub.dev you can directly copy the version number from here once you have it save it to install the dependency now go to main.dart here remove everything and then import the material.dart create the main function call the run app and this is going to show the myapp widget which we are going to create create a stateful widget with the name myapp now our task is to fetch this list of json found on this url and then we have to show that json list in a list view in the application and to fetch that data i am going to create a function named fetch posts and now to perform a get request we just have to call the get function available in the http library this will automatically import the http package and the parameter here is the url from which we want to fetch our data so let me create a variable named url and this will store this url this http is treated as insecure and by default insecure http is disabled in android and ios so this will not work there is a way to allow and secure http in android and ios but i'm not going to get into that in this video instead just put https instead of http and now this get function will not take the url as a string instead it is going to take it as a uri object so we are going to use the uri.parse and then we will pass the url here and just calling this get function with this url will perform the get request but this is not enough since this is a network request it is going to take some time so we will have to make our function asynchronous and then to receive the value returned this get function returns a future response so to extract this value we will have to put an await keyword and then whatever value it returns we are going to store it in a response variable and if i look into this response object then it has this body parameter which is a string this string is nothing but the json data so we cannot use that string directly as the json so we will have to convert that string to a json object or a map object in dot and to convert a json string to a json we have this json decode function in dart and here we can pass the string json that we want to parse and i'm going to store the value returned in a variable named json data now from this url we are fetching a list of json so we can safely cast this json decode as a list because we are getting a list of json from this posts url but doing this is not safe it can throw exceptions so for example if the mobile device does not have an internet connection then this will throw an error and the app will crash or if the url is wrong then again an error will be thrown so we have to handle that error to avoid the app from crashing so surround this piece of code in a try catch block and if any error occurs then i'm not going to do anything in the catch block but if you are working on a real application then of course you will want to handle this error and show appropriate data on the screen to inform the user that an error has occurred but i am going to leave this empty now that i have the list of data the task now is to show this in the ui and to do that i'm going to create a global variable here named posts json and this will be initialized with an empty list and now this posts json will hold a reference to this json data and i will do that in the set state function since i want the ui to rebuild when the json data is fetched now let's write the code that will show this data on to the screen this build function will return a material app the home of the material app will be a scaffold and the body of this scaffold will be a list view builder if you haven't used the list view builder before then don't worry it is very simple i will just show you now this list view builder also requires the item count so here we have to pass the number of items that we have and that will simply be equals to the length of the post json and now this item builder is a function which returns a widget for the list item so let's create that function the first parameter in this function is the context which we are not going to use and the second is the index of the list item for which we have to return the widget here i'm going to get the post from the post json at the index i and then i will return a text widget with the text title and the title will be post title we have a title and a body in the json and we will be showing that in the list item i have a typo here this dollar does not belong here and then on a new line i am going to show the body text post body and to make this a little prettier i am going to add two new lines at the end of it but right now we are not making any call to the fetch post function so the data will never be fetched and the ui will simply be empty so we will be calling this fetch post function from this init state method this init state function is called when the app starts this is the appropriate place to call the fetch post function from but if your widget was not a stateful widget if it were a stateless widget then it would not have an init state function so this fetch posts call would go into the build function but for a stateful widget you should not be doing this now let's run and see if it is working yes it is working now let's take a look at how we can perform post requests to show how a post request works i'm going to have a button on the screen and when that button is pressed then we'll post some data to this rest end point so let me remove this list view from this scaffolds body instead i'll have a center child the child of the center widget will be an elevated button the child of this elevated button will be a text which will say send post and when the button is pressed we will perform the post request we don't need this init state and fetch posts function anymore so remove that and here i'm going to create a function named post data this function will also be an async function since we are going to perform a network request and to make a post request we have a post function in the http library first parameter is the url to which we want to post our data and the second is the body we can pass the body as a json or a map and the json object that we want to pass here will contain a title a body and a user id and this id will be unique and it will be assigned by the json placeholder server now when i perform the post request on this url it will not actually add that data into this list instead it will fake it so if the post request is successful then it will return the data that we sent to it and this time the data that will be returned will contain a unique id so let us make the post request and see if we are getting anything back from that adjacent placeholder server if you are getting the json that we posted back with the unique id then our post request is considered successful so the title will be um anything doesn't matter body post body and we also have to pass the user id one this is a network request so we will have to put the await keyword in front of it and then we can store the response returned by this function and a response variable and we can access the json string this response holds by the response dot body member and i'm going to simply print that body let me put it in try catch and we can pass this post data function to this on pressed in this elevated function so when the button is pressed this function will be called when we are passing a function as a parameter then we don't need this basis and now let's run and see if it is working by the way the app is launching in chrome instead of the android emulator because with flutter 2.0 the web support is stable and now we can run the application on web browsers as well so let me click on the send post button and let's see if it works did anything happen let's see though yes we have a unique id coming to us let's try that again it's some different text if i click on this then we should get that back and we do so this was it about post and get requests in flutter by the way in a real application we should not be putting our network code in the widget it's it's not clean we should always follow a proper architecture and with flutter the way to go is block so if you want to write organized clean code with good architecture then use the block pattern i have a tutorial that teaches you how to use the block pattern i will have it linked in the description watch it if you want to write better and organized code you

Channel: Hey! Let's Code

Views: 17,796

Keywords: http request in flutter, get request in flutter, post request in flutter, get and post request in flutter, HTTP Requests with Flutter (API), Flutter - Build An App To Fetch Data Online Using HTTP GET | Android & iOS, Flutter HTTP Request (Post Request), get data from the internet, fetch json data from internet in flutter, get json array from internet in flutter, fetch json array from internet in flutter

Id: ljTkGz_O36I

Length: 12min 11sec (731 seconds)

Published: Mon May 24 2021