Flutter Tutorial - FutureBuilder - Load JSON From Network & Local

the future builder widget allows you to load some data from the internet or from your file system and while it is loading this data we show then some loading indicator and this then can look like this so we have here a new page and if you go to this page a loading indicator is showing and then the data is loading from the internet or from the local system or whatever you like to do some task which takes some time and we will look in this case how we can load json data from an api and also how we can load them from the local file system if you are new here subscribe to my channel and make sure to watch this video till the end let's get started and load first of all some json data from our local file system and therefore i create here within the scaffold this future builder and we want to load a list of users from our file system which i have already stored here in our assets and here i have a file with all of our user data and basically this here is a list of some users which have a username and email and we also store the url of their profile image here inside to receive our users later we also create a model object and here we create a class of users where we exactly put the same fields inside username email and url avatar which holds our image and this looks then exactly like the fields which we have here inside after it we create here constructor and put here all the fields inside and lastly we create here from json method where we basically get here later this json which we have inside of this file and we want to convert them to real user data and therefore we return here a user and then we simply take all the fields of our json so for example we take here this username out of our json and then we simply put this username inside of our model object and we do the same thing for the other fields which we also have all stored within our json file now that we have completed our foundation we can go here back to our user local page and here inside we put again a future property inside and then we call here a user api to get the users from our local storage and therefore i have created a new file users api where we exactly create this method get users locally and here we want to return the list of users which we get then from this json file before we start the implementation of this method we go inside of our pubspec jumble file and here under your flutter tag you need to add the asset of your json file so basically i reference here this folder assets and then this file users.json which i have typed here inside and now we can go back to the users api and load this json file and therefore i simply call you this asset bundle with which we can load the data and you simply call then assetbundle.loadstring and then you need to set here the path of this file inside so i put you exactly the same paths inside which we have already put before inside inside of our pubspec jammer file and then we get here this data loaded as a string and we also want to convert it to a json object and therefore i simply call here jason the code and put here the string inside this body field contains then this list of the different users which we have stored within our json file and now we simply map this data which is in our json file and map it to the user object and here inside you need to create then the user from json method which we have already created and this converts then the json data to the user object and lastly we return here then a list of users and we can go back to our user local page where we then get the data and to get the data from the assets we also need a context which we have then used here within our default asset bundle and now that we then get the list of users data we can also build them as widgets and therefore we implement the builder property and here inside we get then the list of users from our snapshot data and now we need to add here some cases so the first case is this waiting case and then we want to show here a circular progress indicator in the middle of our app and this will then display here this loading indicator until we have loaded the data from our file system and we also add here the successful case where we get actually the data and then we want to build them and they can also happen some errors and therefore we want to catch them so in case we have here an error then we want to display here text which says some error occurred now we want to create this build users method and here we basically put then all the users inside which we loaded from our local file system and which we have converted and now we simply create a list view builder to display multiple widgets under each other and then we have here this item count where we put then the users.length inside and we also want to build each individual item and therefore we get here every time out of our users list the individual user which we want to build then and within a list view you normally return here a list style and here inside you can then set the text which is in this case the user.username so we access here every time the username out of our json file and now if we load this data he shows a small loading indicator however we load it from the file system therefore it is really fast and then this username is displayed here within our app within our list view and what we also can do is we can access here then these other fields which we have loaded so for example this email and also this image and that's what we want to do so we can also set here within the list style this leading property where we want to set the profile inside inside of a circle avatar and here you can set then the background image which we then put to the url of this image and now in front of it we will then load here all of these image from the internet and the other thing which we want to add is here the subtitle where we put then the user email insight and this looks then like this and we loaded everything successfully from our json file now we want to do the same thing loading some json data however this time we want to get it from a server and this is also pretty simple to load the data from a server we go to our future builder and here within our future we exchange our api because this time we want to load it from the server therefore we go again to our users api and create this method get users which again returns your list of users however this time we load it from the server and therefore you need to have your json somewhere on the server for example i have stored it right now here in firebase where i have then this file this json file with all of our data or you can also have a real server and there you can also store your data and then you simply take here this link and we want to make use of it and we want to put it here inside where we want to load then our data from to load the data we go to our pop spec jammel file and here you need to make sure to put this http dependencies under your dependencies inside then we go back to our get users method and here we call then this http.get and with this one we can get then the data from the internet from this url and therefore i simply put here the url inside and like before we also need to decode send our json which we get here and we also need to convert it to a user list therefore we do here the same thing we get here the response.body and we convert it to some json and after it we simply return here the same thing like before so we convert this json data to our user objects and with this exchange of our api that's everything what we need to do here so we can go to our network tab here and then it is loading the data from internet and you see that we had here this loading indicator because he loaded it from the internet at the end we also want to look at how we can click on one of these users which we got from the json file and then we want to open a new page and display the user data here inside therefore i go here to our users.network page and here below we have this build users where we actually built here this list of all of our users and with this list star we built here each individual user and here inside you can set an on tab handler so if we click on one of these items then we want to navigate to a new page and therefore i call here this navigator and i call here push to push to a new page and here inside we need to set then a new page our user page which we want to create and here inside we put then this user object inside which we are currently displaying inside of this user page we can then receive here the user which we have passed inside of this user page and what we can do for example is to display this user directly inside of our app bar and this means that our username is here displayed in the title of our app bar and like you can see you can then access here all these fields of our user and can then build some widgets with it and therefore we simply go right now to the body property of our scaffold and here we create a column to display some widgets under each other and in our case we want to display here this image our avatar then the username and also a button to send him an email and therefore we simply create here circle avatar where we put this image inside our network image like what we also did before so you simply access here this url avatar from this user which is then this image which we load from the internet and we also give it here some bigger size and we already can try it out so we can go here to a new page and then this circle avatar the profile image is displayed on that we can also have here some space and then we can add the username so we simply access here the username and give it some text style and this will look like this and lastly we can also add here a button where we basically put here this sent email inside and then you can later add here the functionality of this button and by the way if you want to get here this whole source code you can get it with the first link in the description and with the second link you can get access to my flutter courses where i teach you how you can become a more advanced and better developer hello everyone thank you so much for watching this video please make sure to give it a thumbs up and subscribe to my channel here to get the latest news about flutter and see you soon bye [Music] you

Channel: Johannes Milke

Views: 12,134

Keywords: flutter json, flutter, flutter mobile, dart, google flutter, flutter tutorial, futurebuilder tutorial, future builder tutorial, dart tutorial, android flutter, ios flutter, flutter learn, learn flutter, flutter app development, flutter app tutorial, futurebuilder, flutter futurebuilder, flutter future widget, flutter futures, how to use futures, flutter widgets, gds: yes;, flutter widget of the week, json, future, futures, programming

Id: Rlf5q2EGHzc

Length: 11min 47sec (707 seconds)

Published: Mon Jan 04 2021

Reddit Comments

[u/JohannesMilke]

Source code: https://github.com/JohannesMilke/futurebuilder_example

Follow me on Twitter: https://twitter.com/JohannesMilke

Learn how to load JSON data from the server or from your local assets with the FutureBuilder in Flutter.