GetX in Flutter - Part 1 (Observables)

hello today i'm going to talk about a library that's becoming more popular it's called get x it has things like state management uh key value store pairings navigation snack bars and toast and has a few more things too but today we're going to talk about the biggest reason to use it and that is the state management aspect so if you go to the docs for get x you can see here this is the main page it has a few of the things i mentioned it also has theming validations here um but yeah we're going to focus on the state management part so if you go to the state measurement part here and you go down to the bottom this link here you'll get an entire page just for state management and it's a pretty long page as you can see so they do a very good job with their docs like a very very good job my goal is to teach you the state measurement aspect uh as quickly as i can here so let's go back to the code and i created a little app that could be something like a restaurant so you have a name here i just call it pizza shack you have a number of followers for the restaurant you have a flag saying if it's open or closed i created a section here for followers and a section here for reviews this could be like a restaurant dashboard here and if you go to the drawer here i have a few different options i want to be able to change the restaurant name add or remove followers increment or decrement the follower account toggle the status to open or closed add remove reviews for the restaurant and update the menu so i'm going to do a quick walkthrough of this if you want to skip over this part that's fine but in the main here i have the home edit add followers taco status etc screens here and in the home screen i have a list or sorry i have a single child scroll view with column info cards so i have three info cards i created these as separate widgets just to save some space there's a lot of code that already exists in this app that i created so um i wanted to kind of separate things out a little bit so card info widget you can see here we have the card widget and we have the title text here so these so this general followers and reviews section is part of this column okay and i also have a rounded input for let's go to our added reviews so you can see this is the rounded input and i have this in several different screens so change the name to and i had the side drawer here too with all of our drawer items okay i'm not gonna go through all these other screens right now um but i wanna put this code up on the github repo as it is now and then i'm gonna put up a separate branch with the finished code so you can kind of walk through with the video and do it yourself too so once again this code as it is now with no state is actually going to be put onto the github repo in a separate branch as the finished code so i'm going to go to the home screen and let's look at the info card for the name so we have general as the title here and we have pizza shack and followers 0 and text open so we want these three things to be set by the user and we want to store these three things in a state object so first i'm going to create a new folder called controllers and then i'm going to create a new controller and call it restaurant controller okay and if you go to the docs here you can see that the first thing that we want to do with state we'll get into these variables here soon but the first thing you want to do is create a class that extends get x controller so keep in mind that getx controller is not a widget so when we create this we're not extending a widget you'll see why that's important later okay so let's do class i'm going to call it restaurant restaurant controller extends get x controller and i've already added that to the pub spec here so you can see we have get here okay so the first thing i want to do here is i want to define all my variables for this restaurant i'm actually going to create variables for different types so you can see how you would actually handle the types okay so the first thing i want to do is create observables so if you're not familiar with observables i encourage you to research that on your own uh i'm not gonna get too much into that we want to create final variables so i want to say final name equals and then we actually want to initialize this name here so i'm going to say pizza shack and this last part is what you have to do with get x you say dot obs so this returns a rx string with this initial value here okay so this is the basic way how you define an observable with get x and you can see here um they've done the same thing up here too we're not going to use all these but we're going to use most of these okay so i'm gonna say final follower count equals zero by default so zero dot obs and then do one for the flag is open so final is open so this will be a boolean so you would define the true or false date so true.obs and then final follower list equals so this would be the follower list here so i'm actually going to find that as an empty array first so let's do empty array.obs and then finally i want to do a map to demonstrate how to use a map with getx so i'm gonna do that for the reviews here i'm gonna have a name and a review so it'll be two strings so i'm gonna say final reviews equals and then i'm gonna define it as two strings so string string and then the default value would be a empty map dot obs okay so these are probably the five most common variable types that you'll use in your app so that's why i chose these types here and now in your gex controller you have a few different functions that you can override you can override the init so we can say on inet and we'll come back to this later now how do we actually set these variables so you cannot set these directly because final is a or name is a final variable right and it's an rx string it's not a string so in order to do this it's actually pretty simple you would define a function i'm going to call it set name name and then i'm going to pass in the string that we want to assign to it so i'm going to say string resto name short for restaurant now we actually want to set the observables or we call it the same here so we say name and this is a rx string so we can set the r string directly by doing parentheses and then we just put in that string name okay so this actually sets this string to this observable value so it's not setting the name our x string it's setting the value of the rx string itself which can change okay so now let's go back to our code over here and i'm gonna go actually before i do that um let's change this to pizza cabin so we can see the change so pizza cabba then let's go to the home screen and up here in order to see an observable as it changes or as the initial value you need to wrap it in a widget called obx so obx is from the get x library you say obx and then you pass in whatever widget that you want to set so you always want to wrap a single widget with obx so now we can put that inside here okay so now this obx is wrapped has wrapped this text as it is now this doesn't really do anything so we actually need to tell it which observable values that we want to use and that is inside of our restaurant controller but we need access to that controller first right so let's go up here to our build and i'm going to say final restaurant controller equals and now we actually need to find that controller so to do that you say git and then you say dot find so this looks for a particular controller that we want to assign to this controller here and this should actually be lowercase so lowercase and let's actually shorten this to just save some space call it restore controller so get that find and then you need to tell it which type here so find of type restaurant controller and then we just put the parentheses here and that's it so get looks in your app for this particular controller assigns that git x controller to this value here i hope that makes sense so far so now let's use this inside of our obx widget so down here instead of pizza shack we're gonna say register controller dot and we have name here so name but remember name is not a string name is a rx string so in order to get the value we just say dot value and then we save and let's reload and let's go up here retro controller not found you need to call git output restaurant controller this means that we're not telling the app to register that controller so in order to use a controller in your app you need to register it first so let's go to the main and i'm gonna get rid of the arrow function okay and take this and return that here instead and then here i want to do get dot put restaurant controller okay and that's it so now this app knows that it has a restaurant controller that it needs to register restart i forgot to save so let's restart and now you can see we have pizza cabin here instead of pizza shack so that means that our restaurant controller that name that value is here but that doesn't mean that our bx is working so we want to test this too right so let's go to the edit name screen so here i want to change the name and when we submit this text box i want to have the name change here and on the home screen okay so the code right here right now is pretty simple it's just a rounded input workshop name on submit we just submit or we just print the value here so do this and now you see the value printed down here okay when we submit i want to call that set name that we had here okay let's copy so while we're here i want to save some space here i want to put this inside of our controller and you'll see this pattern a lot in the docs too so we want to say static restaurant controller restaurant controller and then i want to make a getter for that so i want to say get and you can call this whatever you want to in the docs they call it two so i'm just gonna call it two and then we wanna just paste that into here okay so instead of calling get.find controller every time we want to find a controller we could just call that controller.2 it'll save some space it'll make it so we don't have to search for this in this manner every time so let's go back to the home i'm just gonna say restaurantcontroller.2 okay so i'm going to copy and paste this into the edit name screen let's import that and now instead of the name here i want to put the actual name from the controller so for that again we want to wrap this in opx so obx same syntax let's import and then i want to say resto controller dot name dot value let's reload you can see it says pizza cabin so the cool thing about obx is that it only updates this widget if this value changes so if you change other values inside of this controller this doesn't care and this will not change if only name is changed this will get rebuilt and the rest of this screen will not get rebuilt only this particular widget will get rebuilt when this name changes which is pretty awesome so now we actually want to call that set name function so let's go down here now we don't need this ob x here because we're not actually listening for it let's say retrocontroller dot set name oops here so let's do restore controller.set name and we just pass in that value let's save and let's try something here burger queen and then press return we see burger queen has been set but it has not been updated here so let's actually reload let's go back to the name let's say burger queen okay and now it's been changed to burger queen so keep in mind you might have to restart so now we see that here let's go back to our home screen and we see burger queen here too so whenever you want to listen for the name change in your entire app you just wrap any widget that wants to use that name with obx and then you listen for the name from the controller very very simple stuff i love get x a lot okay let's go back to our controller and now i want to write the rest of these functions to alter the value of these rx objects up here okay so let's go down here and now i want to do one for the follower count so i want to say increment count i'm just going to say follower count and then we pass in the value that we want to set so i want to say the current follower count dot value which is an ant because we define it as an here it knows which rx value or which rx type of object to map here to these rx list rx bull rxent so we say follower count that value plus one and now i want to decrement so let's do decrement similar concept here follower account follower account dot value minus one the boolean is pretty simple we just do set is open and then i want to pass in the boolean value so bool open and then let's say is open set to open okay and now we get into more the complicated data structures up here so we have our list here and our map so to update the list i want to create a function called set follower list so this will actually set the entire list we might not use this one but it's good to know how to do it anyways so let's do set follower list list of type string and then we can pass in the list here and then we can say follower list so in order to update the following list we cannot do it the same way as here if you do try to do it you will see and it'll say that it cannot evaluate to a function so in order to update the list it's actually not that bad we do dot so you can actually use the same functions that you would use on a normal list mostly for this i want to say assign all so assign all will overwrite all of the existing items with the new list and that's it and next i want to add a single follower so let's add follower and then for here i want to pass in the follower name a string name and then do follower list and now here i just want to do dot add so dot add name now i want to remove a follower so let's do remove follower and then i'm going to pass in the index that i want to remove so i want to say int index and then i want to say follower list dot remove so you can use any of these if you want to uh you can pass in a condition you can uh say last etc but i just want to do remove at remove at keep it simple and now i want to handle the reviews so the reviews are a map an rx map let's go down here i want to add a review so i want to pass in the name and the review so pass in string name and string review and then to add it to the reviews you do reviews so similar to the follower list you cannot just do this we want to do dot add and we pass in the key value pair which is the name and review very similar to what you would do with a normal map and next i'm going to do remove review and then i want to remove the review by the key name which is the name so i want to pass in the name and do reviews dot remove name okay pretty simple stuff i love how organized things can be when you use your controllers correctly uh in this app we only have one controller right now and it's controlling all of the data on this one screen here and we can actually set these values once we actually implement that so we have set name done so let's go to the account screen so let's go to edit follower account that'll be this here so right now i have these two buttons they don't do anything right now so the first thing i want to do is i want to add our controller you'll start to see a pattern here as we go along so let's copy this into our edit file account okay let's import that and now instead of zero here i want to put retrocontroller dot follower count dot value which is an int and then you cannot have an in here by itself so you need to put it to string and to make sure that this value is updated when we change the count let's set that as an opx so obx and then we just assign it to this make sure we import that here save reload so now we actually want to increment and decrement the value when we press these buttons here that's pretty simple we can just do resto controller dot follower count we want to set the actual count so let's do dot decrement and down here we can do resto controller dot increment pretty simple stuff and let's go to the home screen and let's do something similar here with the count so we'll wrap this in obx so let's do obx let's do right still controller dot now we want to observe the account so we do follow account dot value and then dot t string okay so let's go back to the count screen and actually let's go back to the home screen i've got to change the string back so let's do string with followers and then we'll use that variable here and look at this okay now let's restart oops i put it in the wrong section okay should be here okay restart now let's go back to the count screen now let's change the value so up up up down down down let's put it on six let's go back to the home screen and you can see that we have six followers now so pretty cool stuff uh very easy i'm not checking for negative values so we can still go below zero which is fine i just want to show you how easy that is to change the counts like increment and decrement a value see 11 here so we have that now let's go to the toggle status and we want to show either open or closed here now we just show open so again i want to copy and paste this retro controller put it into the toggle status import let's go to that screen and see how it looks all we have is a text here saying is it open so let's go to the switch and i want to observe the state of the toggle button here or of that value the boolean value so let's wrap this in obx you know the drill obx okay and when we change this switch i want to set that is open function to true or false based on the value so that's pretty simple we could say restore controller dot set is open to value and this value here is set to false by default i want this value to be whatever that is open flag is so let's do retro controller dot is open is the boolean name or the rx bowl name so it's open dot value very simple stuff so let's restart let's go back to the toggle status and you can see that it is true but we don't actually know if it's working or not right so let's go back to our home screen so here we have open so now i want this to be whatever that is open flag is so let's wrap this in the obx okay and instead of open here i want to say restore controller dot is open dot value let's put a condition here so let's say open dot value so if this is true we'll have a ternary operation we'll say if it's open then i want to show the text open else i want to show the text closed oops yeah we're already inside the text view so let's just put these values here okay that's a lot better so let's save reload so now it says open so let's go back to the toggle status now let's change it to close so close let's go back and now we can see it says closed and let's do one more thing just to make this look a little bit better let's use this same condition here and say if it's open use green else use red and this should be a question mark not colon okay so let's restart now you can see that it's closed is red and open is green okay that looks better okay now we're gonna go to the followers which is not quite as simple so let's go to the add follower screen and you can see we have a list view with five items let's go here you can see follower one two three four five now i want to update this list of followers when we enter a new follower here so this is a widget that would be listening for the list for the follower list so first let's wrap this list in opx okay and i want to add that same controller to our add followers so let's do that up here let's get rid of this put that here so i want to create a new tile for our data i want to be a little bit more functional so let's actually change the tile here keep the text here as a title but now i want this to be controller dot follower or sorry it should be retro controller resto controller dot follower list and now we actually want to show that list follower name based on the index so this is a list so we just do brackets index okay and up here with the item count now we don't have a set number of items so up here we need to do resto controller dot follower list and then we get the length of that list so dot length okay so this takes care of listening for the follower list and the list view itself so up here with our rounded input we're passing in the on submit right now i want to call our add follower function from our controller so let's do controller restro controller dot add follower and then we just add the value okay so let's restart let's go back to our followers here now this list is empty which is what we expect let's try to put a name in here and see what happens and now you can see that our add follower name here is correct so we actually were able to add the follower here so we're still not showing it on the home screen right so let's go back to the home screen and we need to update the followers so down here followers card so for this list view you could probably guess i'm going to use obx and listen for that value with the list view and instead of saying john here three times i'm going to put in the actual follower list from the index so you actually need to use the dollar sign here for that to actually get that value so we do dollar sign bracket and then we say restore controller dot follower list pass in the index close brackets so let's restart okay so this error is actually not very helpful to see what the problem is here but um i noticed it right after i ran it i just forgot to update the item count so we say three here so right now we actually don't have three we have zero so this is not a constant number here so we need to do the same thing that we did before on the other screen we need to say resto controller dot follower list dot length okay so let's restart and now you can see we have no followers here which is what you expect okay so let's go back to our add follower screen and let's add a bunch of names here tom uh casey mika and let's go back to the home screen and now you can see we have those three names here okay that actually wasn't too bad right it's not really that big of a deal to update a list compared to primitive variables so yeah keep in mind that you would wrap your entire list view in obx not just the list tile here okay so for the last part of this we're going to update the reviews so let's go to the review screen so this screen is a little bit different because this one has two inputs so let's go to the rounded input widget real quick so we have the text field here with all these other parameters here now i want to actually add something to this so i want to be able to get the values from these so this video assumes that you know how to use text editing controllers to get the values of a text input we need to do that because we want to set the review from both of these values at the same time okay and we're also going to add a button here which is something i probably should have done before but it's not a big deal so we're going to pass in a final text editing controller and just call it editing controller and then this one is not going to be required so i'm just going to say this dot editing controller and then down here set the controller field to that editing controller so again i'm assuming that you already know how to do this for a text field but here we're just passing it into a custom widget that we have for our text input okay so saving that let's go back to the add review screen define our editing controller so i want to say final name input name input controller equals text editing controller and let's copy and paste this and call this one review input controller and now down here i'm going to set the controller the editing controller field to name input controller and down here set that to review input controller okay and now i want to put a button here i'm going to leave some room here so i'm going to say size box and do a height of let's do 16. and now i want to put a flat button here the child that would be a text and let's just say submit for that submit so let's do unpressed so now for the unpressed we're going to submit the review with the name and the review string we have our controller actually we don't yet so let me add that restore controller restore controller let's import that and put that here so resto controller and we defined our ad review so we can say add review and we pass in the name and review but those will be part of the editing controllers so we can get our name input controller here name input controller dot text similar for this one we could say review view input controller dot text so that sets the state of our review list by adding a new review based on the input controller text for both of these fields here okay so down here we don't want to do this anymore so i want to wrap this in obx okay so now this is listening for nothing yet actually so let's define our item account first so let's do resto controller dot reviews so this is a map right so reviews dot length okay okay and now for this list towel i'm gonna change things a bit i want to get the entry of the map so instead of getting the review name first and then the review value second i want to just get the entire entry so above our list tile here i'm going to get the entry so to do that is pretty easy you say map entry so an entry is a map file you keep here so map entry let's call it review entry equals controller restore controller dot reviews dot entries and then for this it's of type iterable map entry string string for that we want to get the element since it is iterable we could say dot element at index okay so reviews.entry.element index okay and the map entry as i said is a key value pair so now for the list title instead of just a text for the tile i want to put this inside of a column so i want to show the name and then review underneath it for each tile so let's do column children and then i want to have two text views so one text view or one text i mean one text will be reviews entry and it'll be the key which is the reviewer name and then i want to have the text review entry dot value which is the actual review itself okay hope that makes sense we wrapped that in obx so we're listening for this review so this entire obx only cares about the rest of controller.reviews so if anything else changes this won't get touched show the key and value in a column while we're here let's uh copy and paste you could probably just create your own widget and import that into both places but i want to save time for the video and put it into the home screen here so instead of home uh reviews uh let's do that here so let's view and to here i know that looks pretty messy uh let's see if we can clean this up a little bit here so column info car obx and then we wrote that list view around the list view this is a lot of widgets we could probably clean this up a little bit but let's see what we can do here side door container edge incense single child scroll view actually we can get rid of let's copy this padding we can get rid of this container here we don't need this because we can add our padding to the single child scroll view here and then let's get rid of one of these that's a little better but that should do for now okay so we have our reviews let's reload so now our reviews are empty our followers are empty uh let's go to our review screen and we have our button here uh i want to change the button a little bit so let's go to reviews let's go to our flat button and i want to change the colors add some colors to this let's do colors color colors dot deep orange uh let's make the text white so let's do style text style color colors dot white and let's make this stretch the entire length of the inputs here doing that is actually pretty easy we need to go to the column up here and make sure that this is all stretched out so let's do cross axis alignment cross exit alignment and stretches how you actually stretch the children across the entire screen so stretch okay that looks better okay so let's add a review let's say julian and i say good food and press submit we could say julian good food okay pretty easy so let's add one more let's go uh random name nancy let's say two salty now we have two reviews here let's go back to our home screen and now you can see we have two reviews here too so say julian good food nancy do salty we could justify things here to the left but this is fine for now i'll probably play around with the ui a little bit after the video is done so that handles all of the different variables inside of our restaurant controller here we handled updating the state for name or for strings for ants for booleans list and maps so i also created a update menu thing here i'm gonna create a new controller so let's go over here and let's do file i'm going to say menu controller controller dot dart so i wanted to show you a couple more interesting things for get x state management let's create our menu controller so let's do class menu controller extends get x controller and i'm going to show you how to create a state for an entire object we have our menu object here it has a name color and location so name color location and we have three different inputs here so let's go back to the menu controller and now i want to create a final uh menu equals so before with our observables we had primitive types but now let's create one for an entire object so to do that is actually pretty easy you define the object here menu and then you can say dot obs and that's it so that makes this entire class observable as a whole so whenever you change anything in the menu object it'll affect the state here so let's copy and paste this in here to save some time uh let's do like this menu controller and now i'm going to create a few different functions to set the state so first i want to set the state of the menu itself so i'm going to call it a set menu i guess and then i want to pass in a menu object restaurant restaurant menu and then we do it the same way that we did before we say menu and then we can pass in that oops restaurant okay pretty simple so now i want to show you how you would actually update one single variable inside of the menu object so let's say that we only want to update the name instead of the entire menu so let's do set menu name and then i'm going to pass in the string name doing that is actually pretty easy but it's a different syntax than before so we can use the menu variable here but now there's also an update function so this uses a callback to update the value internally okay so they give you a sample here too so that update this person object you want to update just the name so let's do that here i want to update the value this can be called whatever you want but it takes this observable it takes that value and puts it into here but i'm going to call this menu object you can call it whatever you want to call it menu object and then we can say dot name so that's the actual menu name equals name so that equals this name here that we pass in and you can do the same thing with the location and the color if you want to you can do set menu color setting your location i'm actually not going to do that for this video i'm actually going to leave that up to you so so i can kind of leave the rest of this as an exercise i have the menu model here i have the update menu class here so i'm going to leave that up to you to kind of figure out how you would actually update this date for the name the color and have that change in the list here so for the submit button you can actually submit the entire menu object at once and add that to the menu function call here or you can update all three things individually by going here and pressing return and it should update the the actual name here so if you pass in the name here it'll only change the name here it won't affect the coloring location but if you press submit here it'll pass in all three of these values i'll leave that up to you guys to figure out how you would do that one more thing for that also if you go to the update menu you would need to actually create your text input controllers for these three things yeah i'm going to leave it at that for now so i hope this video helped you get started with state management and get x it's actually pretty easy and pretty fun so uh i might do more videos on gitx in the future too yeah stay tuned for more and happy coding bye you

Channel: The Flutter Factory

Views: 13,914

Keywords: Cheetah Coding, cross-platform development tutorials, flutter tutorials, GetX, flutter state management, flutter observables, flutter apps, flutter getx tutorial, flutter state management tutorial, how to use Getx

Id: XDDMOsv-vQM

Length: 43min 29sec (2609 seconds)

Published: Fri Oct 30 2020