Getx Make Model Obs | Observable Object

everyone assalamualaikum so here we'll see how to make our model OBS this is our model and this models works with user information like name and description and we'll take a look how to make it OBS type so make model OBS using get X and so let's go ahead and get started now these are controller and pretty much empty right now and over here first we create a variable of our model and as we create the variable actually we'll make it obvious so here we the verb and we'll call it profile and then here our class name that was user item this one and then we'll make it OBS all right okay so this is our class name user item and we just made it obvious but of course this is far from enough because we need to make it actually reactive and as well as when we make changes for example if we make if we change the name then on the UI we'll see that it is being changed so that was the first step next we are going to go ahead and override our on init method here we're going to create a local variable and we'll call it profile then we'll call our user item class and inside this actually so this is the Constructor that we are calling and we need to give it a value because over here it says that this values are required so we need to provide the value so here for example in this case name I would do Ahmed so now using this class we created a variable which is named profile or we created an object which names profile okay now actually we need to make assign it to our profile variable the one that we had at the top so here we do profile and inside this we just simply go ahead and push it like this profile okay now actually with this we'll be able to get the value like name or description in our UI now that's the first step so let's go ahead and work on this so in our main function we are going to inject it so how to inject it so here we do get that put and then here we'd say user controller remember our controller name is user controller so we need to inject the dependency so instead of stateless class we use get view because we are using get X and then also need to mention the controller so our controller is user type now over here I'm going to cut this and then I'm going to use OBX because our model the value has been just updated so here we do OBX okay but we want the dynamic value the value that's been assigned inside this okay so we want that's this value and how to work with this now over here we are going to do like this because we have this controller over here so this controller is inside get View and we can easily get controller this one and then we want to access our model over here this object because remember once on and it runs and we create this instance and assign it to this profile variable over here over here this one so this gets updated now we want to use the value we want to access this variable from here the first step was using the controller and get the controller variable but there is another step that we need to do over here we could create a getter it's a getter would return us user item and then we'll call it get and then we'll name it profile and then we just return like this so here we do profile and we want to return the value the value of this model okay not profile directly we want to return the value of this model now let's come over here and since we have this controller object and we created a new variable and we call it profile so we can access that one and then from this we can access the name variable in our model okay or the name properly now the error should be gone now this time let's go ahead and start our app and we see that Ahmed the one that's been assigned to it so right now our model is reactive in a sense because first we assign the value over here and then that value we read it from our UI inside this home page now let's restart it and we'll see the same result now so far the value was for like it's hard coded and nothing changed as we have as we are using the app so what we want to do next next actually we want to create another method actually we are going to override another method now which is called on ready now with this actually we'll assign new value to it and we'll see that our UI gets updated as we assign new value so here we'll call Super dot on ready and then after here actually two seconds later we wanna call a function so we'll use uh future.delay and over here we'll use duration and we will say seconds two seconds later we are gonna invoke a callback function over here so as we call it actually we'll change the value now we know that this is our private variable so we can access it inside this class anywhere we want so over here we do profile and then here we would get value and after that here we want to get the name and for name over here we want to access assign it a new variable all right and we want to access this new value on our UI after two seconds later now let's go ahead and run our app and we'll see how it goes hopefully two seconds has been passed but we don't see any changes over here but over here if you go ahead and print a value let's go ahead and do that profilevalue.name all right now we'll see that the new name after two seconds later printed over here so domestic but your our UI has not been updated so our model from model we created an object we assigned a new value to it and then after two seconds later we give it another new value that new value should be updated and seen on the screen but it is not so here we could do one thing so to actually Force the UI to know about this updated value here we could do like this we can just go ahead and call profile dot refresh now if your object is OBS type which is this one our profile is OBS type you can always call refresh method and refresh method will make sure that UI gets the latest value now let's run it one more time okay now you see two seconds later the name has changed so let's go ahead and do it one more time yes and now here we see the name has changed yeah so that's how you make your model OBS and you change the value and update them on the UI thank you so much

Channel: dbestech

Views: 1,890

Keywords: getx make model obs, getx model obs, how to make a model obs in getx, make object observable flutter getx, Flutter GetX obs object, GetX obs custom object

Id: NrtIfLPleBY

Length: 8min 20sec (500 seconds)

Published: Mon Mar 20 2023