# Google's Flutter Tutorial- Easily Parse Complex JSON, Create JSON Model Classes, Show in ListView.

hello and welcome back to on the flutter tutorial in this video I am going to show how to price complex days and into Tarte model classes easily without using any kind of generator libraries so that means there is absolutely no skill needed here to generate dark model classes using this method so let me show how to do that here we will be pulsing it Jason then they are decent models and then show the data in a list view okay so let's start so this is my main road art file where you can see I have set an empty container with white background as the home of the middle lab okay so let me create a folder I'm going to name it easy Jason paths and a file this entice demo dot dot import the material package and create the class which extends statehood widget and a constructor since it is a stateful widget we need a stayed so class this in parsed demo state extends state this in past demo overwrite the bill mattered so let's go down a scaffold with an alpha let's set that height alas Jason poise demo okay under on the stage now let's go back to the main rotor file and replace a home with the class decent pass demo so let me import that so set it as home okay so there is a screen alright now let's go to the internet and catch some free service so she go to this and placeholder dot type calm let's wait for it to load so if you scroll down you can see some of the sample services so I'm gonna use this one here you will get 10 user accounts ok next I'm gonna open on the website called a broad cube type dot IO so what this website does is it can generate Jason model classes from the Jason string you provide ok so make sure you have selected Jason and your language so here we will need the dot and Jason ok let me place the Jason strain now you have to give the main class name so I'm giving it as users so you can see the model classes has been generated so let's copy that and go to our editor create a new file I'm gonna name it uses dot dot and place it there ok so that's a motor class for other entire Jason ok so that's how you can use it so ok as you can see or classes has been generated right you have address so what we'll see is passed as parameter for the constructor for each user so you can see until easy Nestor Jason inside a user account right so let me change that to user since it is these user record right ok so that makes sense now let's see the other parameters so first one can see ID name username email address you can see address has a separate class and if you go inside a dress can see the deal so that is another class okay so deer doesn't have any nested class now you can see the company nested days huh okay let's see where it is being used so it should go inside each user so you can see that's a number readable okay so the thing is properly arched right now so how main part is done now let's create a new service call that URL get a data and parse it using these classes and show it in a ListView okay so let's write a service class so I'm importing the HTTP package so make sure you add it in the pub spec toriyama file okay so get the latest and add it and sorry I forgot one thing so once you add it you should call the clutter packages get okay so that will download the package and add it to your project right okay let's create the class services and static constant stream URL so let me grab the URL okay now let's write a method to get the data I'm gonna call it get users so that's going to return list of users and this is going to be Ana synchronous per third and we need a try-catch here so if there is some exception I'm gonna return an empty list of users but in real case you need to catch the arrows and put on the appropriate error okay so I have made a video on how to properly cache errors in flutter I'll be providing the link to that video in the description or you can just click the I button on the top right of this video to watch that okay so let's get the data from the URL but you can see that there is some error right that's because it's an a synchronous mother and we need to return a future so future list of hisses all right now there are Islam now let's get the data so final response is equal to a wait HC DB dot get and the URL okay now we have the response and we are going to check if the status code is 200 then we are going to parse the data right so for parsing the data you know that so that's another unity us right so call that occurred with the base and string so that will be a spawn start body and return the list of users otherwise we'll just return an empty list of users okay now let's implement this mother so let us go back to these days and polish demo and import the services and we are gonna need the users as well and let's create a variable list of useless and override the unit state okay so we need one more beautiful loading to indicate the loading so I'm setting it it true and called the service target users so that's going to return the list of users right so the value will be users a list of users am i sending it to the low key variable and setting loading to false so it is loading I'm gonna say loading otherwise we'll just say uses okay we start app okay now it's showing loading all right now let's create the body which is a container with background color white and a child which is a less fuel unless we dot filter with a context and index for the item builder and we need to return the row from here the list beautiful okay so let's get the user and we're down a list I'll this guy and we'll have a title so title let's set it to user dot name we can see that each user has the name email right so subtitle will be user dot email okay I forgot to set the item count so I can count will be so if the users are now it is set to 0 otherwise its users dot length okay alright so we have properly parse adjacent and set it to the list view and we forgot to call this set side here so let's put it inside said state okay now it's loading properly cool so if you go to Internet and a search for Jason to dot you will get so many links that are providing this service from converting Jason string to dark glasses so you can use any of those whichever you find comfortable with okay these kind of services makes our life much easier right so make sure to use those that's all in this video please give a like if you find this video useful one like and share is a big support for me to grow this channel please subscribe and hit the bell icon for notifications thanks for watching and see you in the next video until then bye

Channel: Mobile Programmer

Views: 49,271

Keywords: flutter tutorials, flutter ios, flutter parse json, parse complex json, flutter android, flutter ios tutorial, flutter android tutorial, flutter coderzheaven.com, mobile programming, mobile programmer, flutter dart, google dart, flutter examples, code dart, complex json parse, gson, json programming, cross platform programming

Id: wc8ecFSu5N8

Length: 10min 52sec (652 seconds)

Published: Wed Mar 25 2020