Flutter - Convert Complex JSON to Dart Classes Easily | JSON Serialization

[Music] hey hello friends and welcome to retro portal studio and in this video we're going to be taking a look at converting your json data into dart classes in a simple way to create a simple application in which we get the data from the server and we have to display that data into a list view or some other kind of widget we have to do something like this we get the data from the api in the form of a string of json and then we decode the json by passing in the string and then this json decode function gives us with a map of string dynamic now what we have to do is we have to convert this map of string dynamic into a dart class so that we can easily use the properties and pass them to the list view or some other widget that we want to display on the screen the problem that i'm going to address in this video comes at this part right here where we have to convert this map of string dynamic to a dark class and then if we have to create a post or put request then we have to convert the start class back to an object of map of string and dynamic so to do this kind of conversion what we have to do is we have to create some functions which look something like this so this is an example of a user class in which i have these properties and a simple named constructor and here i have to create this from json and to json function what i have here is a factory function called from json and this function is used to get in a map of string dynamic and then convert that into an instance of this user so the other function of 2json converts this user instance to an object of map of string dynamic from this you can see that just for the conversion of this user class to and from the map we have to write a lot of boilerplate code and this is exactly the problem that we're going to address in this video here i have a json array in which i have multiple user objects and each user object is a complex object in this there is an object of address in which there is street landmark city and state other than this there are other fields also like name phone email and subscription so to use this json as an api response in my application what i've done is i've created a constant in the main.dart file and i've named this nested json and this nested json is basically equal to the json that i just showed you and this json is in the string format like we received from an actual server to use this nested json what i've done is down in my home page i have created a function called getdata from fake server and this function basically mimics the behavior of when we get the actual data from the api so in this function i have this feature which creates the delay and after the delay of two seconds i use the function of json decode and it decodes the nested json and then converts it into a list of dynamic because the json that we're using is basically a list or an array of objects when we get the list of dynamic we name this data and then we use the data to map through each and every entry and then convert that into a user object using the user.fromjson function and then finally we convert this to a list and then return this which then further is returned by this getdata from fake server after a delay of two seconds for using this function i'm using a future builder in the scaffold and here i'm passing in the future of get data from server and in the builder i have this list view which takes in the data and then displays that to the user and if we take a look at the emulator you can see that i have these four entries and when i click on the entry it displays the address of that entry so if we come back to the user class what we have to do is we have to remove all this boilerplate code and we have to create something so that all this code gets created automatically for this we have to use a concept called json serialization and for that we have to add a few packages the first thing that we need to do now is we need to go to pubspec.yml file and under the development dependencies we need to add two packages which is the build runner and json serializable and along with these two we also need to add a dependency that is going to be of json annotations while adding these dependencies you have to keep in mind that the build runner and the json serializable have to be added to the development dependencies and the json annotation needs to be in the dependencies section once these dependencies are added you need to click on the pub get and download all the dependencies once this is done you can close the postback.tml file and now what we need to do is we need to remove these functions from the user class instead what we need to do is we need to add an annotation in top of the class and that is called json serializable we need to add this annotation because only with the help of this build runner and json serializable are going to detect this class and they're going to use the template functions which we're going to create and then they'll create the actual functions in a different class once this is done we need to define some templates so that the build runner and json serializable can create actual from json and two json functions for us the first function is going to be a factory function and that is going to be for creating a user from json so for that we can write user dot from json and we can pass it an argument of map that is of type string comma dynamic and this factory constructor will return another function that is going to be created by the build runner itself so for that we have to pass in a template that looks something like this underscore dollar and here you need to pass in the class name with from json and in the brackets as an argument of the function we need to pass in the data now the second template function is going to be used for creating a map object from this user instance so for that what we need to do is we need to write map because this function is going to be returning a map and this is going to be of type string comma dynamic and we have to name this to json and this is going to return underscore dollar user because this is the name of the class and two json and as an argument we'll pass this instance of user once we have defined these two functions we need to do the same thing for the address class also in the address class what i'll do is i'll cut these functions from here and paste in the template functions and here instead of user i need to pass in the address class and here i'll replace the user with the address along with these templates we also need to pass in at the rate json serializable along with these functions we also need to pass in the path in which the build runner will create these functions for us so passing the path what we can do is we can write part and in the quotation marks we can write address dot g dot dart one thing that you have to keep in mind that the par file name should exactly match the file name in which your original class exists for example in this case the address class exists in this address.dart and the part file name should be address.g.dart now we need to do the same thing for the user class also and in the user class i'll mention the part file and here i'll pass a user.g.dart we have the setup done but there is one little change that we need to make because the user class is having a property of address which is another class that we created that can be converted into a map of string and dynamic we need to add a bit of change to this json serializable annotation and here we need to pass an explicit to json and set it to true we need to pass in this property if the class that we're going to serialize contains another class instance that can be converted to and from json at this point what we need to do is we need to run the build runner and what the build runner will do is that it will create the dart code for us automatically and what the build runner will do is that with the help of json serializable it will look at the annotation and it will take in the user class and the address class and we'll take a look at these template functions and create these functions in a file called user.g.tart so for running the build runner what we need to do is we need to go to the terminal and type in flutter pub run build underscore runner and pass in the flag of build once the process completes you can now look at the files here and you can see that along with the user.dart there is user.g.tart you can see that this is a part of user.dart and here are the two functions for which the templates we defined in the user.dart now you can see that if we had a large class in which we have multiple properties we can easily define these template functions and with the help of build runner and json serializable we can create all these from json and two json functions easily i hope you find this video useful and if you do please make sure to hit the like and subscribe button and make sure to support me on patreon for more flutter videos coming your way on retro portal studio see you next time [Music] peace

Channel: RetroPortal Studio

Views: 33,668

Keywords: flutter, flutter tutorial, flutter tutorial for beginners, flutter for beginners, flutter ui, flutter json parsing, complex json parsing flutter, flutter json serialization, flutter json, flutter json listview, flutter build runner, json annotation flutter, flutter app, flutter mobile app development, flutter widget of the week, flutter development, flutter android studio, json parsing flutter, flutter mobile app development tutorial, json flutter, flutter app development

Id: 8fFoLs9qVQA

Length: 8min 40sec (520 seconds)

Published: Sun May 10 2020