Flutter Getx State Management Tutorial | GetBuilder | Obx | Update | Dependency Injection | Routing

hello everyone assalamualaikum well in this tutorial i'll explain how to use get x uh this would be pretty much for beginners and at the end of the tutorial that part would be for advanced learners but anyway so i'll walk you through how to work with get x from the scratch and for the first 10 minutes of this tutorial we'll work a little bit on the ui very simple ui and then we'll uh jump right into get x anyway so if you want to follow along with me just to go ahead and create a new flatter project and come to this main file and then start your app and you'll have a user interface like this okay all right well now first thing first what i'll do i'll go ahead over here and i'll install get x package so i'll install it right over here by the way if you don't know what is get x package for beginners a state management package for flutter it helps you with state management routing um page transition even a little bit of ui uh it helps you with a lot of thing okay and get x package is much easier to maintain and work with especially for beginners anyway so once you have this get library over here this is the get x library actually and run here pop get and it will install the new version okay anyway so after this we'll come over here and we'll see this is our main file and main file is calling this home page so what we'll do we'll go ahead and delete it we don't need this anymore okay we'll work from the scratch and of course we'll have an error so first i will go ahead and create a new file and i'll call it my home page well i think we'll go with like this my homepage dot dart okay and over here we'll create a stateless class okay i'll call it my home page and over here uh we'll import the package and for now we are not passing anything okay so we'll remove that parameter and over here we'll import the package okay or the library sorry okay i think we need to remove const let's see and we also need to import some other dependencies okay now the error should be gone so far we have this one okay so first 10 minutes again once i said that we'll work on the ui so i'll go ahead and build the ui so over here instead of returning a container we'll return a scaffold okay and within scaffold will have body and over here i'll declare a container okay and within container i'll define width and height so here i'll do double dot max infinite the visible width and we do height the visible height okay and after that we'll have a child over here and for now our first child would be column okay and within column we'll have children and for now we'll put over here just a dummy text hi there just like this okay and after that we'll go ahead and run our app okay well now if you come over here come over here you don't see anything but the app started all right so where it is uh now it's at the top actually so we need to do some setup over here so what we'll do go ahead and do cross-main access alignment so main access alignment it will put it down in the center dot center so here you go you see it all right okay so that's what we have and actually what i want to do i want to go ahead and create say a container over here okay so that's what i will do so and i'll give it uh with say whatever the width i have that width and and over here we'll give it a height say 100 just like that and we'll give it a bit of uh decoration so we do border radius and so let's see sorry let me remove this part to do a decoration with the box decoration and now here inside within it we'll do border radius so for [Music] border radius dot circular say 30 20 and we'll give it color to do color ox ff say 8 9 dad0 all right let's go ahead and boot it up but before that i think we also need a child over here okay and here we'll have a child for now we'll call it alright so i'll go ahead and run it so it's there and i want to center it so i'll wrap it around center widget okay so it's there all right and and inside it will do text style a little bit of style so you do text style font size let's say 20 and the color would do colors dot white okay all right okay now over here we want to apply a bit of padding uh or how it's a margin actually so here we do const edge that's uh let's say all 10. okay now let's run it and it'll look better let's go ahead with 20 okay perfect all right so what i'll do i'll go ahead and copy this one and put it here a few more times so so we have this a few buttons well now soon they would be working like as a button okay well now the first thing we want to do we want to go ahead and be able to click on this okay all right so to do that actually we need to wrap them around a gesture gesture detector okay so that's what it will do so i'll uh build a widget around it and over here i'll do gesture detector and here i'll have on tap event and for now i'll just keep it empty so i think it's better i replace all these others with the gesture detector sorry so now they're all tappable okay all right okay so now we want to use get x um well along the way we'll change this names okay while we already installed get x well get x just like other state management system it helps you to manage the state and with the routing things like that okay well uh first thing first i'll over here create a new folder and i'll call it controllers the controllers and within it i'll create a new file and i'll call it say it's a tab controller it doesn't really matter tab controller dot dart okay and over here i'll create a class and i'll call it tab controller and extends get x controller so if you want to use getx you should have a class and your class should once you create a controller that controller should extend this getx controller and then you'd be able to use getx state management system so here first i will create a variable and this is the variable that we want to show over here okay so here what i will do i'll say call first int x equals zero okay so this is a variable that we want to create all right and now this is the variable we want to increase the value so well i'll create here increase x okay so now over here i'll do x plus plus that means it's increasing okay all right now i'll create another property and the type is also int and over here the property is x and we'll do get here we do x like this and we need to swatch uh switch them okay so we'll call this function and this function would increase the x value but you see it is underscore so this is uh private variable so we declared a private variable int type in our controller and using this get keyword we get the value of x so this is a private variable so this would be more like a public variable so because you have this keyword get that means that you can access this value x over here x axis this x value from your other classes for like your home control home home page class things like that okay so over here actually you created your first get x controller and this is the most basic example you see in many places okay all right well there are other more things that we need to do okay so now what i will do i'll go ahead and call this function and i'll tap on this function so what i would expect i would expect that its value would be increased so anyway i would come over here yeah and then i would try to use this but now this is a controller this is also a class so well we just created our first controller and this controller has this variable and we want to access this value outside from this controller using this variable and we'll also call this uh method to decrease the value of this variable and how to do that well we need to come over here okay in our uh file called my home page so here we're gonna do something something that is called uh dependency injection well what it means it means that do something here so that i can access this class the properties so like this one and this one okay do something so that means initialize it but the word is very interesting they call it dependency injection it sounds a very high level word it all it means that initialize this class create an instance of this class that's all it means and once you create instance of this class you'd be able to access the properties of it okay so that's what we are going to do and how to do that well it's pretty easy so all we need to do here we need to call tab controller controller and then we do get dot put here we'll call tab controller that's all that's how you [Music] create an instance of this controller but of course there are errors so you need to import it so here we need to import as this package get package so that's what we are doing and now here we are going to import this library okay now with this what you did you actually initialized this controller at the same time you created an instance of this controller and then now you'd be able to access this properties x and increase x from here using this okay all right so so far so good but now where we want to access this now we want to access over here okay all right now to do that in if you're using get x or of course we are using get x over here we need to wrap it around something that's coming from get x okay the reason is because first thing is that i want this one to be clickable okay i want to be able to tap on this [Music] so we want to access or we want to call this method over here from here okay and we can do it easily so how can we do that so here we would call say for example controller this is the variable and then here would call increase okay x this one that's all we want to call okay now over here we'll run it and see what happens okay now as you see it says that controller has been created and it's been initialized by the way let's do one thing let's uh uncom comment them out now see well you don't see any of the message so once you have this one and let's see so it's been created and initialized even if you don't use it so you get a message from getex that the controller is tab controller it's been created and initialized okay and now i want to use this okay anyway so now let's go ahead and click on this and now let's tap on this let's see what happens nothing happens but of course we are being tapped all right now what you could do you could come over here and try to print this value and we'll see what's there okay now let's run it one more time okay now let's tap on this and the value is one value is a two value is a three okay so it means that once we are [Music] calling this function we are able to view this value okay all right through this print method and we know that the value is being increased okay so that's what we know and it means that from here um calling this controller class and the value is increased and we know it okay so that's for sure all right now this is really good but we want to show this value up here okay we want to show this all right well to do that uh we could do one thing here we can copy this container and i'll just put it right up there okay put a comma all right so this is the place where i want to show the value okay now so that means that this part the value this one has to be dynamic okay as i click on this i want the value should reflect immediately over here okay so that's why we need to wrap this one something called get builder because we want to get the updated value over here and see it well there are many ways to do that using get x but the first approach we'll use is called get builder so what i'll do i'll cut this one over here and here i would do get builder get builder this one okay all right now it has a parameter called builder and over here builder takes a oh it is a property builder and it takes a parameter as a function now here we can simply pass any name we want but here we'll just say tab controller okay and then we'll return okay here we need a return function by the way now what is this step controller well now get builder actually takes a controller class as you can see over here things like that get builder get x controller it's required so it needs something that returns a controller okay so that's what it returns i mean needs something so here we need to tell what kind of controller we are passing for this get builder or get builder should have access so we should have access to tab controller this one okay all right now this variable should be tab controller type of course you can name it anything anyway now here we'll return our container the one we copied early okay all right so now because of this one whatever happens here because we are increasing the value and after tapping the value should be reflected over here that's what at least we want okay okay so now over here definitely one thing we could do here we would replace this word tap and we want to access this value x okay but we said earlier because of this x we can access this value so we'll call this one okay so here how do you call this so here simply we can just go ahead and copy this one here we would say tab builder that's our tab controller dot x okay all right so that's all we have let's see so this is an integer so we need to cast it to string okay all right now let's go ahead and run it and see what's going on okay this is the value now you tap over here well now you see the value has been increased to one initial value was zero right uh try again now the value is two but there is no change over here well now the reason is because even if being it's being updated over here but this homepage has no idea even though we are using controller and its instance well it's missing another important property or method which is called update so there is a method in get x which is called update so if you update a value and you want other screen to be able to know this updated value then you should call this function update okay right after increasing or decreasing or whatever you do right after that you should call this okay all right so once the value has been increased because we have this update method and our home page is using this controller so using get builder we would be notified immediately that this value has been updated so we can access them from here so let's go ahead and check this once again now tap on this you see the value is increased immediately and over here is the same all right so it is that easy to access the value the updated value using get x and it becomes really simple all right so here one thing that i want to tell you once again and which might be confusing so this is called dependency injection okay that's what we did here okay now uh let's see if we don't use a tap controller this one over here like we did over here to access the value so can we just use a controller over here and let's see what happens so over here i'll just simply call controller.x okay because once again controller is the instance of the step controller here this step controller is instance of this step controller but we know they are the same tap controller okay now let's go ahead and see so now let's increase the value and here it increases automatically so that also means that over here you don't need this one you can keep it empty all right so it means empty but get builder has to know so but get builder has to know what kind of controller is it so that's why you need this otherwise you will get error okay now here let's try this you increase the value and the value is increasing isn't it amazing okay so you need to know that that once you have injected the controller over here you may not need it okay and actually we should not need it otherwise this would be repeat of the work that we have done okay now what we want to do we want to click on this and we want to go to another page and how do we go and how do we come back and we'll see this using get x okay well to do that i'll create over here say another file and i'll call it first class just call it first class dot dart okay [Music] our first page actually now we'll create a stateless class because we are using get x get x will maintain all the state for us so we don't need to create a stateful class we can create a stateless class now over here we'll call it first page all right okay now instead of returning a container will return a scaffold over here and within scaffold we'll have body and then we'll have container over here and i will i think let's see we can just copy this section over here okay so that's what we have and now over here we'll have child and within child we'll have a column okay yeah within column we'll have children and here first we'll once again create once again instead of doing this i can just copy paste this kind of container one of the containers that we have okay uh just copy the container so we don't need to type everything so here i'll put this one okay now what do we want to do uh actually say this one this is the second container which is this one so over here we want to go to the from here we want to go to the first page okay so here i'll just say go to first page all right now let's save it oh i think it was the third one but it really doesn't matter which one it is okay so second one is this one so what we want to do we want to click on this we want to go to this page first page okay all right all right so now here we do have this one so this ontap event so here we can just say for example get.2 now here we'll mention the our class name okay so here we do first page this one i'll import it and i think we also need an arrow function over here okay now this get the two is coming from get x and it helps you to do navigation okay so get the two within it whatever the class name you return it goes to that page okay that's what it does all right so now here i'll go ahead and run it okay now i'll click on this and let's see we do have an error okay okay so while this error is normal it says you are trying to use context less navigation without get material or get key so well once you start to navigate to different pages using get x because here i'm using get x because this is the get to is coming from get x and i said this is for navigation in that case your material app which is this one it should be wrapped using get material so or simply just to get material this one okay otherwise you'll get an error of course we need to import the library that's what we'll do input the get x library okay all right so now let's go ahead and run it and you can go to this page right so this is where we came all right now this is interesting just now we saw that we had an error we had this error okay let's see while we are doing this tapping we didn't have this error okay but once we click on this we showed this arrow so that means that you can use get x without navigation just for state management like increasing decreasing value or access certain value in your app in that case you don't need to wrap your get material app or material app using get material okay if you just use for accessing different values but not for navigation then you don't need this otherwise you need to have access to this one so now we know that we can go to this page and uh we see something but now uh one thing though we want to go back to previous page so here simply a few things i'll do here i'll use an app bar over here and i'll call it a bar and over here i'll use leading and i'll wrap it around icon button so that it's clickable and now here i'll have unpressed event okay and at the same time i'll have a child over here okay no i think it's an icon actually so icon and now here within it i'll click i have an arrow button okay arrow go back this one all right and here color colors dot black okay so that's what we want to have all right now let's go ahead and click on this so this is what we have so now what we did over here we were able to uh come back to this one now we want to go back now of course we can go back the traditional classical way like writing the long text like get material page go back things like that but now because we are trying to learn get x so here we can just simply do get that back and it will take you to the previous page and over here we need to import the package once again the get x package all right okay now let's go ahead run it so let's see we are doing this work and it's working at the same time we tapped over here now we want to go back all right now we are able to go back come back to our first route and we see the value is still four which didn't change and we tap it again and now you go back to this page and you can come back okay you can do this one all right now the purpose of creating this page actually i want to access this value in this page okay that's what we want all right so now we need to come to this page over here now we need to access the value value of this x which one we created earlier and we increase the value how do we do that well just like over here we learned that we need an instance of this controller and then we can access it but do remember in get x you just create an instance of a controller only once in your application's lifetime and most of the time things could be different but in general only one so you only we already created once over here now we can find this one easily in other classes okay we don't need to instead create the instance again all we need to do find this one so we'll come over here and over here we can find it okay now finding it there are many different ways to find it okay let's look at the first way so here i would i'll do say var controller here do get dot find okay uh sure i need to mention the name so tab controller so now because of this one because as you can see get.find finds a controller what controller from this name it knows that what controller it should find okay so now using this line we are able to find tab controller in a different class okay as simple as that now over here we want to access the value of this x okay we want to access it over here so what we could do we could just go ahead and simply call controller dot x dot to string all right okay so once again this value is uh coming from here okay now let's go ahead and run it now i tap on this okay and the value increase now it's a seven i want to go to this page and i would expect seven and i did that's as simple as that now go back again tap on it increase the value go back to first page and use 11 isn't it beautiful okay all right now over here i'm getting the new value okay all right now just like uh earlier page over here we learned that you can wrap your container around get builder okay so over here we can do the same thing but here actually we want to do a bit of different thing okay we want to create another button over here and we want to be able to click on this and decrease the value and we'll see the value has been decreased here and once we go back we see that value is reflected the changed value has been reflected over here so that's what we want to do so we'll come over here in our first page my sorry yeah first page over here now or actually we can come to this place and copy one of them okay then i'll put right below this container okay and let's see now i'll run it i'll go to this first class which is this one and i see over here now over here i want to decrease the value so here i'll call decrease x okay whatever the x value was okay all right so once i tap on this this button i want to decrease okay now this button has ontap event which is this one but this is increased value which is over here okay now we can just simply go ahead and copy this put it over here instead of increase we'll call it decrease x okay instead of this we'll have minus minus we still need the update everywhere you want to access so we don't need this anymore so this update is more like set state i think you guys know this function okay it's pretty much the same i think so now we have this uh function created now we can access this one over here so instead of dot uh sorry increase it here to decrease x okay now uh let's see okay so let's go ahead and run it from the beginning so tap on it the value is increasing i go to page first now i see 5 and now i click on this and i want the value to be decreased let's see but the value didn't decrease let's see why not okay now the value didn't decrease because uh well actually the value did decrease okay now if if we put a print method over here okay and the print x over here it did okay let's run it from the scratch and tap on it and it increased to go to the fab page first page and we see the value now over here i clicked you see it's four here and over here i see five over here it's a three i still see five but if i go back i'll see three right but of course if i go back here i still see three but once you click on this the value decreases but it's not reflected there well can you tell me why you have three seconds one two three i bet you did well the reason is because this container is not wrapped around get builder this get builder because we said early if you wrap something around get builder get builder would would be notified about the latest value so this container right now is not notified the latest immediate value it knows the latest value but not immediate value how it knows the immediate value like for example if you tap on this it increases you come here so this is the latest value but you decrease it doesn't know about the latest immediate value okay so to do that as i said earlier so we can wrap it we need to wrap it around get builder so that's what we'll do okay so here now we don't need any uh controller because we already have the controller at the top as i said earlier uh over here okay so now here i'll just simply return okay and then i'll try to run it but i think we'll have an error let's go ahead and see the error okay so tap on this and go to the first page and we have this error let's see as i said we'll have an error so you might have this error a lot of time if you use work with get x the error is actually the reason i told you earlier over here so here the get builder needs to know what type of controller is it okay so it's a tab controller okay now you go ahead and tap on this this increases we go there and now we click on this it decreases now once we go back we still see four okay go back we see six click on this it becomes four okay so that's how get x work together get x work with i mean get x get builder works okay so it needs to know what controller is this all right otherwise it won't work all right so so far so good so now over here actually i want to create a new page go to a new page and from that page i want to go to another page and in that page we want to see this value okay things like that so what i will do i'll just simply go ahead and create over here a new file and i will call it second page dot dart okay all right now here once again i'll create a stateless class and i'll call it second page uh now over here we'll do scaffold okay and for this scaffold to be quick actually i think i can copy all of this over here okay and delete part of it because i don't want to keep typing nobody wants all right and over here there is this app bar which we don't need and also this whole section we don't need okay all right but anyway so what i want to do i want to click on this button and go to the second page and another thing actually we could do come to this page and where it says this one so i'll copy this one and put it there and let's see okay that's all right okay now let's go ahead and run it let's make sure everything is okay so this is our page over here tap okay so here we want to say second page all right let's save it okay second page so we want to click on this over here and go to this second page okay so here what we do we do get dot 2 over here we do second page and we need to import the library so now let's click on this okay and make sure no errors now click on this we go to the second page and that's what we see all right okay now uh come to second page over here and i want to set up this property which is called main access alignment dot center so it will put in center okay now we want to click on this and go to another page okay so that's what we want to do so what i'll do i'll go ahead well i think first i can copy this whole scaffold because i don't want to keep typing so over here i'll create a file and i'll call it third page dot dart okay and once again we'll create a stateless class here i'll call third page okay and instead of this one i'll have this and we need to import some libraries okay now the arrow should be gone okay now as i said earlier from second page which is this one we want to go to the third page now let's go to the second page and gesture detector over here and over here we do get done two now over here we do third page so now let's go ahead and run it looks like we have an issue over here so import the package let's come over here go to second page new tab well on the second page actually we want to write go to third page okay and once i click on this it takes me to third page okay now over here on the third page we want to access this value this x value okay that's why we want to do that and how to do that but as i said early we already initialized our controller over here and it could be accessed anywhere in your app so i'll come over here and within this scaffold over here sorry this build method here i would do tab controller controller you can name it anything controller get dot find get that fine yeah that's all okay all right and all we need to do we need to import this and also import the get x package all right now the error should be gone so over here i can uh get the value of x uh sorry we don't need this one we don't want to be able to tap on this we want to get the value so here we want to say controller dot x to string okay so once i'm on this page i want to get the value of x so let's start from the scratch okay all right now i want to tap it so value is 6 i go to the first page i see value six now i decrease it by two i go to first page again i mean our home page and then i go to second page of course second page we don't see anything but when i want to go to the third page i want to see this value okay so i'm here third page and the value is four isn't it amazing okay it's absolutely amazing with get x becomes much more simpler okay but of course we need to find a way to go back to our home page okay all right so now here uh we want to go back to our home page so simply we could call get.2 here uh my home page okay my home page so that's how you go back to home page and let's see okay so let's click on this and tap the value go to the first page decrease one go to the home page again go to the second page third page you see four and you click on this you come back to first page and you still see four all right that's beautiful okay so now over here you see we are increasing we are trying to access the value first we find it and then we access the value but i think there is another way to access this you can access it like this okay you need to do get dot find and over here so you can tell the type of controller it should find tab controller and then you can access whatever properties available just like this okay and then we do to stream now error is gone now what i would do i'd go ahead and comment this out now i'll run it okay tap on this it increased go to the first page decrease go to the second page third page and you see three okay so finding a controller and in and its instance you can also do like this get dot find this arrows two arrows and after that you need this uh brackets and then you can access the properties whatever properties you want okay well so uh once again here we don't need get builder because we don't want the value to be updated immediately after clicking because we are coming here from another page and once we come here for another page we can always because it's a new request so we can always get the latest value okay all right okay so far so good and uh now if we come come to our tab controller over here now this value is int type well and this in type value we get access to our pages using get builder so that's what we saw earlier right so in type values you can access using get builder but there is another type actually that you can use we would say rxend and we'll declare new value and we'll call it y okay and obs okay so now we declared this uh variable y and we can get it using y over here and at the same time we can copy this two functions over here and i'll put them there and instead of x i'll call it y and the same over here and now instead of decree increasing the value of x will do the increase of value of y and now here we need to do value because o v x has other obs has other properties so you just want to increase the y increase the value so we need to do dot value plus plus and over here is the same y dot value and we don't need this update anymore okay we don't need any of this so once you're variable is obvious type or it has obvious property you don't need this update you only need update if your value or variable variable is just a simple uh type like int list things like that okay variable type like that anyway so once your variable is obs type you need to use the value property to increase or decrease them okay all right now what we'll do we'll go ahead to come to our third page over here and over here actually we want to create uh another two new controllers okay all right so here uh before we go ahead and create we can just simply say x value okay yeah and now let's save it so x value is zero all right uh so we'll go ahead and copy them [Music] and so here we'll go ahead and copy them and i'll put it here uh well for now we don't need this tab button and [Music] but on the other hand i want to increase the value over here of y okay all right well to do that i already have this uh we can access our tab con tab controller either using this or over here the way we did using this one like this okay all right so we will just copy copy this one sorry so copy this one and we'll put it over here okay and we want to access the method which is that which says increase y all right okay so with this we'll get the increased value okay all right now over here you see i have this uh x value which is this one and this is for y value so we need to change here by saying y okay all right and once i click on this actually we also didn't don't need this one over here so we'll say increase y just like that okay increase y let's save it okay so increase y so this is the current x value once we click on this we come over here and we see the value so we go to first uh second page and we see our y x value is there okay now we want to put here our y value okay all right and how to do that uh well to do that actually we can copy this one first and over here now the increased y value do remember that uh y the variable type is obs so we need to wrap it around obx all right and then we'll just simply call this container [Music] okay now instead of here x value we'll write here y value and instead of this x we'll get y dot value remember not just y you want to get y dot value like that okay or in fact you can change it a little bit even over here that value okay so let's see can we get it looks like we can't so there might be other casting operator which we don't want to do that for now okay so what will happen right now so this container let's save it okay so this is y value and once i click on this y value increased and show up over here okay that's what we want let's try to click on this and y value has been increased okay y value is 4 5 6. i click on this i increase the x value i go to the second page i come back i see x value has been increased okay and now we want to do another thing we want to click on this uh we want to create another button that button would increase the value of x and sorry would add the value of x and y and show over here right okay so that's what we want to do well for this one uh let's see so we can copy this one over here and i'll put it there let's see now here you'd say total okay all right total total x plus x plus y all right okay now we want to create another button which we'll show here but now let's work on this uh tab event over here so of course we don't have we don't want to get increased right now right we want to get a different thing so once we click on this we want to let's see so we want to add these two values okay well to do that actually here i can create another method we'll call it void total x y okay all right now over here i want to add x value plus y value okay all right y dot value all right so this would be our total value so once i click on this this this would be added and once they're added actually uh well if they're added actually we can say we can save them in a new variable so we'll call it it z equals zero so here into z okay so once i click on them they would be added and saved and then we can also retrieve it how do you retrieve int get z like this okay so now i can access this z from somewhere else okay now i want to access it over here so once i click on this the value would be increased immediately and actually we can do that and check it out over here z all right so now let's go ahead and run it once again so now we have three for x value we go to the second page third page and for now y is zero x is three we can see now we increase the y value so now y value is for x value seven now i want to click on them and here let's see okay so it looks like this is not clickable yet because i'm not calling it so over here i need to do it get uh get let's see we do have an error sorry this is total right total xy okay so that's what we want let's save it okay now click on this the total value is nine okay so it's always nine now you increase y so this is ten right so we see ten all right of course we can click on this but it will take us to this page will increase by eight and we'll go to this page come over here so now here we'll see the total value is 15 okay so we want to reflect it over here okay all right so how to do that so we'll come over here and actually now what we could do we can cut this one so we can declare a column so you can wrap your column inside obx here are the children and one is for x and that is for the total value so this is the x value right so sorry i think this is the y value let's save it nothing changed so here i'll just copy this one and put it there okay so now here instead of y we'll write it total value okay total value now here we already saw that we can call z so z is our new variable that we declared and it has the value of x and y together okay now let's save it so we see z there okay so now you increase uh y it's nine okay now we'll see 20 if i click on this all right so we have this 20 but looks like the value didn't increased immediately well okay well now that's because we wrapped it around obx right but z is not type of obx so most probably we can go ahead and change the type of z so here i would do rx into z all right now here we do obs and now here we just want to get the value all right but now here we do value okay so now the error should be gone so now z is obx time so we need to get the value for it and once we add two values we also need to put it in the z as well okay so let's go ahead and run it from the beginning and let's see everything so now x is four now you go to the second page third page x is four y is zero so now we increase it y three x four now we get the total value which is seven now we increase y again so now we are supposed to see ten if we click on this so we'll see 10 beautiful right okay now so far everything is good and everything has been working inside one controller now we want to create a different controller so here actually i created a controller so i created a controller over here a new controller and over here i have this list that i created okay on the in this list i have two properties that i want to be able to access from outside world one is this list which is this one because this is private and i have this another method which get values i think i we can we can set it to set values because we want to set the value in the list okay so what you want to do this created value whatever the value has been summed up over here we want to save it save it to this list so here on page three we'll create a new button which will get which will call this one okay and then based on that call we'll save the value in this list and from home page will re retrieve this list and access the value okay so that's what we want to do so let's come over here and so over here uh this is our second third page and on third page here one more time uh what i'll do i'll go ahead and click on this copy this one now over here i'll have this method over here okay but now in this case instead of list controller we want to get tab controller okay now tab controller actually what i could do i can initialize over here sorry the list controller i can initialize over here i'll do list con controller controller let's import the library we're good okay now over here uh this is where we are and over here uh we want to send the value the added value to this method over here okay so in the third page over here we'll call uh okay so over here we need to call list controller and list controller has this method which is called set values and here we pass the value value of the edit value now edit value is in tab controller right so here we'll just to do once again get dot find tab controller and here we want to get z right z sorry z dot value let's see so let's come to our tab controller which is oh we just want to get z because the value is already here so we just simply call z okay and we pass pass it down to it all right and once we click on this uh it will update the value over here and in fact it would be able to print the list okay print list all right okay let's save it so this is the value uh now we need to change the name over here we are in the third one so here save total you will call save total save total so once i click on this what will happen um it would fall back to this on tap event and it will find the controller and set the values and save it right okay so it will set the value over here in the list controller okay so now let's go ahead and check it okay so the value has been added which is 10 right okay now here one thing we could do let's uh increase y value okay now get the total so total is 12 right now here let's save it now you see in the list we have two values 10 and 12 okay so the previous value is still saved now what we could do we could go back to our home page over here now we can increase it now we get third page and over here let's see so our y is x is eight y is eight right so now you get the total which is 16 let's click on this you save it now we have 16 right perfect so that's what we wanted and everything is working so far so good as we expected now i want here you to learn one thing that first you can find controllers like this or controllers like this okay and you can do the dependency injection like this okay and once again you can put the injected dependency anywhere in your file and you can access it from other places so now here this list controller uh saves the value right so we want to we can actually show it on home page as well anyway right but we don't want to do that now another important lesson i would i would want you to learn from here is that now we have this controller that we instantiated over here and another controller that we did but now if you have too many controller they might be scattered everywhere but you don't want to do that so in that case what you could do you could create a new file say i'll call it say a directory i'll call it say helper and within helper i'll create a new file and i'll call it init controllers dot dart okay now over here i want to put all of my controllers and ins i mean here from here i'll declare all of my controller so they are organized okay here i'll create a class and i'll the class type is for future void and the method name is in it and i'll i'll call it it would be async sync type in general you don't need but in most cases it should be a sync now over here i'll initiate or instantiate the controllers so first over here i have this uh in my home page i have this one so i can just cut this one over here i don't need this and i'll put it here so here we'll initialize our controller so to get that put and here we'll call tab controller okay at the same time we can also initialize our list controller okay list controller all right okay so this is how our two controllers will be initialized if you have more controllers you should put all the controllers in a file like this in a class or method like this okay now if we come over here let's see we might have few errors over here okay because the controllers it was initialized over here and at the same time we were able to get it okay so that's why it's throwing an error but now anyway so we need to come to our main file main.dart over here so what we'll do over here we'll call our init method okay all right so first we need to import the package so we do import so we need to manually import it and we get it as di and then we get the init method because init controllers has init method right so that's what we got and now here we need to do a white sync all right and even before that we need to use another widget bindings we just binding so we need to get this one otherwise we'll get an error okay now before our app starts to run because of this two we'll make sure that our dependencies which are these two they have been initialized okay and make sure you call this one because this one actually make sure that our dependencies has been initialized and then we run it okay otherwise it will get an error okay that's good but how about this error over here we still have this error okay controller x now do remember uh we are being initialized over here in main method from this file now all we need to do we need to find the controller and call columns how to do that just like before tap controller dot controller dot get dot find okay all right now the error should be gone okay so this is how we find the controller okay remember this is not initialization this is finding all right so finding and this is called binding and binding actual binding happens over here all right okay so and now let's check our other places and let's check the third place and everywhere okay so far so good all right so let's go ahead and run it tap controllers not found let's see which page it's missing [Music] explained over here my home page so instead of put let's try lazy put place it put and it would do the same over here okay now let's go ahead and run it okay the error has been gone so you can initialize it using put and lazy put any of them is fine here you can do all these things you want you go to this page decrease you go back to previous page and you go to second page over here and you see the y value so we can increase the x value okay you tap on this we get the total value we can save the total value which is over here okay so this is all about our get x package how to use get builder obx and how to do this initialization of your controllers but now there is another way of doing that this initialization and for that one actually we can create another uh class over here let's say init dependency depend okay now over here we'll call uh class init dap implements uh bindings okay all right now we need to import our galaxy package otherwise we'll get error so import get all right now one error is gone but we have an error so it needs this dependence this is coming from i think from genex package so now here we can also put our dependencies instead of this one okay so now we need to import the classes and libraries let's see okay now what about this one so if you want to initialize your dependencies through this function special function which is called dependency which is coming from bindings well in that case over here you don't need any of this okay so for this one what do you do to come over here within get material here there is a property called initial bindings and here you will call init your class okay all right and then it would still work okay and it does as we see increasing the value you go to the second page a third place you can increase y and then you can do the total which is over here all right okay so so far everything's working fine so for dependency injection you can do two way three ways one is this way the other one is this way and the very first one is early over here like using get.put all right okay so uh that's pretty much we learned about get x today anyway so if you learn something don't forget to subscribe and smash that like button thank you

Channel: dbestech

Views: 30,405

Keywords: flutter getx tutorial, flutter getx state management, flutter getx project, flutter state management, flutter getx getbuilder, flutter getx obx example, difference between getx getbuilder and obx, flutter getx routing, flutter getx dependency injection, flutter getx get.put, flutter getx lazyput

Id: uki8BS7xEug

Length: 77min 1sec (4621 seconds)

Published: Fri Dec 17 2021

Reddit Comments

[u/venir_dev]

Please, don't