GetX State Management with Flutter | GetBuilder, GetX and Obx

hey everybody what's up welcome back to channel codex this is your host afsil and in today's video i'm going to talk about get x state management in my last video i have discussed how to work with get x controller and today specifically i'll be talking about get builder get x and obx so those widgets you can use in your user interface to update your ui depending on the value chain in the data and that we are going to look in today's video right after this intro welcome back once again this is your host of zeal and today as discussed we are going to talk about the get builder get x and obx widget so as you can see my code over here currently i'm using get x all over my implementation to update the widgets and that is not the only case you can use get builder you can use obx depending on the situation you want so let's have a look and understand the theory part how get x work how get builder works and how obx works so here is the simulation i have created so basically we have two approach to work with the state management there's a classic approach on the right hand side and reactive approach on the left hand side which you can see so get builder works with the classic approach like it works with that set state so whatever widget you wrap inside git builder basically it's going to implement set state for that it's going to implement a stateful widget for that and it will work just fine like how you do with the set set but you don't have to do that you just call the update method and it will manage everything like stateful widget and everything it will manage itself the second approach which i like personally is the reactive approach one on the left hand side so there what happens uh you create observable variable okay and that observable variable is binded to your user interface and anytime you change the value automatically it's going to update the ui you don't have to call the update so if you look at the key points the reactive approach get x and obx both the uses dot obs so when you're working with reactive one get x and obx you have to use dot obs variable it doesn't work with a normal type and when you're working with get builder it doesn't work with the dot obs so that time you have to use a normal variable like int x is equal to 0 something like that just plain don't write dot obs at the end and get x and obx works on the concept of stream so whatever uh you're creating basically there's a stream behind the scene and there's a sync there's a screen out and all those concepts are there behind the scene so remember whenever you're working with the get x and obx you're working with the stream indirectly and that is not the case with the git builder it just works like a flutter set state but it happens behind the scene so you don't have to write that set state for yourself and as we discussed the get x and obx is going to auto update whenever there's a value change but in get builder you have to write you like you have to write the update method and manually update whenever there's a data change and get x and obx let's talk about the uh you know heaviness it's normal like it creates all the stream to work with so it takes a little bit of ram in that sense but it's very uh like it's very minor whereas get builder is very lightweight it doesn't create any extra variable any extra stream or something it just wraps with the set state so it's very lightweight so depending on the situation you have you can use either get builder or get x obx all right so let's dive into visual studio code and implement this thing in our application so now we'll start with our first widget which is get builder and as i told it works on the classic approach so whatever widget you are going to provide inside it will wrap with the stateful widget and it will automatically set the state when it updates right so it works just like get x in terms of syntax you have a builder and it returns a controller hope i'm not making a mistake controller yeah and we need to define what type of controller we want so here i want card controller and if you see the syntax it just looks the same as get x and now i'm going to return a widget cool i should use semicolon over here perfect so the get builder what type of builder you want uh sorry what type of controller you want and the builder returns that controller for you and apart from that you can do a lot of things related to state so say for example you want to do something on united state you can write your code if you want to do something on dispose you can do that over here in the gate builder so i'm not going to explain that thing in detail but of course there are a lot of properties in here so you can explore one by one if you have any doubt you can put in the discord server link in the description and we will discuss it further so you got the basic fair idea of get builder now inside our controller this card controller we don't have any variable which is like which is not using obs so this card item is obs this count becomes obs because it's listening to the obs stream total price also so i'm going to create one normal variable so i'll say test amount is equal to zero remember you don't have to write obs when you're working with get builder it can be your custom class or anything it just works fine but you don't have to write obs that is important thing so we got the test amount and let's try to bind this over here so i will say dollar controller dot test amount perfect everything is fine let me just save and give it a run so now you can see that the amount came over here so let me give it some style so that you can see it if it's not visible okay now it's visible and i'm going to apply some formatting as well cool so we got the total amount 0 with the help of get builder so now the question how it's going to update it's very simple in your card controller you have to write a logic to update the value of test amount and as soon as it updates you have to call the update method so let me show you how it works here is our add to cart method so whenever some products gets added to cart i'm going to calculate the new value of test amount you can see that you have to do all this computation part manually so test amount is equal to cart items or i can say simply we have this total price over here calculated so i can just say total price what happened okay so i'll make it double by doing this and let me just restart and let's try to change the value you can see the cart item the total count is increasing but the value is not increasing because you have to call update method explicitly so you just say update and done now your value is updated and you're calling update explicitly so it should update the value so let me just give it a restart and add to cart add to cart add to cart and it's working totally fine so you have seen how git builder is working in particular you have to define your variable you have to update the value and then call update method explicitly to make it work okay and there's also way to update only particular gate builder by assigning ids and something like that but that will be too complicated for now so we just define a git builder and with simple variable it worked now let's move to get x so get x you have already seen in the previous live stream and i'll just go through it once again the syntax is exactly the same you define the get x you define the controller which you want so i'm just going to comment it out okay let's save it so you have the get x and the controller which you want it returns a controller in the builder method and then you have the same implementation but this time the difference is it is working with obs because this total price is listening to obs item observable item so it became observable itself so let's change it to test amount which is not observable and see what happens i just saved it and let me restart so you see that we got exception because this test amount is not observable you cannot use inside get x so let me just revert it back to total what was that total price save it restart it okay now it's working fine so you got the idea of get x it's just similar to get builder in the terms of syntax but the implementation is totally different it's working with the streams and all and it's automatically updating so even if i remove this uh like these two things i'll just comment it out now because we don't need it so here you can see that i'm just adding elements to the card and automatically it's calculating total price automatically it's updating the user interface and everything is happening just like that you don't have to write update explicitly so that's the beauty of reactive approach now let's talk about the third widget which is the simplest widget obx to update your user interface so i'm going to comment this as well save it so there's no label now and let's talk about obx in obx what you get is this method and that's it there's no other extra parameter there's no builder there's no controller returning back there's no init state there's no closed state like disposed state or anything it just wraps your widget with the reactive approach so whenever there's change happening it will update your user interface now you will be thinking why do you use getx when obx is so simple so i'll tell you in a moment let me just add this text over here so it's the same text working with the obs so now you can see that the controller is giving error because it doesn't know which controller you're working on so with get x you get the controller itself inside the builder so you know which controller you're working on whereas in obx you don't get any output you have to define your own controller you have to uh you have to have the instance of controller with you so if you take example of this particular application or this particular page i already have the instance of card controller where i created the instance and put it in the dependency so i can use this instance now so obx is helpful when you have the instance already with you you know on what controller you have to work so that time it will be very helpful you don't need to get something in return with the builder you just wrap your widget with the obx so either you can get that controller by finding it uh if you have already put it somewhere in the dependency or if you have defined in the same page you can use the same instance over here so let's just give it a run and try to add some element so again you can see the amount is updating obx is working just fine so now comes the question when to use what so it's very straightforward if you have the access to your controller either by finding it or by just having the defined instance in that same class so you can just simply use obx it's very minimalistic you don't have to define any property there's no property at all and you can just wrap your widget with obx and it will work totally fine working with get x of course you will get the controller in return so internally get x is going to find the controller which you have defined over here and it will look in the dependency if there's any controller existing and it will return to you so that is extra thing over here and with get builder if you don't want to work with the streams if you want just a set state approach so you can define your normal variable and calculate it uh manually and update manually so that how get builder will work okay so you can choose any one of them depending on the situation but most of the time i will prefer working with either get x or obx so because that's a reactive approach i don't have to write update manually and that's all about these three widgets which we need so for this example i'm going to stick with obx because already i have the instance of the controller so i don't need any builder and instance again all right so let's move to the next topic where i'm going to show you how to work with this favorite feature and before we jump to the implementation part it's time to give a shout out to our viewer and here's the comment of the week and channel of the week thank you so much for providing your valuable feedback it really means a lot to me and if you're thinking how to come in the future video you just have to go to comment section and write something about this video it doesn't have to be good it doesn't have to be bad it can be anything which you want so let's get back to the tutorial and see how the favorite feature is implemented so it's going to be very easy here you can see i have one icon button at the bottom of my card so each element you see i have one icon button and i'm just changing the icon depending on the state like whether it's favorite or not so the key over here is i have added one observable field inside my model so let me show you that is favorite so this is all normal fields which i have in my product and remember one thing you don't have to extend your model with get x controller it just ruins up the mvc pattern so you have to follow the pattern and what you can do is define an observable field inside your model just like that is favorite and whenever you change the value it's automatically going to update so what i'm doing on press i'm taking the current product at this index and just toggling the value so this toggle feature also you get out of the get x package you don't have to write his favorite is equal to not his favorite you just say is favorite dot toggle and it works only on bool so if it's true it will become false if it's false it will become true and depending on the true or false i'm showing either it's an outline box or it's a maybe field box right vice versa so that's how this is implemented and the same thing applies for quantity as well so for example you want in your cart uh to add more items of the same product so what you can do define a quantity and of course the initial quantity will be one and make it observable that's it so anytime in your product you can click plus or minus and it will change the quantity and that you can calculate with the price you can multiply with price and it will work just fine for you so that's how you can manipulate a single object by just adding observable inside your model but don't make a mistake of extending your model with the gdx controller your controller should be separate your model should be separate and your view should be separate then only you can say i have mvc pattern right so that's all about this video thank you so much for watching i hope you people enjoyed give it a thumbs up subscribe if you are new to the channel and if you haven't seen the previous video where i implement get x controller go ahead and watch that video link in the description and i will see you guys in the next one thank you so much for watching

Channel: CodeX

Views: 20,081

Keywords: flutter tutorial, flutter, flutter app, learn flutter, flutter with example, code, dart, programming, code practice, codex, afzal, in flutter, flutter sdk, flutter trend, flutter is future, getx, flutter state management, getx flutter, flutter getx, getbuilder, obx, reactive, cart, online, shopping, application, getx vs provider, getx vs bloc flutter

Id: -FAiH638BHo

Length: 15min 25sec (925 seconds)

Published: Mon Oct 12 2020