GetX Powerful Framework in Flutter in Detail (2021)

[Music] hi friends i am tap from easy approach and in this video we are going to discuss get x package at first we will discuss what get x really is and what are the benefits we can have using get x and after understanding it we'll do some coding to implement get x so that we can better understand it get x is a mini framework within the flutter framework which actually combines goodness of different packages to make development easy and productive it not just combine different packages however it combines improved version of those packages people often think that get x is just a state manager however it's more than just a state manager in fact as i said earlier it's a mini framework within the flutter framework now let's see what get x really provides us so the first thing that get x provides us is root manager which is all about managing roots in the app it means managing navigation between different screens now the second thing that it provides is state manager which is for managing a state of the different part of the application getx provides simple and effective estate management solution with almost no boilerplate code the third main thing that it provides is dependency manager which helps managing dependency injections it provides easy way to inject dependencies to dependent clause at last it provides some extra utilities which can be helpful at times now let's see each of these feature individually so that we have some idea what they actually do so first thing first root manager the main benefit of root manager is that it itself provides its own apis for navigating different screens which actually avoids boilerplate code because as you know while playing with navigations and roots you have to write long boilerplate code however if you use getx you don't need to write long boilerplate code now let's see an example suppose if we want to go to second route or if we want to navigate to second route normally what we do we write this whole code just to navigate from one screen to second root now suppose if we are using get x now we don't need to need to write this whole thing we just need to write get the two and we need to define the root on which we want to go so how amazing is that and you can imagine how much time we can save and how much productivity it can increase in long run now let's discuss estate manager tedx provides powerful and smart reactive state management solution although it's reactive means it works on streams however get x creates an abstraction layer and hide all the behind the stuff so we don't need to work with the streams and as it is a smart estate manager it automatically disposes the states when it is no longer required or referenced in some other state manager you need code generation like when you work with mobx you need code generation however with get x you don't need to generate any code and the fourth cool thing about this estate manager that it has simple and short code now just to give you a rough idea that how simple and cool it is you can see this example although it's not a complete example however it will give you a little idea how this works you can see we have observable variable and for making it observable we don't have to do anything fancy we just need to write dot obs and that's it and we have instrument function which is actually changing the value of counter variable which is an observable variable and to show this changeable text we just need to wrap this text widget inside the obx widget which is actually short of observable widget so this is it you just need to write this code to make the simple counter application the default application that we have when we create the application and you know in in that application we have a lot of a lot of lines uh of code and here we just have we just have six or seven lines so this is how the state manager works now the last core thing is dependency manager which provides an easy and simple way to inject dependencies to dependent clause without the need of context you may have used provider as dependency injection which requires context with injector however get x doesn't need context and has simple code here you can see the comparison between provider as dependency manager and get x as dependency manager so you can see while using provider you have to pass the context while injecting the dependency however with get x you don't need to write any context and it has more simpler code so that's another cool thing about get x package last but not least get x provides some extra utilities that can be really handy at times like you can open a snack bar using more simpler code without need of context similarly you can open the default dialog without use of context in it and you can pass data between different screens using this and you can play with translation you can change the theme dynamically you can use the get x validators to validate different strings so these are all the things uh that makes get x a complete and powerful framework now as we have discussed get x we can implement it now in order to use get x package in our flutter project we need to install it first so for installing it you can go on google and you can type get x flutter and you can open the first link and in the first link you can find the installing tab so you can go on installing tab and you can just copy this thing and you have to paste this thing in pubspec.yaml file so you can paste it after capertino icons and you have to click on this pubget this would install this dependency and then we can use get x package in this application now before implementing get x let me show you some of the code and structure that i did before to save the time first of all inside the lib we have a directory name page in which we would have all the pages of this application right now we just have two pages the first one is the home page which will be the default page of this application and the other page is we have detail page which we will be use as a second page now inside this home directory which is actually the page of the application we have further two sub directories the first one is controller and the second one is view the view obviously would hold the view for this screen however the controller which we'll be using in future right now we don't have anything the controller will be used uh for state against this screen similarly we have detail page and inside it we have view that is holding actually the detail screen the widget of the detail screen and then we have the controller that we'll be using in future so let's see what we have in the home screen the home screen is pretty simple it just have a scaffold widget and inside it we have an app bar and we have column widget for the body that is actually wrapped inside the container with infinite width so that it takes complete width of the screen and inside the column we just have one text widget that you can see on the screen right now this is home screen now let's see what we have in detail screen it's actually more simple screen we just have a scaffold and inside it we have an app bar that is uh showing detailed screen and then we have icon button as a leading widget which we'll be using to go back to the process screen now at first we'll implement root manager from get x package as it is first simple and effective thing in get x so basically we will use get x provided api for navigation and we will navigate from home screen to the detailed screen so for this uh what i'm doing i'm first creating a button uh on the home screen so that on pressing it we can navigate from this screen to the detail one so let me first minimize this and now let's create a button i'm creating a flat button and in the child we can just give text go to detail and for making it little bold what we can do we can give some color as well let's get text color white you can see now we have the button as well on the screen now let's write the code for navigating from this screen to detail screen now let's suppose if we are not using get x what we have to do for navigating from this screen to detail we have to write this code navigator dot push and then we have to specify the context and then we have to specify a material page root and then we have to specify the builder and there are a lot of things to just go from one screen to another so what we can do using get x we can use dot 2 and inside it you can specify the widget or the screen you want to go on so i want to go on detail screen which is i think detail screen okay so just you have to write this code you can see how amazing is that and how much time you can save because you're actually avoiding the boilerplate code but before running this or testing this there's one more thing that we have to do we have to change this material app to get material app that is actually the modified version of material app provided by get x so this is required when you are working when you are using navigation apis from getx so we are actually using this navigation api so we have to do uh we have to change this material to get material app before before running the application so now let's run the application okay so now let's test it so we should go to detail screen when we click on this go to detail so if i click on this you can see we are navigated to this detail screen now for coming back to the previous screen what we can do inside the on press of this icon button that we have defined in the app bar what we can do we can just use get dot back there's nothing fancy no boilerplate code we just have to write get dot back so let's restart the application and let's click on go to detail this would take us to detail the screen and if i tap on this back button this will take us back to the home screen you can see we don't have to write while our plate code that's the beauty of this navigation api it's from get x also if you want a user to navigate to some screen and you don't want user to come back this actually happens when we are working with the splash screens so you don't actually let user come back to the splash screen so what you can do you can instead of using get.2 you can use get dot off so this would take the user to the detail screen but when user would want to come back this won't allow user to come back let's click on this if i tap on it you can see the user cannot come back it's actually closing the application rather than coming back to the home screen it's actually restarted the application now using get x you can also have the name roots as well rather than directly navigating to detail screen you can use the name against this screen so what you have to do before using the name roots you have to specify the names of roots so for that for that you can use get pages and it is actually the list of cat page so you have to specify all the pages of the application inside this so you can use get page and inside it you have to specify the name of the route so as this would be the home screen so i'm giving here slash home and against this name you have to specify the screen widget that is a home screen okay so this is actually we have to do something like that okay and for the other screen that is detail screen you can just change the name and the screen widget and now rather than defining whom what we can do we can give initial route and we can give here home so this will open the home screen as initial route as initial screen and for navigating uh we can now use get dot to name and rather than specifying here the widget we can specify the name of the screen that we have associated here so for going to detail screen we have to write this and now if i run the application this should take us to the detail screen and you can see we are now on the detail screen and we can also come back since we have used here to name instead of off name so that's actually root manager from get x package that one of the great things from this package and you can see you can save a lot of time by avoiding the boilerplate code using these apis for navigating from one root to another now we'll see the dependency manager as i said earlier getx provides easy and simple way to inject dependencies it helps you getting the same instance of the injecting class throughout the application let's see how we can inject dependency in in our home screen so for this what i'm doing i'm creating a dummy service class that we will inject in the home screen and down the three screens so that it will be available in home screen and all the screen that will come after home screen so i'm creating a package with the name services and inside it we can create a dummy service and we can name it api underscore service anything you want so this will be the service it's actually a dummy service that we will inject in our home screen and we'll try to access it in the home screen as well as the detail screen and the other screen up that will navigate to for further so what we can do just create a class name it api service or anything you want it will be just an ordinary class and inside it just create a dummy method like fetch image or fetch text from api and inside it just returns some text so we are actually trying to mimic how we get the text from api okay so we have to change the return type to string because we are returning a string and inside it just create another variable with the name value and just give it uh some random value anything you want because we'll test it as well now say if i want to access this fetch text from api or this value in home screen and in all the other screen uh that is down the tree uh of home so how we can use it so first of all we have to inject this api service in our home screen so that it will be available down the tree so for injecting what we can do we have a code first of all write final service or you can say api service and for injecting what we have to do we have to use get and we have dot put and here you have to specify the name of the dependency so we have api service that we want to inject so this actually inject the dependency and it also returns the reference of the service so you can store it and you can use on in this screen so if i want to access the method that was inside the api service this one and i want to print it on console what we have to do we already got the reference we just have to write here print and we have to access api service and inside it we have the hashtags from api but this will print the text that we have returned from here and we'll print it on console so let's run the application let me open the console okay so if i tap on it go to detail because we have all this function and on tap of this black button this should print the tags that we have returned so you can see it prints the text as loaded from backend so how amazing is that that we have injected the dependency and we are calling it here but this is not the actual amazing thing the amazing thing comes when you try to access this api service in the in the other screen that is down the home screen so what we can do if i want to access the same uh fetch text from api in the detail screen so for that what we can do for now i'm just commenting this thing and for accessing the api service reference because because we have already injected in the home screen you can see here now for accessing what you want to do we have to write final api service any name you want to reference it and for accessing you have to write get dot find and here you have to specify the type of the service you are referring to and this is how you you can access the api service or the service that you have already injected before so similarly like we did earlier we can call the function and i want to print it on console so just wrap it inside print so this should give the same result let's open the application again so let's open the terminal and let's go to detail screen um i think we have commented the code for navigation so let's comment this thing now and open this thing let's restart the application and let's go on detail screen and if i tap on it because on tapping on this back button this is calling the fast tags from api and this is printing the text that is returning by this so this should print the same thing that you were getting before you can see it's uh it's giving the same output and you can easily access anything you have inside the dependency so in the home screen we have injected the dependency and in the detail screen which is down the tree of home we are accessing this api service and this is not the new uh this is not the new instance of the api service it's exactly the same instance so when we do get dot put it creates the api service within the get package it does not create the api service object inside the home screen but it creates it inside the get package so when you try to access it by using dot fine it actually returns the same instance that you have created earlier not the new instance now as we have discussed the root manager and dependency manager will now see the estate manager and we'll see how we can use it to manage the state of the application x provides simple and smart reactive state manager in which you can have a state with many observable variables the variables that you can observe on ui and change the ui accordingly whenever the observable variable gets changed get x gives you get x controllers that you can use to encapsulate state data against your screen so first of all we'll create a controller for this home screen so you remember we created this folder this package controller for each of the page so now we are creating the controller so inside it just create a new file and just give it a name so we are naming it home controller and it will be an ordinary class first home controller and then we need to extend it with get x controller and inside it will place all the state data or all these state-related functions that we'll be using in the home screen so as this is the introduction a video or just the basics of get x we are not doing something really fancy so i'm trying to keep it as simple as possible so that you can better understand so we are actually making the normal ordinary counter example so for this we have to create an observable integer variable and that value can be changed whenever user would click on increment so i'm creating a variable and just giving it a name count and initializing it with zero and to make it observable you don't have to do anything fancy you don't have to generate any code like if you have worked with mobx to make a variable observable you have to generate some code so while using get x you don't have to need you don't have to do anything fancy you just have to use dot obs after the variable value and this is how you can make the variable observable and now let's create increment method so that we can increase the value of count inside it so just do count plus plus and we are not going to create the decrement thing because we can understand uh only by having this increment now let's open the home view and let's inject this estate in our home screen so we have to do the same code just we need to change something here you can name it state or you can name it home state and here you have to write home controller you can say it home controller as well this thing anything you want or maybe we can do it home controller so this is a state but get x8 is it controller so we can say anything now what i want to do first of all let's restart the application so that we can see the latest result now what i want to do we i want to show here this is home screen i want to show here the counter value so what we can do we can simply write home controller and inside it we have count and what i want to do whenever the user would click on this go to detail so i want to increment this count variable so you can increment it by accessing controller inside it we have increment but before running the application because as you know this account is observable variable and it can be changed anytime when when the user would hit on this like button so we have to observe this variable and we have to change the ui accordingly like we do set a state but in reactive programming we have to observe the change and we have to change the ui accordingly so observing the observable variable we don't have to do anything fancy we just have to wrap the widget inside the obx widget which is the short of observable so this is what we have to do so we have obx and in the widget callback we just have to return the widget that is actually utilizing uh the observable variable so now let's uh run the application to test whether it is working or not you can see right now it's showing zero as the initial count value and if i click on this go to detail this is increasing uh the count value and it is also changing the ui accordingly because we have used here obx widget that is actually short of observer so it's actually observing the observable value and it is changing the ui accordingly as you can see uh we have actually injected this home controller in home screen we can also access the same controller the same instance of this controller in the detail screen and down the tree of this home screen so if i try to access this home controller in the detail screen with the same 10 text the home controller inside it and if i try to print the current count value let's open the console and let's run the application right now it it has zero so if i increase some okay so for a navigation we have to we have to make another button so let's go on home screen and let's create another button i just duplicated this one let's change the name of this to increment and this one go to detail and rather than calling anything we're just calling the api for navigating to detail screen or we can change the color of it as well okay so if i go to detail screen and if i tap on back button because we have we have some code inside this uh on press of this back button so this should print the current value of the count i think that was eight so you can see it's printing eight so you can access the home controller in the in the detail screen and down the three screens as well there's one more thing that we are going to discuss and that is actually the part of get x state manager so it is actually binding binding makes cadex more beautiful and organized it actually binds dependencies and states together with root so in this way we we can know which screen is utilizing which state and it will be more readable and organized now before implementing the binding let me create the controller for detail view as well so that we can understand the binding better so we don't need actually this controller but we are just creating uh so that we can understand so just name it detail underscore controller and make a class detail controller extends with edx controller and you can leave it empty because we don't really need the state data in it now as i said binding binds the estate and dependencies together with a root so let's first create binding for home screen so that we can bind its estate and dependency together so what i'm doing i'm going inside home and i'm creating another package for binding and inside the binding i'm creating from binding and for creating binding class you just have to give it a name and you have to extend it with bindings and once you do it you get some error because you have to override a method which is dependencies and inside inside it you have to inject all the states and all the dependencies that home view is using that home page is using so you know in home page we have this api service dependency which we are injecting and this home controller so what we can do we can we can cut this and we can paste it here because as i said binding binds the state so this is actually the state for the home screen and this is actually the dependency that we are using in home screen so it binds these two together so that it it will be more readable and we don't have to find out where which uh state is actually using home screen and which service is using which is screen so now we can import it and just import api service and since we we just need to inject these dependency we don't need to get the reference of it so we can get rid of this and this is how you can create the home binding and because now we are getting the error we have to get the reference of this home controller so for getting it we can do the same thing like we are doing it here we have to find it and now you don't have any error but you can see right now we just have a binding that we just name it home binding but we haven't practically associated it with the home route so for associating this binding to the home route or to some specific route we have to go in main and we have to go and get page where we actually specify the name to a root and inside it we have binding and in binding you can specify the binding you want so we are using home binding for this home screen this is what you have to do to associate this home binding to this home screen now these uh where we have the home binding okay so these are the dependencies and the state that we have injected actually in the home screen so it is the the similar code that we've done before but making binding we can see now it is more organized and more readable and similarly we can create the binding for for the detail screen as well so just uh we don't we are not using any we are not injecting any dependency in detail but let's create a binding so that we can understand and let's name it detail underscore binding and extend to get sorry it's just binding find things you need to overwrite and we have just created the detail controller so we can just to understand we can bind we can inject it even though we'll not be utilizing this so now we can associate this detail binding to the detail root so just go on main where we have actually specified name to a root and here we have to specify this binding so let's give it detail binding so now let's restart the application so we did we created the bindings and we have removed the injecting code from the from the home screen so rather we have replaced it to find because we have already we have already injected in binding class and we are just referencing it to use so in detail we are also doing same we are not injecting anything we are just finding so let's restart the application it should behave same even though we have changed everything if i increment you can see it's incrementing and if i go to detail it's going on detail and you can see on on press of this back button i know it's a little weird that i'm printing on this back button but but just to show you so if i tap on it you can see it's showing the current count value from the home controller so you can see how easy and amazing is the error is everything about the get x we have used dependency manager we we have we have seen that we don't need to have the contacts in order to get the reference of the dependency however when we use provider we need to have the context and also with the inherited widget however in get x everything is simple for navigation they are providing very simple and noble plate code apis for navigating navigation from one screen to another also for dependency they are very great and for the state manager they are giving reactive state manager with lesser amount of code and with no code generation and boilerplate so this is everything great about terry about get x package now at loss uh we have some extra utilities that comes with get x package so i'm not going to show everything but just to show you some things so that you can see what we can do with get x so if you want to open the dialog so what you can do i'm just commenting this navigation code and rather i'm using get dot default dialog and inside it you can specify the title and if i run the application if you have already worked with the dialogues you know that you have to write almost uh six to seven lines just to show you show a dialogue on the screen but you can see it is just a single line and if i click on this go to detail you can see even though it's saying dialog made in three lines of code but it's just a single line you can see the dialogue is working so how amazing is that and also we have a code for snack bar you can have some title and you can show some message this is lx snack bar just remove this or comment this thing so if i click on this go to detail it is now showing the the snack bar it's coming from the top you can change the position and it will come to the position whenever from up from wherever you want so i want it to come from bottom so you can give it bottom and if i click on go to detail you can see it's coming from the bottom so i think this is it from this video in this video we have discussed uh get xp first i first told you everything about edx it was totally theory and then we have implemented it i know we haven't uh gone in so much complications i kept just i kept it as simple as possible so that you can have basic understanding of what get ex is and what you can do with get x now you can extend it by your own and you can make something really awesome and amazing and you can show me uh and you can show me in comments as well so thank you for watching this video if you like the video please give a big thumbs up and if you haven't subscribed my channel and please subscribe my channel and share the videos with those who want to learn flutter with easy approach so thank you for watching

Channel: Easy Approach

Views: 41,342

Rating: 4.9334388 out of 5

Keywords: flutter getx, flutter getx tutorial, getx flutter, flutter, getx, flutter tutorial, flutter state management, getx flutter tutorial, getx tutorial, state management in flutter, getx in flutter, flutter get, getx tutorial flutter, tutorial getx flutter, in flutter, getx tutorial for beginners, route management getx, getx vs bloc flutter, getx tutorial step by step, state management using getx, what is getx, get flutter, getx package, flutter navigation, getx state management

Id: V0oxG3tWiwk

Length: 40min 15sec (2415 seconds)

Published: Sun Jan 17 2021