FutureBuilder In Flutter - Building Lists with JSON Data

[Music] hello YouTube welcome back to my channel I am summer and I'm back with another video for you guys and since I received a lot of requests to create more videos on flutter here is another video on flutter and in this video we'll learn how we can use JSON data that we receive from a remote web service to create a list inside our application and navigate to another page when the user clicks on any item in that list we will also be using a future builder to achieve this so let's get started so as you can see here I have a blank application that I have just created using Android studio on the right I have the iOS simulator running where with the help of hot reload I can quickly see output of the code that I am writing so this is pretty much all the code that we get out of the box when you create a new flirter application and what I have done is I have gotten rid of all the comments inside this code so the code looks much smaller so I am going to use a web service called JSON generator that allows us to get the JSON data that we need so I have created this JSON data which is an array and each item inside this array contains information about some fake users so it contains index about email name and a picture that contains the URL to a random image so we'll be using this data to populate a list inside our application let's see how we can do that so here I have a stateful widget called my home page and here I have the state for this widget called my home page state inside the state class I am going to create a new function and this function will return a future a future is just like a function but it is asynchronous in nature which means that we don't know when it completes it might take some time for the future to return and it returns only when either it succeeds or it fails so let's create a function that returns us a future and the function will get the JSON data from the remote web service that we just saw and give us all the data before we do that we'll have to create a class to store the users information that we receive from the JSON web service so here I'm going to create a class called user and inside this class I am going to define all the five properties that we have for each user index about email name and picture and inside my constructor I'll initialize all these values that's it we are done with the class we don't need any methods inside this class as of now so now we can go ahead and get started by writing our future function so I Square and type in future and because future is an external type that is not built in too dark we will have to import an external package so the external package that we need is a sink that has the future class built into it and because we will be making an HTTP request to the JSON web service called jason generator i'll be using the HTTP package from dart and for deserializing all the json data i'll be using the convert package from dart with all those imports in place here I'll create a new future and here I can also specify the return type of this future function so the future function will return a list of type user let's call this function as get users inside this function the first thing I'll do is make an HTTP GET request to this particular URL so let's go ahead and do that so I'll just go ahead and type in HTTP dot get and within a pair of quotation marks I'll pass in the URL I'll put in a semicolon to end the line and whatever will be the response of this HTTP request I'll store that inside a variable and let's call it data not because this is an asynchronous function and have to type of wait before this so that I get the response of this gate function inside the data variables that we have created here now we are getting this error because you cannot use a weight inside a synchronous function so you'll have to convert your get users function to an asynchronous function and you can do that by using the async keyword after your get users function now you can see that the error went away now that you have got the data you'll have to convert this data to a JSON object using the convert package that we have imported earlier so here I'll just go ahead and type in where JSON data and I'll use the json dot decode function to convert this data to the equivalent JSON object and i'll pass in data dot body to this function so now the data that we receive as a result of this HTTP request is available to us as json inside the variable json data since we are getting an array of json objects this json data variable contains an array so we can loop over it and populate a list that we can return later from inside or get users function so let's go ahead and create a new list of type user and call it users this is the list that we will return I'll initialize it as a blank list and now I'll use a for loop to loop over my JSON data object and in here and populate the users list and for that I'll have to create a user object for each item inside the array JSON data so let's create a new user call it user and to the constructor I'll have to pass in the index which I can pass in using U and then within a pair of square brackets I can pass in index I'll pass in the remaining properties now that I have a user object I'll insert this user object to the users array so I can just go ahead and type in users dot add and to this I'll pass in the user object that I've just created after all of this is done let's print the length of the users list and to test this out we will have to invoke the get users function so let's build some UI and invoke the get users function so inside my body I have a container and what I do is I use the Future Builder widget and the future builder widget takes in two properties the first one is the future itself which takes in the name of the function that we need so the name of the function is going to be get users so I'll just pass in that and the second property is going to be the Builder itself it takes in a build context and an async snapshot let's call it snapshot the snapshot parameter here which is of the type async snapshot gives us the data that we get when the future resolves so whatever the get users function returns whenever it returns will be available to us inside the snapshot parameter so here I'll have to return a widget and what I'll do is I'll use a list view to display all the users information well use the list view builder and this takes in an item count and the item count will be equal to snapshot dot data dot length and it takes an item builder where I can define how each item in my list is going to look like and the item builder is again a function that takes in a build context just like the future builder and the second parameter is an index we can use this index to access any value inside the array that we are dealing with here the array that we are dealing with is snapshot dot data so from inside this function I'll have to return a widget that defines how each item inside at least is going to look like I'm going to use a list style for that because less tiles are easy to build and then nice to look at for now I just go ahead and define the title property inside my list style and once we are sure that everything is working we can use the rest of the properties of the list style widget so as of now I'll just go ahead and pass in some text and the text is going to be the name of the user that we are dealing with so we can access the user using snapshot data to which I'll have to pass in an index and since snapshot data at index is a user object I can access the name using dot name I'll have to put in a semicolon here and I'll save that and do a hard reload and we are getting this error because the length of snapshot dot data is initially not available the snapshot dot data only exists when the future returns until the future does not return the snapshot dot data is undefined its null so we'll have to handle this case and to do that we will have to use an if-else block inside a future builder so here I just got in check if snapshot data is null or not if snapshot data is null in that case I'll just simply go ahead and return a container with a child of center and this will just display the text in the center of the screen and the text will be loading so it will give the impression that something is happening in the background to the user else we will return our ListView builder all right so now if snapshot data is null then the message loading will be displayed to the user but as soon as snapshot contains some data this particular block will be executed and our list will be populated let's see if this works we'll save that I'll do a hard refresh I get the loading text on the screen and if I check the logs you can see that I get the text 20 log to the console which means that the length of the user's array is 20 which is true because I'm getting the data for 20 users so that's working but the loading message doesn't go away oh okay and that's happening because I have forgotten to return the users list from inside my get users function so just after I've printed the length of the users list I'll just return the users list I'll save that and now you can see that initially I get the loading message and in a few seconds the list of the users shows up the list as of now just contains the name of the users and that's because we have just defined the title property of the list style let's go ahead and make it look a little bit nicer so on my list style I'll just go ahead and define the leading property and I'll use a circular avatar to define an image here here I'll get the picture property of my user object using snapshot data at the index and I'll just get the picture property let's save that and now you can see that I get the picture for each user let's go ahead and display the email as well so I'll use the subtitle property for that [Music] and now you can see that I get the users email as well so we have a decent-looking list as of now now we need to add the tap functionality so that when the user taps on any of these items in the list they are taken to another page in our application where they get to see more information about that user let's see how we can do that so first of all I'll have to create another page and create a stateless widget I'll call it the details page and as of now inside the build function of my detail page I just returned a scaffold with an app bar and the title on the app bar is going to be a text widget and I'll just go ahead and display the user's name the user object here doesn't exist as of now so we'll receive that inside our constructor so I'll just declare a final object of type user and call it user and inside my constructor I'll initialize it so I'll just go ahead and type in tails dot user now I can access user dot name let's save that and now I need to write some code so that whenever the user taps on any of these list items they are taken to the detail page so I can simply use the on tab property of my list style and I will execute a function and here I'll just go ahead and type in navigator dot push and the push function takes in context as the first parameter and the second parameter needs to be a route so for the second parameter I will pass in a new material page route again it takes in a builder and builder needs to be set equal to a function that should actually return the detail page so here I'll just go ahead and return detail page and since detail page expects the user object as a parameter I'll have to pass in the user object as a parameter and Alpha's in snapshot dot data at index let's save that I do a hot reload and let's see if this works so I have a list and I'm going to tap on any of the list items and now you can see that I am taken to page two with the name of the user that I tapped on so let's tap on this first user Kathleen Doyle and as I tap I am taken to another page where the app bar contains the title Kathleen Doyle which is the name of the user which means that the information is transferring from page 1 to the detail page you can display more information about the user inside your detail page because you have access to the whole user object you can use all the properties on your user object including name email picture and about to display more information about this user on this detail page so now you know how you can use the HTTP module to get data from a remote web service convert that to the required format using the darts convert package C realize that data by creating a class for the data and then using a future builder to create user interface when the data is available we are using a ListView builder here but you can use whatever you want so that was it about this video I hope you enjoyed it and you learned something new from this video if you liked this video give it a huge thumbs up and share it with your friends and colleagues thanks for watching [Music]

Channel: Samarth Agarwal

Views: 217,491

Keywords: flutter, flutter mobile, dart, google flutter, flutter tutorial, dart tutorial, futurebuilder tutorial, future builder tutorial, mobile development, android flutter, ios flutter, flutter learn, learn flutter, flutter basics, flutter screens, flutter app development, flutter app tutorial

Id: EwHMSxSWIvQ

Length: 15min 30sec (930 seconds)

Published: Sat Aug 18 2018