Flutter Tutorial - Convert JSON To Object & Object To JSON | JSON Serializable

creating the two json and from json methods manually for all model classes in flutter takes a lot of time therefore we learn how to automatically generate and flutter the 2.json and from json methods with the package json serializable if you're new here subscribe to my channel and make sure to watch this video till the end first of all go to this json serializable package and now we want to install it therefore go here down to the setup section and click here on example here inside you scroll then all the way down until you come to this part and you can basically copy here the dependencies after this go to the pubspec journal file of your flutter project and here under your dependencies you paste in this json annotation inside and under your def dependencies we include here then the build runner and json serializable and lastly we need to follow three simple steps to automatically generate the two json and from json methods within our model class let's simply go along with the documentation therefore click here on lib example dart and then scroll a bit down and here the first part is to annotate each of our classes with the json serializable and we also need to import here this json annotation at the top so that here we have no error anymore and lastly we need to include then this part at the top of our model class so here i create them this part and you need to make sure that this name has here the same name as your file name and exactly a file with this name will be later generated and this g stands here for generated and within this generated file d2 and from json methods are later than automatically generated for us let's go over to the second step where we need to create then here this new from json and 2js method so basically copy here this inside of this file and then we use here instead of the from json and 2js methods that we have created manually before simply here this new syntax also make sure that the three names here within the statement have the same name as your class name so in case your class is called here user then we also have here every time user inside and lastly for step 3 we want to generate our two json and from json methods within this file here but before we generate this file make sure that you have your new errors within this file so here this error is fine and also these two errors that you have here within these statements are also fine and now we can go over to the last step to call here this command within your terminal to actually generate then this file simply go to the command line or terminal and make sure that you are here within the flutter project inside and then we can run here this build runner build command that you have here inside of this documentation after some time it should say then here succeeded with some outputs and these outputs are then our generated file so here we have then this person g dot generated and also your model class file should not have here any errors anymore let's now try it out within our main page so here i create an init state method and here i create then this person object that we have before created and here i call them the 2js method and the from js method and print it here every time to the console and now after a hot restart you see here the json that was generated out of our person object and secondly we have also created out of our json again a person object with this line let's also have a look at if we later change this model object so if you create any changes within this model object then you need to call every time this command again within your terminal so you write again flutter packages build runner build and execute it and with this the new model object will be then here updated in my case i want to show you also how you can add here a nested object so the address is another object that you also have and here you need to do then the same thing to make it work so you need to include here this json serializable this part object and this import and you also need to include here then the from json and to json and make sure that the name is your every time address because now we have here this model class address and lastly you need to go back to the person class and here within this json serializable you need to include then this explicit to json to true and this is always needed if you have within your model class another nested model class and this explicit to jason makes ensure that on the address the two json and from json methods are executed after this go back to your channel and run this command again and now it should say here again succeeded with some outputs and the output is then our generated address file and lastly after we have hot restarted our application we should here see within the console our json with the address object and also if we call again later this from json method then we get also again back the address object and one important advice if you face any issues with this generation then make always sure that you save the file your model classes that you have changed before you call them this comment so save your files and then run this command again and then everything should normally work fine and by the way if you like this video make sure to subscribe to my youtube channel you

Channel: HeyFlutter․com

Views: 37,303

Keywords: complex json parsing flutter, flutter, flutter build runner, flutter for beginners, flutter json, flutter json model, flutter json parsing, flutter json serialization, flutter model, flutter model classes, flutter models, flutter tutorial, flutter tutorial for beginners, json, json annotation flutter, json parsing, json parsing flutter, json parsing in flutter, json serializable, json serializable flutter, json serialization, json serialization in flutter

Id: v5xGLrhzDGE

Length: 5min 45sec (345 seconds)

Published: Mon Jun 21 2021