Display Data From a JSON in Flutter

hello everyone in today's video we're going to be creating a ListView which is going to have certain notes and then we're going to fetch those notes from adjacent and then we're going to display them in our app first let's start out by building out our ListView okay and now in the item builder we're going to build out how our list items are going to look like we're going to have a card which is going to contain the title and the note itself okay we have a card which has a column which contains two text widgets they don't title in the note text and now let's run the app and then we'll tweak it a little bit okay so here's our app up and running and what I want to do is add some padding to this this whole column basically to make the card a little bit bigger and also I want to make the title bigger than the text and also not to have them centered but you have them to the left over here so let's first add some padding okay now we have a little bit more room to work with now let's change up the font size of the note title okay now our note title is bigger than our note text and what I also want to do is make this no text gray and not black just to emphasize what is bigger of a priority what is more important so let's do that real quick okay I think this is too light of a shade of gray so let's add a little bit stronger shade let's go for 600 okay I think now this looks good and I would also like to add padding from the top to be 32 from the top and from the bottom to be 32 and from the left to be 16 and from the right to be 16 okay let's save this now okay now this looks like more of a big card or whatever and now let's uncensor this text okay and now we positioned our notes title and no text to be to the left using the cross axis alignment attribute of the column widget and that's pretty much it I think now we can move on on fetching the data from quote/unquote REST API and then displaying it over here okay so now we should create an entity class this is going to be converted from our JSON and then our UI will be able to display I mean technically it can display directly from a JSON but this is a more cleaner approach okay so let me create a new folder over here which named entities and I'm going to create a new file and I'm going to call it no 2.2 dart now let me create a class note which is going to contain a title okay let's also create a constructor for our note class and let's also create another constructor which is going to be used from converting our adjacent to our note and here we are passing in our JSON as a parameter and the reason why we're passing in math as the constructor argument is because when we use the HTTP dart package it converts the JSON string to a map and that's what we're using to convert it to a real world object and I will just return a note and in the constructor we're going to pass in the members from this JSON thing and now we're going to set the title and the text to be from this JSON object and that's how we convert adjacent to custom objects we create okay and now we need to fetch this data so here we are in our home page state class and let's create a future basic method which is going to be fetch notes okay and we also have to import the HTTP package so this is an external package so we need to have a couple more steps than just importing the package here's the pub page of this library and here we go to the installing tab and just add this as a dependency to our flora wrap we go to pops back down TMO here we have dependencies and just do that save the file and it should automatically run flutter packages get if it doesn't then you would have to do it on your own from the command line and now we close this and now we can import our HTTP package okay so now that we have our HTTP package we can finally make HTTP requests okay so first let's initialize the URL we're going to be getting the JSON from ok and now we can get the list of notes using the HTTP GET method okay and now here's still we didn't retrieve the list of notes but we just got a response from our HTTP request and now we can check if our HTTP request succeeded if the API returned a 200 response 200 basically means okay everything was returned properly and it's not responsible to response on status code and if it was then we can continue on now we can get the notes from this response since we know this is going to be a Jason we're going to use the JSON class to decode this response body into a map and now let's import dart convert in order for this to be available and now we can go through each and every one of these nodes and that is to the notes list so okay here we have our list of notes that we're going to return and I also need them to add this list of note over here and then we're going to fill this list of notes up here we're using our from JS method that we created earlier over here and now I think that's all we can return this notes and we should also have a note field which is going to be used to represent all of these notes over here so let me do this real quick who's going to be used to represent the notes in the UI and let me now change up our list view to be rendered from our list of notes and not just to render a random text so let's go notes at index dot title and notes at index dot text and also we need to fill up this list which is connected to the UI so let's do that we're going to do that in the build method and we're going to call our fetch notes and we're going to call the Dan method value and we're going to go notes done at all well and I think this should be it let me save this and yeah yeah I forgot to set the item count for the ListView to be no startling save this right now okay we got a problem okay and I forgot to call the set state method in this notes not at all but I think now we're fine and let me save the app and it should work and probably it's not going to I need to hot restart so let's see it just works okay now our app is fetching from this JSON but the problem is we have one two three four five six seven eight notes but it continues on repeating and repeating and that's because this is in the build method and it shouldn't be in there but we should be setting this in in its state because the old method is getting executed over and over again and that means we're fetching all of these notes over and over again so let's move this to in its eighth method okay and as you can see we have over it in this init statement and now we're calling our fetch notes over here so let me save the app and see if anything changes over here as you can see nothing is changing but that's probably because the ListView was already populated so let me cut restart the app and see if this changes it and now we have only eight notes and I think we succeeded in that and they think that's pretty much it if you have any questions let me know in the comments like the video subscribe to the channel and all that good stuff I'll see you next time

Channel: Programming Addict

Views: 120,813

Keywords: flutter sdk, google flutter, flutter tutorial, flutter widgets, flutter tutorials, flutter app, flutter app development, flutter apps, flutter free tutorial, flutter android, software development, programming, programmer, flutter mobile app, learn flutter, dart tutorial, flutter app development tutorial, flutter json list, flutter json listview, flutter list, flutter listview, flutter json data, flutter display json data, flutter display json, flutter sdk tutorial

Id: Fo04xk9gIFo

Length: 7min 11sec (431 seconds)

Published: Fri Feb 01 2019