Converting JSON value into dart class objects | JSON serialization | Flutter and dart Extensions

foreign [Music] class that can be used to Serious Json values while handling API calls so whenever it comes to apa calls the data what we are going to get is in the form of Json values it may vary from a simple Json to a more complex jsrs hence in this video we will address how to create a DOT model class with the help of an extensor available in vs code and make the process even more simple therefore without any further details that is the implementation process here starting with the main.et file we have navigation to my home page and then my home page is nothing but a stateless widget class that is going to contain the app bar and the body which contains the elevated button pressed right at the center and upon clicking this button we will try to mimic the process of getting the data from the AP but we are not going to make any API calls here we try to manually mimic the process of getting the data okay so this is pretty much how the UI is going to look like now let's have a look into the Json value what we are going to use here inside the data layer we have the models and inside the Json value of the dot file we have explicitly Define the Json what we are going to use in this tutorial we have the name date of birth and we have the address and inside which we have the code that in turn contains the post record and zip code okay so this is the basic Json value what we will be using and we will try to serialize this Json try to print the data in the console okay now for this Json value let's try to create a DOT model class since we go to this homepage model the dot file here let's create accepted class called home page model that is going to contain three main attributes one is the name and second is going to be the address that is going to be the map object and finally we have the date of birth so as you can see our Json also has the same set of architecture we have the name then we have the date of birth in the same way we have the address which turn is going to be again a map object after doing so let's move on to this extension tab what you have in the vs code and let's search for DOT data class generator so this is going to be the extension that will pretty much help us in serializing the Json values and it will also make the development process even more faster okay make sure you install this extension maybe yes code now back to our model classes after installing the extension let's first try to create a Constructor for the final fields and with the help of the same Quick Fix You can just make use of the generate data class now as you hit enter so with this we don't need to write the boiler play code all by ourselves it is less error prone so you can make use of this extension and get the job done even more faster now we have the Json value as well as we have the model classes up and ready now let's try to mimic the process of API calling here all the API calls will be written down inside the repository folder and let's create abstract class called home page repository that is going to contain the method get data since it is going to be in abstract class we won't be writing the definition that is the method definition inside the class hence we'll create another class called home page repo which extends the home page repository abstract class and here let's override the method get data and say this get data we will try to create a manual delay of around 100 milliseconds just to mimic the network delivered we get typically during the APA calls and finally we make users from map of method available in the model classes so this from map of factory method is pretty much something generated by the extension itself so we make use of that method and pass in the Json value so Json value is something which you have explicitly defined in a separate Dart file so this is the Json value which will be processing into the from map of method rated by the extension itself and we'll try to return the same now inside this UI code we try to call this get data method instead of method function call we try to call this get data method which will in turn serialize the Json object now we have successfully updated the process releasing the Json value with the help of the dot model object so in order to display the corresponding data say for example here inside the Json value if you want to try display any of these values say for example if you want to try to display the ER here in the rate of birth you can do so by make use of the dot operator since the temp is going to be of type home page model we can make use of the dot operator to access the date of birth if you try to click this you see we get the data bus being displayed in order to in weekly display any of these values like the year day or month you can make use of the square bracket and pass in the key over here and this time if you try to click this you get only the day value so day value is going to be 1 so we get it spread here just the same way if you want to try to display any of these values which is placed in the nested format like postcode you can make use of the same technique just with the help of the dot operator followed by address and the code now this temp one will contain pretty much both postal code and the PIN code now in order to uniquely print any of this poster or zip code we make use of the Json encode and Json decode method just like this so if you now click this get data method you see we have the year printer which is 2021 and the postal code which is one two and three you can also check for the same here the postal code is one two three so this is pretty much how we can make use of the dot model class to serialize the Json values while handling APA calls and also at the same time make use of the extension available in vs code make the development process even more faster hope you guys found this tutorial useful if you do so consider subscribing and I will see you in the next one [Music] foreign [Music]

Channel: vijaycreations

Views: 4,971

Keywords: flutter, dart, JSON, json serialization, json object, dart model class object, dart class, dart model class, dart objects, json, api, rest-api, flutter and api calls, handling api calls in flutter, json into dart, JSON and dart, model class in dart, json serialization and deserialization, serializating json values in dart model class object, dart code for json serialization, app, dev, flutter tutorials, how to, serializing, json values, json to dart, web dev, app dev, uiux, tutorial, ui

Id: IE4MsCKchwE

Length: 6min 8sec (368 seconds)

Published: Sat Feb 18 2023