Flutter - Handling Nested complex Json Data || Modal Class creation || GetX API Integration #32

so hey everyone welcome again on their wish Tech Channel and in this video we are going to work on the API integration of the category page and I'm wishing you a very happy New Year in advance please don't forget to subscribe the channel like the video and share the video to your friend it highly motivates me to make more videos because you're one subscribe or like can motivate me more okay so the agenda of this video will going to be like integrate a category page uh API and the API uh the kind of data we are getting here is like an estate object so we have a main object inside the main object we have a data and then we have a array of again Sun object and inside object we again have a list of some nestic object and in that also we have a nested objects so this video will be very helpful for those who don't know how to handle list of object or nested object kind of API response okay so in this video I will go in very detail we will create a model class we will uh just uh try to make the API call and get the data so yeah this video will be very fundamentally uh very helpful for those who don't know how to integrate a very very complex uh Json data with the uh with the flutter so please watch the video very carefully it will highly um uh explain you that how you handle this kind of data and yeah if you like this video so please don't forget to subscribe the channel like the video and also share the video and do comment on the comment section as well okay so let's go so let's do the integration first thing first we need to create a model class for it so I will go here in a categories folder what I will do I will create a new folder called model and let's create a model Clause Main category model dot dot okay and the data we are getting from the postman I just copied it and as you know that we have a quick type okay so I just had to paste the data format like we are getting array of data and it will create a model class for us okay so what I will do I will just do the copy and pasting thing and I came up with a simple solution okay so first thing let's ah Let's uh create a separate model class called leaf category model okay I just wanted to explain it clear than the last name so first thing first we will going to get a Leaf model class okay that is a model class for this particular object okay so this this uh this is a model class for this particular objects so so that I will put inside a leaf category so this is our first model class I mean uh whenever you create a model class just create a leaf object so okay so so if you have an estate object so don't create model class from the top order just create from the bottom order so like first those of create a model class for those objects who don't have a child object okay so this is the object who don't have a child object so I will put it inside a leaf category okay and so this is our child model class for child object and I will put as a required both are the required parameter even the ID is required okay uh whenever we put a data on uh mongodb it will generate a automatically ID for us okay so this is our leave category okay and uh the second category will come is the sub category so let me create a sub category remember what I did and just restructuring the code so it will be more understandable and reusable and that's why I'm explaining it okay so we got a code I mean we got a core model class from here and we had restructuring it second thing is the subcategory we have lot of thing in a sub category I will just going to copy the code okay and put it on a subcategory so what is the subcategory it's uh it's a parent I'm of the uh I mean it's it's kind of parent of the leap category is a parent of the subcategory okay so it's a one one level up object okay it's like uh suppose we have a three level so this is our parent category we have a sub category and we have leave category so it it was a leave category and its parent is a sub category we already uh had a discussion on it okay I will put a required all over the places as of now because we the name is required image URL is required expandable or not it is required expanded or not is also required lift category is also required Okay so ID is also required and uh yeah here we are using a lift category model class which we created over here so I just had to import it so see this is a kind of a beauty okay it is kind of beauty that once we create a live model class now when we go upper level then we I mean uh we haven't got any complication because we already created a leap category okay so this is a upper level model class and now let's come to the main category that is the final level model class okay so in the main category what we have is uh what we have is this one so if I will go here and if you forget about this thing okay so so let's do one thing uh let's forget about this thing as of now okay and we will go one level up so let's let me create a main category model dot dot okay as of now let me put as a name one okay because I already have the name and uh we had a separate file for this object and we had a separate file for this object similarly let's have a separate file for this object okay so this is our main category okay so this is our main category and this is the class for it okay so this is a main category class okay let me put inside the main category and let me change the name to the main category model okay and we have to change the name of this thing and remember all the thing are required so let me go on a main category this is required it is required required I'm just doing it very fast forward because I already explained each and everything that's why I am not explaining all the thing again and again and we don't need this and as just like uh in a subcategory we use the leaf category okay similarly we will going to use a subcategory in the main category model Okay so let me import it okay and also we need to change okay let's not use model because we are using just a name so instead of data now everywhere I will going to use main category and we don't need here okay and let's change the name here let's use as a super category and let's change the main category one to main category okay huh so in a super category it's it will going to be super category so let me change every name super category super category this thing are the my head so it will start from s okay and uh this dot data and it will going to be a main category might be you are thinking that what I am doing here but I am going to explain you just don't worry and it will going to be a required keyword so we this restructure our model class okay why I created the leaf category because leave category is the leaf object okay so the first thing we need to create is the leaf model class so once we created a leap model class over here okay we just had two thing over here name and the ID barometer so these two things we have and we are mapping into the normal dot object okay so once we created a leap category the next thing is we have to go up so this is our Leaf object and now we have to go up what is the object is subcategory that is the second level uh model class so once we go on a sub category model class then you will find we have multiple parameter okay we have ID we have name image URL expandable expanded and even the leaf category okay so we are mapping everything right even the leave category and adds leave category was a array of leap model class that's why when we initialize it so everything everyone have a data type string or pull okay but when we call a leaf category it have a list and type of leave category model class which we just created Okay so now inside a subcategory we are using a lift category because this was our Leaf object and once one level up we have a subcategory model and subcategory is using the leaf category in Array format that's why as we are mapping a Json object into the normal dot object so that's why everything doing here okay so we are initializes as a array of leaf category okay once we will go up okay so once we will go up from this sub category we will find our main category and inside the main category only we are using the subcategory so if I will go on a main category every rest of the thing we are mapping over here and we are using a subcategory over here okay so main category is using a sub category and subcategory is using the leaf category in Array format okay so that's why the whole mapping thing is working okay and why we have a super category so so this was our main category object okay and about this main category object okay so if we add multiple data like I have added multiple data in our database this data is kind of a super uh super object okay and inside a super object in a data what we are doing we are using the main category model class okay um so in a super category if you go we just have a one thing called data and the data is a uh is a list of the main category and everything is working fine I guess I am not convincing you suppose this is our data so this is our super category okay inside the data we are using list of main category so main category is list like this okay so it's list of main categories suppose these are the main category instance okay and inside the main category we have multiple thing we have uh name we have description in sorry we have everything okay and inside this thing like this will going to map to the actual value whatever we have mean or something okay so it will map to the actual value and inside the main category we have one thing called subcategory okay and inside a subcategory we have array of subcategory okay so I guess you are getting my point okay and inside the subcategory we have a leap category so this all the mapping will done by this okay uh and let's let's not confuse here I guess you have a good under uh good knowledge about the model classes if you don't have then please watch the model class series I have created you will find the link in the description okay I tried to simplify it so now after creating the model class the second thing we need to do is we need to create a controller okay just like we created uh on the product detail let's create a controller the controller name Will going to be category controller again so category controller dot art and it will be a class category controller we will use gatex controller over here to inherit all the property of the gatex controller okay and it have the on it method we already talked about the onit method and the next thing is we have to create a placeholder okay and the placeholder will going to be again a data okay so and the type of the data will going to be a super category so I am going to create a super category okay and let's name it as a data okay and let's slice as a undefined and all and what we will do over here we'll write a function and that function will going to invoke the API called the gate API call of fetching the category okay so that function name Will going to be switch Curry okay and as you know that uh we will going to use uh our own http package a network Handler we already created a network Handler dot gate metered okay and here what we need to do we need to provide a endpoint and token as of now we are not passing a token because we don't need it because without authorizing to the app also we can face the category details okay here we just need to provide a actual uh API endpoint so this will be at API endpoint okay and that's it and this will be a sync function okay we are seeing function because we are making a network called and we should uh await for it because it's it's a promise or a future you can say and because of that it will be have some kind of delay to face this data because we're making a API call that is basically internet call so take some time to face the data okay so here what we need to do is applicating this response the first thing we need to do is we have to create an instance of the super category so let's work on this super category and we will call it as a local okay or else we can do one thing we can just directly assign the value which we've created over here to the super category the next thing we need to do is every model class exposed to function the first function is two Json and second function is from Json two Json will be useful at the time of sending something from front end to the back end and from Json will be useful when we get data from the back into the front end okay and now here we need to send a data in that data we're going to be the response which we are getting Okay so here the response which we are getting it is in a Json string the first thing we need to do is we need to convert it into the normal uh normal Json format okay so for that what I will do I will use json.d code okay first we need to import the Json then we will use decode okay and just pass the response dot data actually response.data only same time I'm working with the react and that's why I got confused sometimes that it will be a response to our data or response dot body it will be a simply response because we already sending a response.body from the network Handler Okay so it will be like this now we got a data in a response and this response will convert right from the Json string to the normal and yeah we are doing the right thing okay so now once we will get a super category then we can use this super category in our UI the first thing we need to do is let's create another variable a Boolean variable it will be RX Bull type because we we are creating a Boolean variable and the name of this will going to be loading okay because we wanted to show some kind of uh circular indicator at a time of fetching the data OK and initially it will be false dot obs and yeah here we can just call this loading as a true and after fetching the data we can say that loading is not false and we need to call this method which we created inside the onit method okay now we are ready to use this API in our uh product detail I mean on the category page okay so here we need to go in a categories.dot the first thing first we need to just create a controller instance call category can controller we will use gatex first we need to import this gate package dot put and we need to provide our controller the controller will going to be a category controller which we just created now after getting this thing what we need to do is uh we will not going to use a column I mean we're going to use a column but we will wrap this thing in a different widget that widget will going to be a list view we can say or okay so let's use a list view dot Builder over here that will be good okay instead of using a column let's use a list View list View plot Builder here we need item Builder method along with that we will just need to return main category tile over here and here we will going to have a context along with the index context okay and apart from that we need to have a item count and from where we will get the outcome count we will get it from the category controller Dot um dot super category okay Dot data dot linked and now right now it is throwing a error okay and why it is throwing a error because of this data I mean Super category can be null initially what we did that we specify in a category that super category can be null so we have to handle the null safety as well so what I can do simply I can say that if we don't have super category super category if we don't have it then we I mean if we don't if we have it then we will use the length if we don't have it then we will use zero okay and again it is throwing error condition must have a static type of bull okay super category is not null and here we are getting the issue that data can be unconditionally accessed because receiver can be null let's put a question mark over here so we handle the null safety okay and if I will hit the co nothing will going to happen again uh the thing we need to do over here is we need to actually wrap this whole thing inside the list I mean OBX but somewhere we have some kind of error okay here we have this error so okay um right now it will not work perfectly I know because last name if you saw my video that we had to wrap something inside our OBX Okay so let's grab this whole list view dot Builder inside the OBX do we have option to wrap it no we don't have option to grab this thing okay so just give me a time I have to wrap this inside of opx and OBX will take a builder method and that and uh here we can return this thing or else what we can do is we can do this conditionally okay if the category controller Dot loading is true okay if this will be the case then what we will do that we will return a circular indicator okay and also we are going to react inside Earth Center widget okay and yeah that's it I guess and let me use a contour here and Let me refresh the page I will go on a category page I will make API call and everything will work fine then we should show a API response and what we are getting unexpected character one category get category we are getting some kind of issue over here and uh in product controller how we passed by API we haven't added a slash over here okay so in a category controller also we don't need to add a slash this thing happened we when you switch back multiple project frequently so yeah now you can see that we can see a multiple category over here okay I know the UI is not perfect that but we are able to integrate uh the API with our uh mint lab okay so and it is fast actually so so everything is kind of working fine but we need to do the mapping okay now we got the data and the mapping part is left and let's do it in the next video okay till that please don't forget to subscribe the channel like the video and share the video to your friends

Channel: Dev Stack

Views: 7,413

Keywords: Flutter, Flutterdev, ShoppingUI, Myntra-Clone, Eccomerce-App, GetX, State-Management, Flutter-Community, Shopping App, Shopping Eccomerce App, Ecommerce, E-commerce App

Id: JDRs-EhRKdk

Length: 28min 6sec (1686 seconds)

Published: Sat Dec 31 2022