Flutter Convert JSON to Dart Model Classes

hello guys and welcome to coding orbit in this video i will show you how to convert json to a dart model and vice versa how to convert dart model to json now we're not going to use the emulator since we don't have anything to show on the screen however we will keep it running to test the application now i have already created a file called response that has a json object it's a user inside it we have user id name email phone and status is active and i've already created a user model also so let's get started alright there are two ways to convert json into dark model the first one is to do it manually so we will create a method called from json and we will convert the json to a dart object so we can say factory user dot from json and this method takes map which is string and dynamic and let's call it json and this returns a user object so we'll return a user inside the user we will have user ide and we can say json then square bracket and user id now this is case sensitive so whatever response you have here you must copy it and paste it here so after the user id we can have name which is json name and we can have email which is json email and we can have the phone as well json phone and finally we can have this active which is json is active and semicolon here now we can also create a method to return from dart object to json so we will create map string and dynamic string with capital s and let's call it to json this doesn't takes anything however it returns a json.json so the json is the first name will return the actual name and user id which will return the current user id and phone which will return the phone and email that returns the email and finally is active that returned the current is active and semicolon here all right this is the manual part so let's go to the main and test it i've already created a method called get user it takes build context however we might not use it but i will keep it so now first thing we have to do we have to extract this json response into our code so i will create final let's call it file is equal to root bundle since we have it here dot load string and we have to give it the key so the key is json slash response dot with the semicolon and we have to await this so let's add a way right after it let's create final json and let me give you a little bit of space all right json is equal to json decode and we want to decode this file and that's it now let's try and printing this json and let's save it and see if it's printed or not all right it does print it all right now we want to cast this json into an object so after print json let's create a user and let's call it user is equal to we want to have a user model from this json so we would say user dot from json this method we've created and we will send the json however since this response has user then it has the user object so we would have to specify this here we would have to say user here so it actually takes these it doesn't take only the user now if we try and print anything from this user let's try print user dot anything email for example and let's save it now to see if it works okay i have closing closing parentheses here now let's save it and see if it printed and it does print it all right now moving to the second part of this video where we don't create it manually and we make a library do the job for us now inside the json folder i've created two response the first response is the one you've already seen and the second response is a complex response is actually the same as before but it also has an address and this address is also an object so we will create a model for this but we will not create from json and to json like so we will actually install a library and then it will do these functions for us all right now to install the dependency we will go to the browser and we will use this library however this time we will not copy this line and put it and pops back to tml we will go to this link and we will copy this line and put it after dependencies and pops back to tml so after capertino icons paste this and then go back to here and copy these two and after flutter sdk put this and take this like that now click public get and let's wait for it to install them all right now let's minimize this and kill the app and the close popsicle.cml and go to the lib right click it and new new dart file and let's create a class called complex user and this complex user is a class now inside here i would actually copy everything from here and put it here now this time we will also have final address and let's call it address and that's it we'll create another class for the address dart file and let's call it address and let's create class address now inside the address for the response and the response we have street area and postal code so let's create final string street and area and postal code now click here and create constructor and let's have them all as required and name parameter so i will paste this here and paste this here and i will add d for both of them all right now let's go here and import the address and create the constructor and i will also have it as named parameter as well and let's add required here as well now let's copy this and put it here and here and here here and here all right now our next step is we actually have to come here and put add then type json it's realizable and since we have another object here inside here we would say explicit to json and set it to true sorry okay now we will do the same for uh the address so we will come here and would have add json serializable and we don't have to specify anything here now as you noticed postal code is different from the postal code here here it has under school and in the address it doesn't have underscore so to fix this we have to have here add json key and in the key we would specify the name the name is postel code now we didn't specify any name for any for the others since they are they match the response here the same response with the same attribute name all right now our next step is we'll come here and say part now would specify the file name address dot g which means generated the dart and after the address you know in the user we've created the user ourself however this time we will not create it ourselves we would just say factory address dot from json and this also takes a map string dynamic let's go to json and this time it returns dollar address you should have it the same name of the object address and capital from capital json and send the json here now to json is actually the same map string dynamic and let's call it to json it doesn't take anything and we have to have dollar address to json and we have to send this object so we'll just say this and we will do the same for the complex user so i will just copy them and change the name i will go to the complex user and after the constructor i will just change the name so we will change it to a complex address instead complex user instead of address and i will add the part part here is complex underscore user dot g dot dart now you should make sure that you have no errors here except this is three the part and from json and to json now we will go to the terminal and we would actually type package we'll type this command flat our packages bob run build runner and click enter now it would work and it shall give us a successful output so let's wait a bit for it all right it finishes up and as you can see it has succeeded after 10 seconds with four outputs but as you can see we still have error that's because i forgot to add underscore before them so when you add underscore here it will work we'll go to the address and would also add underscore with underscore here now if we go to any of these command clip it or ctrl click it on windows you can see that it creates the from json and to json for us and you can see it takes the postal code the json key we provided now we will go back to the main and we will try to make this work so let's create final and let's call this response is equal to await root bundle dot load json load string and i will just copy this paste it here and change it to complex response all right now final json json2 for example is equal to json decoder the code and the response now let's print the json2 to see if it works or not json2 and save it okay we have to run it so let's run the app and see if it will print it or not all right at first to print the first json which is this response and then it prints the email and finally the print the other json so now let's convert this json into a model so let's create final complex user is equal to complex user but from json with json2 and we have to specify the user as before and semicolon now let's try and print the complex user.address for example. post that code and let's save it to see if it works or not it does work as you can see the personal code here it extracted it and we are having the postal code now we haven't tried to json so let's also try print complex user.2.json since we've already having a complex user object so let's save it and see if it works and it does work as you can see it converted the json the object into adjacent so that was all guys thank you for watching and if you haven't subscribed yet and you like the video make sure to subscribe and turn on the notification bell so you don't miss our content and see you in the next video

Channel: Coding Orbit

Views: 15,435

Keywords: flutter, flutter tutorial, flutter json, flutter convert json to model, flutter json tutorial, flutter how to deal with json, flutter convert json, flutter convert json to class, flutter consume json, flutter classes, flutter how to convert json to model, flutter how to convert json to object, flutter parse json, flutter json parsing, json to dart, flutter json to dart, flutter parse json to object, flutter json serializable, json serializable

Id: GiKOfdoD6R8

Length: 13min 32sec (812 seconds)

Published: Mon Dec 20 2021