GetX - Flutter State management, route, and dependency injection by Rajesh

hello and welcome my name is rajesh i am going to start a new series for flutter and today we are going to cover the best package or you can say which is available top most like you know top third like in you know pub.dev which is very useful for managing state managing route managing you know tons of thing but let's see which package i'm talking about the package name is get x so get x is nothing about is a visit library and which provide you know lightweight stable fast and it's a flutter framework you can say and as you can see it is top three most like flutter okay so most like flutter package in this package what we are going to do we are going to install this package we will go and start a brand new or basic an application and in that we'll start managing the state of two pages or three pages in you know multiple pages we will communicate just like redux there are many flutter you know management system is available but uh that state we are going to manage with currently is get x so what gatex provide first of all first of all it's provide the state manager it's managing your state it will help you to you know bind data from api and get call api and everything some sort of uh you know easy easy pcs to use the api call and all next part is a navigation manager navigation manager in the sense like if you are in current page like home page let's suppose then you would like to go for the next page is about or something like details page and you would like to carry some data as well then there is something called dependencies dependence is like if you are going to the about page somehow you need previous record or ids need to be passed so that's how we will manage the dependencies of it so so this is the current version and the last published is the fourth march okay so let's see how we can start so what i'll do i'll fire up my vs code and i'll start with new window and let's open create a new project so i'll move it into this my project directory and letter and here i will say get x youtube okay get x youtube and meanwhile while it's getting created meanwhile i'll open my you know this part main dot dot and i'll open the devices so i'll start my ios simulator and yes so the application is nearly ready so let's run it first time so the boilerplate whatever we have got that we will see in the ui over here so just wait and meanwhile it will get compiled and it will launch and anyhow this is the boilerplate sample code which is provided by flutter team so i'm going to remove it i will just use this main page i mean separately so i'll i'll guide you what things i would like to do in you know in my style and how you can work with that so currently you can see this is a state managed by you know floating action button then there is increment method available that increment third we use set state and the set state is here so everything is there so this is the default which is provided by reflector team so what i'll do i'll i'll first remove this entire class okay now this is expecting that class or home page so what i'll do i'll remove this my home page and remove this comment as well currently it's just the root of your application yes we all know that's it so what i'll do i'll create three folders over here first folder would be views second folder would be model and the next one would be controller okay so why why i have created this so this folder is going to contain all the pages or the visits inside the views model where i will keep our model structure where data will be presented i mean the you know sample classes and all and then there is the next one is called controller so in this controller what i'll do i'll create my you know state management whatever logic i would like to do for my flutter application that i will keep inside it so let's quickly create a home page so home page dot dot and similarly i need one more page like about piece just for naming convention i'm putting over here so that we should navigate two pages so that we should see if it is maintaining the state or not so it's about dot dot okay so two pieces so i'll came here again so i will do this again same thing but as of now just close this and now we have to work on this home piece so first of all let's import this material package and let's create a stateless visit so stateless visit and i'll paste home page the name and instead of container so what i'll do i'll return a scaffold in this scaffold i required uh you know appbar so i'll put a bar here we'll go with the title so title would be text so text wizard so i'll put this one would be homepage so apparently this is the title and the next go for the body so in the body i'll use you know uh column let's suppose column because it is going to stack everything okay column wise so in this column so there would be children's in this children could take a container so in this container what i'll do i'll uh create one thing um i suppose we'll create a you know placeholder which may contain the count of just like this applications which is currently running so uh will contain uh children text so the text will contain count and the real count will be updated here currently i am putting just a hard coded value eight over here but will update this so let's make this font size also bigger so style text style and font size i'll put out 36 so this home page is uh created it is not showing just because you know i have not updated over here or not used as of now so let's import that package home piece and you know it is imported over here now let's remove it is not required title so what i'll do i'll remove this title okay so the common is there let's make a little bit line so what i'll do i'll put this into the center center wizard yeah and uh here main access alignment main access alignment not in children actually it should be in column main access alignment main access alignment center yeah so it is currently in central now what we have to do we have to get our you know bottom floating action button which we will click and then the count has to be updated so what i'll do i'll create here one floating action button it's a floating action button so in this floating action button what i'll do first i need a child and the child will be an icon so what i'll do i'll create a icon and this icon icon start plus plus plus plus let's go for add and so on press we need to increment that value whatever so whatever logic for you know incrementing the count has to be written over here or whether we have to create a separate you know function for that so as of now if i if i put here print and see count press okay and if i click on it so you know it is getting fired so just for you know verification and all so so far so good what we have done here we have created one text visit so this text visit is going to just contain the value here we have on button press event which is uh provided by this floating action button okay so what i have to do first of all uh let's initialize uh the get x library and let's see how it works so let's visit to this webpage and uh how to install this in the very simple way as usual go to the installation and find this library code and go to the pub dot html and here is the location after this icon you can see this is a dependency so i'm adding over here and just save this file so vs code is running to getting this pub.get so it will get the dependency once the dependency is there so what we have to do we have to follow this uh you know example or if you want go through this the basic one or directly you can use it so the logic here in a get x is uh whatever things you'd like to you know watch out or if any changes happen uh update in the ui or something like that so what you can do you can do something called is make a thing as observable let's take an example of this one so here we have created you know uh count variable so what i'll do here and the same let's comment out it's not needed as of now let's create a bear and count initial values will be zero so what i need whatever count currently we have that i would like to showcase over here so what i'll do i'll just count over here okay so if you see the ui the count is currently zero okay so what i wanted to do here let's suppose if i click on this so i would like to do count plus plus so if i do nothing is happening why because you know this floating action button is not updating and then it's limited to the scope so how to manage that and if it is getting updated meanwhile this ui is not able to represent it over here because it is not re-rendering or something like in you know react or some other programming languages it's a interconnected so what we need we need make this count object and count value observable so what i have to do we have to use obs so currently it's not available because we haven't imported our package so let's import get package get dot dot so make sure you import the correct package okay so now i have observed this value so get this one now what i have to do first of all we have to increment this thing just like we are currently doing so as per what of this example button so here what we are doing we are just incrementing the count now to see the output if i currently run this application if i save this if it is observable already if i count increment but nothing is happening why because this text value whatever we are showing is just wrapping this one okay the initial it is not going to watch out whatever change is going to happen again and again in this observable so how do i uh you know get to the latest value or updated record so what we have to do we have to wrap this thing into this observable so we have to use obx so what we can do we can wrap this widget or simply let's do this ob x function and in this function we will create anonymous and let's get this text inside it let's remove this and call this so uh example wise what is happening over here we have created a variable this value initial is zero and we have applied zero as observable i mean this variable is going to be observed and with the package library we are using get x and whenever count is get incremented so the observable will know the value of it what is the latest value of it so let's save this and let's increment this so now you can see the whenever i am pressing the count plus logic is executing and then observable is observing only this part of the text wizard so only this important i mean this text widget is getting to updated not the entire application okay so this is how it is happening so this is part of the thing now you can say like this is the very you know smallest example and you know it is not maintaining you know a global state management system or you know something superior or some different kind of functionality what we can do we can create a controller so that the controller will maintain this value so what i mean to say let's create it home controller dot dart this will be a class file home controller it will extend what is going to extend it is going to extend the controller so same again i have to import this package get started and the controller which you can say get x controller you have to use get x controller or the same thing which currently we did like we have to you know let's comment it out and what we can do we can define here count initial value is zero now what we can do we can just simply use the you know our logic where we can you know import i mean increment the value so void so in cream and and in this method so what we will do count plus plus and now the library provide great methods there are many methods we'll cover later on but as of now what we have to do just update this so what will happen whenever you are going to call this increment the count will do the job and update will update the related state so what i'll do so here what you have to do you have to get this controller i mean the you know centralized position where you have defined your controller or you can say simply your state then you have to use over here so what does it mean so it means however simple example is enough but whenever something you needed into your you know centralized location then what you have to do you have to create a controller file uh or define it uh you know everything whatever logic you would like to do and then use into that widget so here here is an example what we will do as example wise so we'll create a controller final controller and will get this controller from you know get get dot put so i'm putting to as a dependency you can see this is a dependency here let me create and what is dependency here so the my home controller this controller is going to be dependent here so i'll put home controller so i'll import this so the instance i have imported over here okay and as you can see the home controller which i have defined in the controller directory which is also got imported over here okay so as simple as that it's not very difficult to understand we have created instance of it and we have put this home controller inside the get put so what gateput will do so it is going to control this controller whenever something is going to change so this object or variable or you can say instance whatever you would like to call so it is going to help you to manage your state so the next part is what what we have to do we have to you know just uh first of all let's you know do the logic over here instead of count plus plus what we have to do we have to use controller dot we have created a method called increment let's call this increment method so what increment will do once you click on this button what will increment will go here it will increase the count the initial which is zero and then it will update if it is get updated then also here currently we don't have count so if i say let's get the counts of counter sorry not counter controller controller dot count so as of now if i save it and if i see the current value is zero if i restart the application the value is zero if i yeah so it says the get x has been detected and uh get x has been detected and you should use get x obx for specific widget that will be updated so what it does it mean it is meaning is that you can't use obx over here so what you have to do you have to use watcher watcher or you can say observer but not in this visit so there is a specific widgets available for this scott get builder which is provided by them so what we have to do use over here get builder so what i'll do while remove this first of all let's keep your text as it is okay and if i save everything will rerun properly you can see but if i click on it it's getting updated but we can't see this value to see this value what we have to do we have to get this you know builder or how this builder works i'll explain it very simple way what we have to do first of all let's wrap this a builder so i'll create get builder this get builder required you know controller which controller this builder going to be connected so i'll put over here the name of builder so as of now we are managing the controller is home controller so just put home controller okay next part is builder required few things so let's just remove this builder required as a builder currently the builder is uh you know text but how this text would work so simply i'll create a function over here okay and i need to wrap this this thing one more bracket i think it's required yeah so just we have to pass something so that the builder will get you know connected with it so let me explain it very clearly what we are doing we are just wrapping our text widget over here you can see and with a git builder so get builder what will be do it will whenever some value get updated then it will showcase over here okay so if i save and if i navigate to the space so currently if you can see the last time we have called you know multiple time press the button so let's increase this so now it is working so this is the one of the simplest way but you know currently we are not dependent on this variable or not on it on specific page only so if i would like to you know update some other page uh as we were talking about you know about page as well so what we will do we will um navigate from this page to the about page and there also we will try to showcase that value if it is containing and if it is containing update from there and back and forth we will watch the values okay so what we have to do let's create a button over here again to navigate to that page after the container what i'll do i'll create you know one more um let's put icon button so i can button so i can here i can start next may we get next simply or here just press comma and on press we have to put some logic here you know to navigate to that page oops why it is not working oh i forgot this packet okay so uh on press what we have to do navigate to next page so currently the next page is nothing about is uh about this so what we have to do initially we used to write you know uh context and navigator dot you know many line of code so which i don't remember without but in this thing get x will give you the very simplest way like if you would like to navigate from one piece to next piece what just you have to do you have to just write get dot 2 and the piece name itself so let's say about about page so currently we don't have it so what we do we will do we will uh quickly create this about page import let's import this material import material and uh stateless visit what else about this so in this instead of controller i mean container what we will do wrap with the scaffold and let's do the app bar and uh it is going to contain uh title and let's put a title of text widget and the text visit would be about these so that we will get to know currently we are in about page and let's go for the body and the body will contain with um you know uh column and the column will contain the same information like we will showcase the count currently what count we had you know previous page and also is having the same count over here as well so that we can manage both the pages state so so that to demonstrate you easily to understand both are containing the same value or the updated value as you can see is the single location we have defined our controller and that controller is managing both the pages so the simplest way so let's go for the children in the children let's create a text visit and the text we have to show the count and the count currently we don't have it so we'll just put 0 and let's make this fonts style text style font size 36 so we got this you know text visit now let's navigate to this and what we will do we uncomment this and we say about peace yes it is so currently we are navigating to about page okay so the little button over here which is available for navigating to about this but whenever i clicked so i got you know error so what is this error so you may see this error whenever you are trying because currently we are not navigating with uh you know navigator through and you know this entire page this space or this about page is totally based on this you know my app and my app is nothing about is a material app okay so the material app is already having everything which is already in place good what we have to do if we want you know easy navigation and navigation through this uh library called get x okay so get x will give you the many uh you know functionality so what we have to do you have to just wrap this get material app okay and you have to also import this library so import get get. nothing you have to change only what you have to do you have to just add get and import the library and just save it if you see is compiled and if i navigate to this one it is also refresh so let's rephrase again so that you should be considering its very you know fresh application so as example wise you can say home controller has been initialized created and same material you know controller has been initialized and in sliced and created both things are done okay now what we have to do let's increment this count and if i try to navigate from this location i mean this one yeah so currently we are in about page so we are here so what we will do let's make it in center main access alignment in access alignment in center okay and let's wrap this with center widget so that it should be in center okay good now if you see the count is zero initially we have set it now we have already controller we have defined center location we are incrementing from here now everything is there but if i would like to use that value over here how do i get that in the very simple way what you have to do let's just remove this thing it's not needed as of now if if you need access the same value or global you know scope or global state so what you have to do you have to do one thing like get that you know or you have to just find it out so how you will find out from one page to another page so simply first of all you have to import this library get get dart and you have to create uh you know this one object i mean you can say you have to create an instance of it okay so let's say final my controller what was the name controller home controller home controller and instance like controller and what you have to do get dot find the update to find so what will do if it is connected with any controller so what it will do it will go and find it okay once it is found what you have to do same thing you have to just assign over here what we can do here let's use the controller dot count and close this bracket and currently we are not updating anything oops we are not updating anything just save this value you know if you see the previous page has count 5 if i put 8 and if i navigate it is also having the count 8 correct what if we do we create one counter plus over here so let's quickly create you know one simply one button let's say i can button only i icon button icon icon dot add something or in this on press what we have to do we have to offs what we have to do we have to just uh you know increment the same function so we you know you remember we have defined this increment and then we can use it in about page as well so what we will do controller dot increment that's it so this is if you see the full code it's a very minimal line of code and we have just instantiated the home controller or you can say global state and just connected with the find once it is available then we are showcasing over here and here as well we are just incrementing this thing just save this value so we got the count button over here okay it's not look like button but just consider that as a moment if you go back and forth both the value have the same thing if i increment nothing is happening what could be the reason if you go to the back one yes it is having the value but if you go to the this one then it's getting but immediately this page is not getting updated what could be the reason you guess it you remember we had wrapped this thing with something the same thing what we have to do we have to go and use over here so the builder which i explained you the builder we have to use so what we do we wrap this with builder okay it is also updating back is also updating so let's quickly recap this what we have to do what we have done so far and so good so we just created you know simple application and instead of material app just get material up and nothing fancy we defined the home page in home page what we have defined we have defined a controller this controller is nothing about is let's go to this is nothing about state management controller and it's a simple class file but we have get x controller so it's got another power if you ask me like where is the update so this is all about this get x controller having all the information so what i have done created variable and sign with value and incremented with plus plus so this is the increment method is the simplest method now here what we have done we have increased the value controller dot increment once the increment is done then we have to get observe observing the things whatever changes has been done the builder would get to know what changes has been done in this controller so that's why we have you know pass this home controller over here and then instance of it it will know what is the value of it so this is the one thing once if you would like to navigate from one page to another page so what you have to do just get dot 2 and the name of the page so the name of page currently we have about page so this is the going to take me about page in the about page the same process is there but only we have done very minimal line of code we have already home controller which is maintaining our state but we want instance of that so we just create an instance and that instance how it will find so get x will give you the if this controller is already bind with the get extor it will find it and assign the values to you so all the control which is has in the previous state will come to you and then you can do the same get builder and if you would like to increment do increments so so currently everything is working as expected back and forth navigation is also working so as of now this video is very basic but in future we will come up with the many more options so thank you so much and keep subscribing do like share if you find this useful to you and let me know in the comment section what else part you would like to know from me so that's it for my site thank you so much bye

Channel: Rajesh Kumar

Views: 2,606

Keywords: getx, state management, state management flutter, route management, dependency, get package, flutter, 1.22, how to, android, ios, learn getx, simple state, codex, introduction to getx, basics of getx, internationalization, validation, change theme flutter, getbuilder, obx, obs, state, manager, management, flutter getx, getx flutter, getx package

Id: MFksXWzb_Dk

Length: 41min 33sec (2493 seconds)

Published: Tue Mar 09 2021