Flutter Read Data from Local JSON Files

everyone assalamualaikum here we'll see how to read data from local Json files now I have a Json file that's locally in our app now if we click the button like this button it would load the data and show on the screen just like this so let's get started well to get started make sure that in your project in your root folder you have another folder called assets if you don't have go ahead and create one and then inside this access folder create a simple.json file simple.json file and in our popspec.yml file make sure that you have the correct path over here under this assets tag now we'll take a look at our sample.json file and so this is our simple dot Json file so here we have Json and here we have a list list name is item and inside this we have Json in a map format as you can see if you don't know what is Json and map I have other tutorials check that out so we'll load this information and then we'll show them also the ID name and description on our UI well to get started here we have this homepage file which is a stateless class now inside this we have this function which is called rejson now at the top we have a list list of items because here we want to store the data that we load from our Json file so this is our Json file and the data we load we want to save it as items variable now here we created a function the function name is read Json and it is async type which means that we might need to wait to load the data now at first we would call this one root bundle.loadstring so it would load the Json as a string from our assets sample.json file so once again this one over here assets Dot sample.json refers to this path over here or the path that we have this one so it should work pretty much the same way and with this we are able to load the Json file as a string and then we save it in a variable called response and then we decode them and after that we save it in this variable now here we have a set State because we want to let the UI know that we have loaded our data and the variable items has been updated so that UI can get the latest information and display so once we call this function this variable will be updated with the Json information from here now we need to find a way to call this read Json file now to be able to do that over here will have a body section and inside body section will create a button elevated button so inside this body section we have created this elevated button and here we have this unpressed event and on the unpressed event we load this we call this function the one that we created at the top and we load the data now now let's go ahead and save it and here we see that we have a button over here which is called load Json and we can click on this but well of course nothing happens but it is true that the data has been loaded now to make sure what we could do over here we could do a print method app one more time and then we click on this and we see that number of items three so which means that this Json file has been loaded because we do see that here we have three items great so on the elevated button press we are able to load this now this time we need to show the data on the UI after this bottom click now once you click on this button we know that this item is not empty because it's loaded so we can do a conditional check if the item is empty or not if the item is not empty then it will show the item otherwise the button is still there now for this one here we do a conditional check so here we do items is not empty so if it's not empty then we'll do one thing otherwise we'll do another thing so here I'll put an expanded widget now as you can see so if the item is not empty we have this expanded widget and then we show whatever we have loaded from this items now as you can see inside the list view Builder we have this length and then while we assign the key as well as in the list style insert the card we access their ID name and description just exactly the same properties we have over here so we do the check if there is data we show the data otherwise the button is still there so what are you going to do now we're going to restart our app and we say it's still there now we'll click on this and we are expected to see that this is gone and we'll see the data now of course nothing is there now that's because we need to wrap everything inside a column widget for this reason I'm going to cut everything so the whole body section then we'll put our expanded widget or the elevated button inside this children so let's go ahead and write it one more time now it's at the top so let's click on the button and we see that our items has been loaded yes so that's how you read data from local Json files

Channel: dbestech

Views: 22,381

Keywords: Flutter Read Local Data from JSON Files, flutter tutorial, flutter read json files from assets, flutter get local json data, flutter fetch data json, flutter get json data, flutter json listview, flutter json api tutorial

Id: tgvfhWqS39o

Length: 6min 28sec (388 seconds)

Published: Fri Dec 02 2022