Flutter Tutorial: JSON Serialization in Flutter | json_serializable |

hello guys welcome to the channel in today's episode we'll explore the topic of Json serialization in flutter using Code generation Json serialization is essential when working with apis and exchanging data with a server by leveraging code generation we can automate the process of converting Json data into Dart objects quickly and efficiently so let's dive right into it so create a flutter project in a separate folder with homepage on it then edit the main. dart file and load your homepage as shown in the video this is the Json file that we are using for this tutorial it has a ID name email username and also has a nested objects like address and Company with its own unique keys and values and many more as you can see in the video so we will also access these nested Json objects and generate a serialization code for them now create a new folder named models as we are generating a code for main user class and two other nested Json objects that is address and Company inside that folder create three different Dart files first file is user model. Dart for user class second file is address model. Dart for address class and third file is company model. Dart for company [Music] class once again let's see the Json file and remember the keys like name email address has Street City and company has name catchphrase Etc and create a variables for these keys inside the individual class let's create the user model class and its [Music] variables [Music] Also let's initialize these variables in the [Music] [Music] Constructor here address model and Company model are the nested classes object that we will create after this this is the way that how we access the nested Json objects let's create a address model class and its variables and also initialize it in the Constructor same as like in the user model [Music] class now create company model class same like as other [Music] classes [Music] let's import those address model and Company model class in user model class so we can use them now let's add the dependencies to our project first is Json annotation then Json serializable and last build [Music] [Music] Runner let's reload the project after adding all the [Music] dependencies now let's write the Json serialization code generation [Music] part first import the Json annotation and then make a class Json serializable by adding Json serializable at the top of class name after this by using Factory we will create a two functions called from Json and to Json which respectively translate a Json to our [Music] [Music] user [Music] this user from Json and user to Json will be generated by Json serializer when we run build Runner but first let's write this small line of code on top that will be generated after we run the build Runner it says that the generated file is also a part of this user model file and repeat the same process with other two classes importing Json annotation making class Json serializable creating from Json into Json functions and the line of code for generated file [Music] name [Music] [Music] down [Music] [Music] after making all the model class Json serializable let's write a command in projects terminal to generate a Json serialization code for these model class cles it takes some time to generate a code [Music] the code generation is completed and after this we got three new files with g. dart on its name and all the errors on our model classes are [Music] SOL I am using to string method to access all the model class variables at once and same goes for other classes [Music] too [Music] [Music] now let's consume these Json serializer visible models by using HTTP package using a HTTP package is a different part and it will take long time to explain in this video so for this video I will provide a source code you can also find this HTTP part code on medium article where Json is serialized manually but using HTTP package part is almost same I will also provide the link of that article so you can understand more we can see that the Json file data are rendered on the screen you can see it's the same Json file with the name address Street Etc thank you guys for watching the video hope you got some idea about the Json serialization using Code generation feel free to ask questions in the comment [Music] section

Channel: Roshan Lungali

Views: 229

Keywords:

Id: PxkCCIqzPHw

Length: 11min 6sec (666 seconds)

Published: Fri Nov 10 2023