Complete GetX State Management | Flutter

what's up everybody welcome to the amateur coder channel so today we're going to do the long-awaited get x state management so here's the app we're going to build i try to keep it very simple so he get over all the core parts of the state management solution and understand exactly what it's doing so this top bar right here is going to be using a get builder this button over here is going to be using obx and get x and on this screen we're going to demonstrate how the summary builds whenever either of these counter rebuilds as well as a lot of other stuff that this package includes and how to use it and everything so let's get into it so before we start i wanted to make clear exactly what the different types of state management that get x offers so it offers reactive and on update state management solutions so these two are the reactive state management what does that mean it means these are constantly listening to changes on whatever state they're looking at and then we have on updates so with get builder this is similar to provider where you notify listeners you just call this update function and whenever that update function does get builder we will be rebuilt then there's also mix in builder which is if you want reactive and on update within the same widget so we're not going to go over it in this tutorial since it has it's a very specific use case you'll 99 of the time you'll be using get x ob x and get builder so those are the differences for these two you listen to any changes on your observable object and forget builder you just rebuild whenever an update happens so now let's get into the code all right so here's our starter code there's nothing really here we have a first screen with just a couple buttons and a floating action button doesn't really doesn't do anything and we're able to go to the second screen which actually has nothing we're going to fill these screens as we go and then we have one model called the user model so we have the name and the count just a normal regular dart model nothing fancy so we're gonna first start with the get builder option because it's the simplest it consumes the least amount of ram and it's just it's the one you probably should use unless you want to have your unless you need to have your app reactive so first thing we need to do is we need to create a controllers folder so the controllers are pretty much what will control your state of the application and let's make our first one the very simple account controller so let's create our count controller class and we need it to extend get x controller and then inside we're just gonna have a simple count we're gonna initialize it to zero and we're gonna have a very simple function called increment and what we're going to do increment the count and so now the last thing to make our get builder update we need to call that update function that i talked about and there we go that's our whole controller for our git builder so then we get to our first screen what do you need to do first when you're using state you need to inject it so how do you do that final account controller state account controller equals get dot put count controller so you could think of this as if you're putting or injecting your account controller into this variable and then very simply we get the get builder and what type of the get builder it's account controller and then we need a builder class where you return a text widget and display the count it's right it's zero now we're not updating anything that's because we don't have anything down here but very simply we have account controller increment that's it and there we go we have state management in our application so what's special about the git builder you notice how we're injecting up here let's say we are only using it in the get builder you can easily just do init and initialize your account controller here and then you don't need this line at all so whenever the first time this get builder is used it will initialize the count controller and if we reload it we see we have a problem our account controller.increment over here can't be found super simple we do get dot find and we want to find the count controller so the get builder whenever it's initialized will create a account controller and store it in ram and then this find looks through ram finds your account controller and then increments it so let's see if that works perfect very simple so get builder it doesn't get any more complicated than that you just have to call the update and it'll update your get builder and then inside you can display it you have a lot of other properties for example you have dispose make sure to look through those if you need even more function now one thing to note if you're only using state management with get you do not need to have a get material app so if we save that and reload you'll see this count value will still work it works just as you want so removing that get will make your app size a lot smaller and a little bit faster if that's what you're looking for but you do need to get in order to switch screen so that's the reason i had it there all right and there's really not too much to it with get builder so let's get into the reactive side of things so for the reactive part we're going to be using our user model we have the name and the count and now we need to set up a new controller called the user controller because that's going to actually take care of the state the model has no state it's just a model right and but the user controller does so we have class user controller extends get x controller and inside we're going to have a user state and it's going to be of type user and we want that to be observable so this is how you make your state observable what this does it wraps your user class inside an rx user and then you have properties like update retrieving the value things like that so we're going to have one function we're going to call it update user we're going to pass it account so this current count value that we have and then inside here we'll be able to see all the things user does so we have first rebuild listen map stream all those things what we're going to do is update so we're going to have the current value of that state and we can change value dot name so our user name right there we'll just change it to my name and then value dot count which we will change to the account we passed in so now whenever this gets called it will update this user state but we don't need any update function here because it's already observable and whatever is listening to this will update automatically so if you remember from the beginning there's two reactive solutions why do you need to so obx doesn't do anything except listen to it but get x you can have an init dispose as well as other things so if you're really worried about ram you you should use obx whenever you can but get x doesn't consume too much ram and if you want to initialize within the actual get x then you can do that so let's first show off how get x works so we want we want to observe the user controller that we created and inside we have an init where we can initialize that user controller just like we did with the get builder and then we need a builder where we can return simple text so a user is an rx user type if you remember so it's an observable type so we want to get that user's value first and then since its model has multiple values we want to get the name and if we restart you'll see the name so this update name and stored count that button is over here and we're initializing the user controller in here we could have done the put method since we're going to be using it in multiple places but we can also just do get find then user controller dot update user and we'll just pass the count three for no so once we click on this you should see the name pop up now we didn't have to do any update or anything so now the second part is the count value we're going to do that with an obx so with obx you'll notice there's no init or anything it's just a builder so let's create that return it's going to be very similar to the one up there and then for this we'll use get dot find and user controller again dot user.value.count and remember we put three in here so it shows us three so now to make it official how we actually wanted it we can do the same thing and find our account controller and we can just pass the count to this and then whenever we update that will get updated as well so in this specific case instead of using get find in a lot of places for the user controller i would probably just do a put at the top so there we go that's pretty much it we have the get builder get x and obx all taken care of hopefully you understand the differences between each of them and when and why you should use them get builder rebuilds upon update get x and obx are reactive so whenever this controller changes the state within the controller it will update only difference is obx doesn't have any init or any properties so if you need a very lightweight solution then go with this now the second part of this we're going to go into a little bit more advanced for observables so we're going to go to the next screen for that and we're going to add a new controller we're going to call this the sum controller so the sum controller is going to be pretty similar to our user controller but it's going to have a couple special features so we'll have two accounts count one equals zeroed and make it observable and we'll also have and we'll have a second count and then we'll have two functions to increment each of them and then the one special thing we're going to do so do in get sum equals count one dot value plus count two dot value and this sum will get rebuilt whenever one of these changes even though we're not listening to this directly long as one of these change the sum will get updated there's going to be more advanced things inside this control that we're going to add but for now let's just display this so our second we're going to have column with 3 get x that rely on the sum controller and at the top we're gonna make sure we create an instance of the sum controller i'm gonna add one for count two one for some and then two buttons so i'll be back after that so here we have our three get x and added a little decoration with a couple of text files we have the count two and then some then two buttons at the bottom so some controller that increment the first one and then some controller increment the second one so hopefully you'll see this works and there's a reason i put all these count two rebuild and count one rebuild you can see them pop up down here you'll see all three rebuild if we increment the first one see count one and summary build and this we increment count two and summary build so some even though it's not observable itself relies on two observable objects and it'll always rebuild all right so last little feature that i think is pretty powerful so in your actual controller you have these things called workers the workers you can put in the init function and what these workers do i think is super powerful so we have four that we're gonna go over so we have ever and we're gonna listen to count one and we're all we're gonna do is just print and we'll say count one has been changed and then we're gonna have three more we'll have once and this will be the first time count one is changed then we have d bounce which fires when count one hasn't been changed for one second and for this one need to add a time so duration seconds one and then this one interval every one second count one is changed this also needs a time so now we'll go over what each of these workers does because these are very powerful in my opinion so let's increment counter one we should see these two show up because this shows up every single time count one is changed and this shows up the very first time ready there we go first time it changed and then one second later count one hasn't been changed for one second and interval every one second count one has changed so these two are the even more powerful ones this d bounce one let's say someone is mashing the button right let's say you'll see i'm going to mash this button a bunch of times and this one will only pop up after the one second after the last time i mash it so you see it's changing and then when i stop there we go account one hasn't been changed for one second so let's pretend the user is doing what i'm doing you're just clicking the button a bunch of times and you want to upload this count to the server you don't want to be doing it after every single time it has changed you want to do it after they relax for a little bit and give it at least one second so this way where you'll save a lot of time writing and reading from the database or any other reason you would need to debounce then there's also interval let's say you're doing your users doing the same thing where they're mashing the button a bunch but maybe it'll never really stop but you don't want to do it 20 times you would rather just do it once every second so your your things are updated but you're not reading and writing to the database that much i know i'm only going over like the database uses but i know there's a lot of uses where this comes in handy for example some ddos stuff with debounce so that's pretty much it for get x and hopefully i covered all the basics that will get you started i in my opinion this is all pretty simple to use you just need to figure out whether you need to be reactive or or not if you don't then you should probably just use get builder there's one more quick thing that i want to show you it's not really necessary but instead of doing this finals some controller sum control you can just extend get widget and then our sum controller then we need to make sure to update these to controller then whenever once we restart everything should work the same so what this get widget does if you go into it it basically creates an instance if you don't have one if you do it finds it and then returns it uh to a controller variable and now you can just use that so that's a little bit cleaner but yeah that's it for get x and state management i think it's pretty simple to use i think i'm going to be using it for my next project but anyways hope you enjoyed hopefully i broke it down enough to make it easy for you to understand and that's it so this code will be on github if you have any questions or anything make sure leave it in the comments make sure like subscribe and share the video if it helped you and thanks for [Music] watching [Music] i

Channel: Tadas Petra

Views: 45,377

Keywords: amateur, flutter, flutter tutorial, flutter programming, getx, getx package, get package, flutter get, flutter getx, getx flutter, get flutter, flutter state management, state management, dependency injection, flutter package, flutter framework, microframework, getbuilder, observable, getx state management, getx state, obx, best flutter state management, simple state management, simplest flutter state management, reactive flutter, reactive, flutter cubit, flutter riverpod

Id: CNpXbeI_slw

Length: 18min 15sec (1095 seconds)

Published: Tue Jul 14 2020

Reddit Comments

[u/jrheisler]

Good video! No matter your choice of state management, it's worthless if no one knows how to use it.

[u/thepurpleproject]

This package should have been broken down into a different package. From a service locator to a whole lot of crap.