Flutter GetX Tutorial for Beginners | Full Course in 3 hours

hello everyone welcome back to my four star squad youtube channel in today's lesson we are going to talk about the stain management innovator which is the get x package and it is the most like package in pub there so and i'm going to quickly guide you through what contained in these get eggs so basically uh you contains a round management uh state management and also the dependence management so i will probably divide this entire series to three part of the video so in today's video i will focus on around management if you are new to my channel feel free to reach out to my channel page and you will find a flatter ui from scratch tutorial and flat tutorial for beginners and the dark programming language tutorial and also this series is flutter stat management tutorial so i hope you'll learn and how to build a complete flutter app from scratch okay without further ado let's get started so first let's open our visual studio code and here i write some code and i will walk through those example so and explain to you uh what it is and how you can use it so first are we going to talk about the route management in get x so in get x we have two type of raw so one is you can use navigation without like a name and another one is the navigation with nan so we will first go to this let's open our emulator and visual studio code and as you see we can use get.2 and we navigate to another route in the flutter you can use a navigator of context and dot push you push to a new route right so in get x you can simple just use this get to and you go to the next screen so which is another uh a page in here so so for this first button this using this get to next page so when i click i will navigate to a new page right you will see in the new page uh we all have the option to go back to previous page because in here we use the get to and you will see we also have the scope back button in our app bar because uh we are in the second of our navigation stack so as you see i dropped this picture and here is our home page and we're using the get 2 so this is our route stack and we are in the second place of our route start so if we using get back we will pop this stack out of this route start and we will back to our home so this is we using get to this one get to to the next page and we can use get.back to back to our previous page and also we have this get all so what's different between get to and get off and back to this image if you're using the get off so for example if you are currently in your home route and you call this get off so it basically will remove this uh home route and you navigate to these uh next page right so you don't have chance to go back to your previous round because the home page already uh replaced by your counter page so for example in here you can back to our previous page right because we're using get two and if we using this get dot off uh to the next page you see we don't have any like a go back button on our app bar and also we click this back button it doesn't work right so in this back button we simply just call this a get back function but it didn't work because you see this image and our current 30 year route is in our is in the first place on our route stack and so what's the get off all so the get off or is uh for example currently you are in the home route right so you're using get to and you pop you push this route stack and you call this sketchy again right so currently you are in the third place in this row stack and you call this get off you will remove uh these get two let's get to these two route so you currently i will replace this entire route stack with your currently route unlike this image those three will be removed right and your home homepage will be replaced with the commentary page so that's the the difference between uh the get off or and get off so next we're going to look into what's the attribute inside this get to method right so that's back to visual studio code and you see here we're using another uh widget function instead of widget right and you see the mind map we're using this uh get2 and we're passing these next screen widget so we navigate to next screen page right so the reason here i use this widget function because using which function is the instead of widget so fully guarantees the widget and it is a controller will be removed from the memory they are no longer used so highly recommend you using this approach and also for this get two we have another attribute for example the transition so if you are coming out the transition so by default when you navigate to the other page sorry we need to restart this application when you navigate to the other page by default you will pop from bottom to top right you see the new page will start from bottom to top so we can make it uh slowly so we set this duration to one second so when i click these uh get to you'll see our page is from button top and we can change the transition so here and i define the transition to right to left so i save and when i click these button again you'll see our next page will show from right to left right so we can set these a transition so another one is we can set these curves so what's the curve the curve is some animation you can use to control the behavior so for example we have a lot of curves animation and here i'm using the em out so let's see this one so you will slow at first and faster at the end and you see we have a different kind of like curves and you can try different ones and to see which one meet your requirement so back to our mind map and up to that we have another attribute which is called argument so for the argument an argument can be used both in this without name row and also the name so the argument is existing in both route however the parameter so the parameter only existing in the next round so we're going we will talk this argument first and back to a visual studio code for this we're parsing the argument so when you move your mouse you will see the argument uh actually accept this uh dynamic type so it can be anything so you can pass it like list the map and even now it's allow so let's see and here we passing the data to our uh next page right so the argument will be hello world for get.2 so and let's check our next ring page so in the next screen page we're using these get dot arguments to get these argument back so let's save and we like click the this one you'll see will receive argument which is hello world from get.2 right so for example if we comment out this one and we save it and we back to our previous page and click again and we will see a noun really because we didn't pass anything so if you didn't pass anything so by default it will be now another thing you need to notice is we actually can return some data back to our previous page so for example when i click this get to so i using this await keyword make these on press asynchronize because i i'm waiting for uh the data uh which uh from the next screen page and you'll see in this uh get that back we have this result attribute so i pass this string like a success to indicate we success in payment or something or login in our second page so this result actually receive a string type so you can pass this one back to previous page so in here i will receive these success so let's open our terminal and let's see i navigate to our second page let's go on command download transition and when i click this uh get to next screen and i pass the argument to the next screen and when i back i will have this success indicate allows operation success right because i return this success in this get that bag another one is this close uh close overflow uh inside this bag so by default it's false right suppose you have a lot of dialogue or snake bar or burdenship you want to close before you navigate to the other page right so if you set this to true and you call this get.bag and you will close all over layers right so let's back to these diagrams and we finish these arguments in both row so next we will talk about the name so let's back to a visual studio call and the name rom means you have a nan right you give this round name you're using these get dot to then and this name i will link to the next screen right and you will have a for example you must rub everything inside your get material app so for example you when you use this library and first you click this installing uh installing a tab so you add these dependents like these so in your pubspca file you added these dependents and then you're going to add these uh library right import this package get in the library and next is you need to wrap your application inside these uh get material app so before okay material app we're using like a normal material app however if you want to use those uh raw management stand management in this get x you must change your material app to get material app right so inside this get material app we have something a different attribute for example these get pages so the get page is kind of like a round map so you have this round end and you map to this page so when i call this get.2 name with our name so you will see we will have will to the next screen so i think uh this should be sorry i make a mistake this should be a name uh should be the next page right hello send photos as well okay so this is using the net round so we have this home route which indicates we are in our navigation page so we have slash next brow indicate we are in a next screen page right so for example when i click this get dot to nand to the next screen i will uh navigate to next screen so and you'll see here in here we're using get.2 nan and so let's see i will go to the next row and also we have an option to go back to previous route because we're using this get get.2 right you can also use uh get off and route but when you're using this get-off name and you don't have chance to go back to previous route so for example when i click this one i don't have chance to go back to previous round and we can check this diagram again so if you're using the get 2 so you have chance to go back to your previous page so if you're using the get off or get off on end so you will replace your currently route with those route and however you if you using get off all and get off on end so you will clear all the route stack and only keep these uh currently route in your route stack and also as you see the argument works in both route so for example i have argument in these get.2 right we have argument and also we have argument in this scatter off and we have argument it is get to nan and get off then so argument actually exit in above routes and however the parameter only exists in the name routes i'm going to show you how to use this parameter in the name route if you're trying to use the parameter in your network you'll see we have at least a route table right and we specify this route so for example if you are trying to use the parameter you have a two different type of uh approach so the first one is you using this quotation mark and you append your key and value in your url so after that are you you're using these scatter parameters id or nan so you can get those uh one two three and this uh razer which is my name and in your second page right and another way is you're using these simple so the id here is actually a placeholder so you will map to this one two three so you can also get this id by by this one two three right so uh this one is uh what you write in your like a raw mapping for example here so you slash your id right so this and here and so for here you have a get dot 2 right so you have get dot 2 n and you slash 1 2 3 and in this way it will actually map this uh id uh to this one two three so we can save in this case and go to our next screen and we're going to get these data i think it's called parameter right run meters and we can access our id so let's say and where i need to restart so um here i think uh using this get.29 right so you see we have this get.2 nand and uh which is one two three so let's save we actually map this id so with our one two three so okay maybe i need to refresh oh sorry i changed her in the wrong place and it should be here as well so let's save again and we're using this get two nand one two three and i click this one and you will see we have a argument would be one two three i actually this should be for parameters okay so let's save so you see we actually uh retrieve this id uh because we're using this placeholder for our id right so another way you just using this normal you remove the placeholder and you're using another uh approach which you append the id right equal to one two three and in this case you can also uh get this id so let's place here and here we go back to placebos page and we save uh when i click this get to nan you'll see we can also get this parameter id right so there are two approach we can get these uh parameter if you have some knowledge in web so you'll be know those also if you have a multiple parameter you need to pass into your route so you can actually create a parameter a variable you will store this into a map so you just pass this entire map to this parameter attribute so you see when i move your mouse in this cat.2 we have these parameters attribute which receive this map object right so you could do this way as as well so the last one i want to check is the we can have a aluminum middleware and in our get x which is this routing callback attribute in our get x material f so in here so inside our get material app we have another attribute called routing callback so we will receive this routing object and you can check if a routing dot currently if equals to the next round so for example if i want to open the advertisement in our next round so we could using this callback so for example watch my console so when i go to our next round okay the reason we didn't bring out this statement because we actually navigate to a very specific graph so we could delete this parameter right and we try again so we delete those parameter and we save again so this time when i click these get to that we will see this open ads in our console so let's clear it and click this get to uh right you see we have these open ads because this route actually a map always match this slash next route so you can add some like a listener or any callback inside this routing callback to do your own business logic so i think uh that's all for the today's lesson i hope you uh will have a clear uh understanding for the wrong management in this galax so for the next video i'm going to consider uh for those state management and dependence management so don't forget to subscribe to my channel so thumb up my content and open a notification so you won't miss out the latest flat tutorial okay guys uh thank you for watching i will see you in next video hello my friends welcome back to my four-star school youtube channel in today's lesson we are going to talk about the state management in get x we have talked about the raw management in get x in our previous lesson i will put a link in the description below so feel free to check that part of video if you haven't watched yet also if you are new to my channel feel free to reach out to my channel page and you will find a flatter ui from scratch tutorial and a flatter tutorial for beginners and also a data programming tutorial so don't forget to subscribe to my channel and thumb up my content also open the notification so you won't miss out the latest flutter tutorial okay without further ado let's get started in get x there are two type of state management or one is simple state management another is reactive state management so first i will talk about the react state management language back to the symbol of state management so for the react date management first you need to declare a reactive variable so let's back to our visual studio code and also open our [Music] android emulator and i have write some example i will walk through with you guys and give you an explanation uh what's going on in the sample code here so first uh let's go back to this my map in get x we have a three way to declare a reactive variable so the first way you using rx type for example i extreme ice boolean and x int ix double so another is you're using a generic type you you have this ix and you're using this uh bracket and the last one is you add obx at the end of your variable you have initial value for example here let's go back to our visual studio code so here is our uh first approach to declare a get x variable the reason we make this final because this one actually is a object so we have this object type and we can access to this variable using values here these types are predefined by get x so you can just use if you know what the type you're going to use so you can use this way and but i didn't recommend for this approach so let's scan our second approach so let's open comment so for the second approach by using this ix uh with this bracket so inside this bracket you're going to have your generic type so for example here are using the boolean type uh which can start sdk so we have integer type and we have a double type number type and this type map type as well and what's more we can define our custom type so for example here we have our user type so the user just uh our custom defined class with the nand attribute and the edge attribute so we also have these uh content constructor uh with those two name parameters this stem by default will be empty uh the h by default zero so back to these reactive state management doctor and you see we define these user variable and we mark it as a final because uh you declare this one so you cannot change this object address but you can change the value inside this object and we have a default uh value for this user so i give my name and my edge for this one and because we have a default value so i can remove uh those uh as well so it's a highly recommend you have a default value for those uh reactive the variable uh since we are using uh now safety uh flatter uh version so it's better to give a default value for example here i have a default user an empty map for these my map and empty these are for these items and we have a zero for the number false for the boolean so this is our second approach uh to decrease reactive variable and the last one uh last one is this approach so let's comment it out so the last approach is you just add this.obs at the end of your initial value and you make this a variable observable so when these values change and your ui will automatic update and i'm going to give you an example how the ui will automatically update when you're changing the value so for here we're using this account variable right and we mark it as observable and actually it will show on the screen an initial value will be zero so we scroll down you see i declare a function called increasement uh we'll get these value since it's object so we're going to access it is uh interval by using a value right so this statement will equal to count value equals count value plus one right so are we just using this shortcut so we will increase this uh count variable and and also we scroll down you see i using uh this one obx so what is obx uh back to the mind map the obx actually uh receive uh another function which uh take a widget as it is a return type and you have your observable variable inside the widget so when you variable change you automatically rebuild you uh view right so in here uh we you we return this text widget inside our obx so you when you move your mouse you will see this obx actually receive the function for it is a builder right so we're going to return this text widget and we have this count variable right and we can access to it is value using dot value right so if you move this counter so by default it's rx in right it's it's object so we're going to use the value to get it is actual value which is it and scroll down we have this uh flatting action button so when you click it you will call this uh increasement method which we defined here we will increase the value so let's check when i click this button this number will increase you will see so that's pretty simple we don't using any i can stay for widget in here but we actually achieve the same result as we're using the stable widget because uh get x uh make these a variable observable so every time the value change it will only rebuild these text widget so in this approach we actually make this counter app without using any stable widget right so we just using this obx and also these uh observable arrival next i'm going to show you how can we update those custom class right so back to visual studio code you actually i define these user class right i have this name and age so for our reactive state mention data actually i declare here as well so i will command now this part to make my name turn to up case so there to approach to update custom class so so i'm going to show you the first approach okay okay here is the first approach i'm going to comment it out and here you will see my name and my age because we are a custom class right so are we going to update the value for example in this case when i press this button i want make all my name capital letters and also increase my edge so if you didn't use this approach for example are you using this approach like we did for our counter it won't work because for the custom one you actually need to use something called update which will received uh your own instance and you update that instance so for example i will declare the user right the user variable and we give it initial value and we're using this obx to render our name by using user value dot name so we are not using user.net value we're using user.value.n because we make this entire class observable so if you may want to use something called a user dot net value uh this means you only make these uh variable observable so you are not making this entire class observable i will talk that in later so for this case and we can using value uh user value name to access my name and we can you and another approach is you can using this user and you have this bracket and you can also access to it is value in this case so i'm going to click this button and you're going to see my network turn to up case and my edge will be increased so let's see you see actually this line of code works the reason it works because we receive our user which uh which is this one and it receives itself and update itself right he updates you up case and update his age so some of you may have a question like i can update the value using this uh shortcut can i do in here so the answer is no you cannot do in here so for example i restart and click this button you see only my name i'll tend to up case but listen this one doesn't work uh because in this time we observable is entire class so we can now using this shortcut so we need to manually update this value by changing to these you will work now so so the next i'm going to show you if i make those attributes inside this class observable so i will command this out and so here i have a user class right and we have these uh nan and h and i make it observable by add these obx so in our stay real state dot r and i will comment out this one and uncomment now this so this means i only observable the variable inside this user class right and so in this way we don't have this update method so since we are no observable this entire class and we're going to uncomment this out we only watch how it is value so you'll see here we first have this user and we're using nand to access it is name and also then we're using this value so it's different than before we were using user.value.net and in this case if you want to watch individual attribute we're using user.net dot value right so in this one and we're going to scroll down so here and we're going to make a comment and comment out this one so we're using user.net value okay so when i press the button uh you'll see are these razor uh tend to up case and also this integer i will increase my age right and also we could use this shortcut because we observable on the individual parabola right we normally observable for this entire class so we could using this approach that's for this reactive state management so i hope you now have a clear understand how to use and when to use it so back to our visual studio and let's combine now this one we're going to open this one so we make a this entire class observable again so we comment now this there are another approach to update the class right so first we're going to change it back to a normal class and we observable the entire user class right so for here we declare a user class and make it observable for update we could using another approach by using this approach you're going to pass the entire new object so let's comment this out and comment out this okay so let's save so by using this approach when i click this button you will see the nand will turn to up case but h will turn to zero because by d4 you see our age will be zero so if you're using the second approach you're passing another object so let's see when i click you see actually uh my name can you up case by the edge will tend to zero and you won't increase so if you know what you're doing and exactly the variable or object you're going to use so you can use the second approach so otherwise i still recommend you using the first approach so you can using actual like a method or do some your business logic in here so this is another uh stuff i want to mention okay let's back to our mind map you will see i write this usage and we have this obx and also get x controller so if you i want to using those two you must contain observable variable seems like you have these these three type of variable inside those two so if you want to using get builder you don't need to have this observable variable because we are using this simple state management this is another approach provided by get x so you can simple management use state and next i'm going to talk about this so let's back to um which stereo code and here i write those two class so for the first one if you want to use this simple state management you must declare the controller for the class so for example here i make my own controller class which extends the cadets controller and i make this variable so discount variable and also i declare a method which increase this counter but also so the most important part is this update and you will access to this update um only inside this get x controller so you must extend this controller and you can access this uh update method by which to update your variable and you will notify uh the ui to change the ui so here i will combine now this reactive stream management and i will uncomment out this simple state management so let's open our android emulator we might need to restart our application okay here you see we have this simple state management and we only have this count of arrival shown here and because you see we're going to walk you through what's inside this simple state management class so it's a stateless class and we only have this gap builder you see here are using get builder you will notice for the simple state measurement we don't i use any like obs or any of those three to declare variable so this counter are just the normal variable of this integer type right so in here we're using this get builder uh we have this initial attribute and which uh receive the controller so we're going to create this this this controller uh by using it is constructor and we pass into this gap builder right and then inside this builder attribute we can access to this controller so here and then i will call it controller with small kc and we have this text widget and we can using controller dot counter to access our counter but rob right basically this this widget will show this zero on our screen and also we have this uh floating action button when i click this floating action button i actually will call this uh increment method inside our simple state controller right so the reason are using this up case class.2 dot increment because we actually declare this static variable controller get to and you can using this one so if i comment out this we don't have a like a chance to get these method so we were using something called get [Applause] dot fine we're going to find our controller yeah get down fine we're going to pass the controller all right so it will be here the increasement right you see we can access to this increment by using this one and let's open our console and you'll see first we have disk material controller which is this get material app then we have our own controller because in this gap builder we uh create our controller so we controller log into the memory so let's means all those method of variable loading to the member so we could be using this get down fine to find our controller which in our memory and we could call it this increased method so when i click this button the counter will increase actually so let's see and since we have another approach so we could comment uncomment this out you see we declare a static variable 2 so we could using another way to find our increasement to the increasement oh sorry i need to save this first and using dot increased man i'm sorry it should be controller to the increasement you will see when i press this whole reload uh because we separate our view and controller actually uh is still a because the the number we store is inside this controller so we must press this restart to clear our state so you have to start from zero okay you see our controller have been clear and when i press this button the number increased yeah and so that's two approach you can use to call this function inside the controller and that's the approach you can use for this simple step management for this gap builder okay so back to here and also in order to uh give you the example was the get x uh this widget so this one actually uh i write something here uh we have at least uh can we can access to the controller and we can access to its standard value so here i declare another variable uh i make it observable so i have a i mentioned here if you want to using this get x these you must have a observable variable inside those two let's see my name john here uh using this control.net dot value so you'll see in here so when you move your mouse you'll also see we have a any show this attribute so because we already initial our controller in this get builder so we don't need to initial in here so you are using the send controller from the memory okay so i think uh that's all for today's video and we have a talk about these uh simple state management and reactive state management in this get x and however there are more topic related to the controller and also the dependence management so i will talk learn in a later video so don't forget to subscribe to my channel and sum up my content and not open a notification so you won't miss out the latest flutter tutorial and after we finish this entire getax series series i will using this get x package to create a flutter app from the scratch so i will teach you how to separate your view your controller and your business logic and make the complete the application for instagram okay thanks for watching i will see you in next video hello my friend welcome back to my four-star school youtube channel in today's lesson we are going to talk about the get-x controller we have learned a get-x-reactive estate management and simple state management in our last lesson so if you are new here feel free to reach out to my channel page and you will find a getax tutorial for beginners including the raw management state management and also you can find a flutter tutorial for beginners and our tutorial for beginners after you finish lab you can watch this flutter ui from scratch tutorial so don't forget to subscribe to my channel some out my content and open a notification so you won't miss out the latest flutter tutorial and i will going to make a complete flutter app after we finish uh this gedx tutorial and we're going to create the app using this get x package okay without further ado let's get started okay in today's lesson we are focused on the life cycle of the schedulex controller so let's back to our visual studio code here i write some code and i will walk through up those examples and give you explanation how those uh code works so first as you see in our main dota and i just return our get x control example and this is uh this one in view dot dot we have our get x control example first we going to return this i get material app and then we have these scaffold inside scaffold we have this app bar as you see here the app bar can contain this get x controller this text widget and after that we have this body attribute uh we have this center widget uh with which conclude uh this uh get x widget only show the count of variable and after that we have this floating action button uh basically we'll increase this number here and also we have this controller and here we define a controller which extends the get x controller so back to this my map first if you're going to use the get x controller you must create your custom class which extends the get x controller so in here uh we create this controller class which extends the get x controller and in here this controller can be anything like the class name can be anything it could be my controller right and so for symbol i just make this controller but you can have a custom name [Applause] okay and after that we declue a variable discount variable we make it observable the reason i make it observable because in here we're using this get x right uh remember in last lesson if you're going to use the rbx widget or this get x widget inside the variable must observable so we're using this observer if you using the normal variable uh you can use this get builder so first we're going to use this observable variable after that we can change to normal variable and we can achieve the same result so here i declare this observable counter and i create this increment method which increase this variable every time when i click this button and also i have this clear count of method which will clear this count when i dispose uh these controller usually on close at this method and don't worry i will talk uh this later so first and let's focus on this counter and this increment method and back to our view doctor and we separate our logic and the ui so for the ui we just simple display this count variable we initial our controller right and for this controller we can access to it is countable variable we could using this controller.com you see when i move my mouse you will see this count actually is integer type so we need to use this stop value to get it the integer type right and we display on the screen and we have this floating action button when i press this button this cat will find this controller and call this increment method the reason i can use this syntax because i put this controller into the memory i can just click this one and you will see the count increase okay let's back to remindmap and next i'm going to talk about the lifecycle of this cadx controller so for it is lifecycle and we have three method inside the get x controller so the first one will be own in it method another one will be already and last one will be on close so back to a visual studio code in this controller so by default if you create this controller in line 24 right we create this controller and these all init method will be called after that these already will be called and if i remove this page with this a controller associate and the enclosed method will be called so here let's open our emulator and i will clear this console and i click this restart button so just watch these also careful okay you see first we're going to see this material controller because we're using this game material app this game material controller usually will handle some route or theme so in line 24 we create our own controller so let's uh this line we create our controller and this only int method will be called and this already will be called as well those two method right because you call this initial method uh back to this view so another way uh to make these you can using this obx uh wedge as you see in this obx we didn't have this initial attribute so we can now create this controller but we have another way to do it so we can using this line of statement we declare a final variable and we're using this get output and we put this controller and then we can using this variable also in this floating action button we can find this controller because they are in still in the memory so we could save that we're going to restart our application and you will see because it's outside of this material app so first it will create the instance of our controller right so the controller on it has been code after you log into the screen these already will be code so we could press this button uh the whole like a functionality still works i will talk about these get dope independence management tutorial so let's comment out this one and we're using the first approach which is get x and we need to comment this out and we save again uh we may need to restart this application okay we start restarting the application and let's go back to this controller in this unit method as you see we have a lot of specific copy we can use inside our own unit and so the first one will be ever and let's back to visual studio code the error this method will call every time when these counters change as you see so by default this count will be a zero when i press this button and these debug brand i will print on our console every time i click this button okay and this time i need to restart our application because i want this on ee messer chord again if i press this horizontal it won't i'll call this on init method because these control already load into the memory well you see when i click this one nothing change right but when i click this restart this only measure will called you see our controller only been code so i can press the button and you will see this counter variable will show on our console so first i press one two three four five six and you will see we have one two three four five six so every time this variable change i can bring out it is value and if you have a multiple of a rubble you want to watch you can use this one which is called ever or this method and you actually receive these a list of variables so here i just put this count of a variable so basically you are do the same function as this error so let's restart this application okay let's click this button and you'll see these print statement print five times because i click five times so this is for this ever and ever or and another one is this one for the ones so let's comment out this and comment now this and we need to restart our application the ones will call only the first time when this variable change so for example uh initial value will be 0 and i click once the value will change to a 1 right and when i click again the number change but the print statement didn't bring any you'll see because it only called once so depends on your business logic you can use this kind of function so let's comment out this one so the third one would be a d bound we need to restart its application so for the bounds suppose you have uh this uh search bar and use when user search something you want trigger uh this search to fetch your backend api after user finish typing right you can use these debunks i will wait like for example here i only wait a 0 point second and you can wait like a 5 second or something more when user typing so let's restart this one okay so when i first unclick this one it didn't bring anything it will bring after 1000 milliseconds so let's see click this very fast you see you will only put one number change to right let's check again 15 right because i press very fast you will wait for 1 000 milliseconds okay let's comment out this one so the next one would be this interval this one is different this one it will ignore all changes within a 1000 a mile a second so let's restart our application okay so let's click this button you'll see the interval we have one and three right and it was seven so it will ignore all the changes within a 1000 milliseconds so try to try those examples uh on your own so you can understand more okay let's comment out this one and we save so let's back to our build.r and we are using these scalex which is reactive state management in this case and as we mentioned in our last uh video we have a simple state management so we're going i'm going to uncomment this out so we're going to change our controller a little bit so we could using these simple state management so back to this controller we're going to command out this observable variable and i'm coming out this normal rob right and we're going to command out this one and since we have this normal variable we need to increase it is value every time we call this increment and after that we need to call this update method remember we need to extend this cadx controller then we can access to these update method in the simple state management in get x so we're going to comment out this one and open this one and we can save and we're going to restart our application okay you see we finished uh restore application and we could test if i click this button the number will increase so it works and we change these reactive state management to the sync post management by changing [Music] this variable to normal type and using this update method to update the variable so this is this gap builder how to use the get builder so remember if you want to use this get builder you must using a simple state management if you want using the reactive asta management are you going to use get x or this obx okay let's back to our mind map so next i'm going to talk about this unique id using the scape builder so let's back to visual studio code so for example in here i have one counter right and we can create another counter number and since we already in initialize our controller so i can remove this one we are using the same controller in this case but we're giving this one an id so for example this will be counter one right and these are giving another id will be counter two and in our controller i'm going to command out this one and command out this so let's save and we may need to restart our lubrication so we have a two counter right and we're using this gap builder we have two counter and when i press this button only first counter number will increase as you see here i only update these first counter so let's see the second counter won't change right you'll see because i using this unique id to update this budget and another one is you can using some condition check for example here if if this counter is greater than 10 i will stop update so let's restart our application and when i click this button so we could increase from 0 to 9 when you reach to 9 and i click again the number one change because we have this condition here so you will update only when this count number is less than 10 okay this is the example of how you can use this unique id to update only specific widget you want to update okay so next one i'm going to talk about are these enclosed life cycle so i drop this picture and i will walk through of this picture and explain to you the life cycle of these own clothes so back to our visual studio code i'm going to make a little bit change of this view dotar and here i'm going to cover now these and uncommon now this button okay let's save and you'll see we have this detail page button and i using this get.2 and i will navigate to this detail page so in our detail page we have these jet builder we have this counter one and counter two so basically it's the same stuff uh we took uh before all right we are using this simple estate management let's check let's see we can back to our previous page so here i don't need the second one so i can go right now this one and we're going to click our console so back to this my map so first we are in our home page and we're going to restart our application so you can see the console clear so first we have this get material controller log into member because we are in this page which is this get x control example page and we're using this get material app so we load this material controller into the memory so it's this one and then we click the button which will now be okay out to this detail page as you see we have these uh emulated button and when i click i will navigate to the detail page so let's click it and you'll see this console we navigate to the route which is detail page and we have uh this controller has been created and also initialized so back to this detail page data and so we manually put this controller okay i think how we could command out this one because we manually put this controller okay so let's restart this again okay let's click this button and we navigate to this detail page and the controller log into the memory because we're using this one using this get output as you see we back using this scatter2 we load this controller into the memory so if we have another page we're using this kit.2 into our next page we could use this get.controller to find our previous page controller because this time this controller didn't remove from our route stack we could still access to this controller however if you're using get.off it will replace your counter route right with your next page so this means you need to manually put this controller again because you move this controller out of memory so you need to pull this again and you can find it using this controller so let's back to this console so if i click this go back button our controller will remove from our memory beyond delete our code so let's see when i click scroll back button and you'll see this controller on delete called and url delete from the memory and we have this on close has been called right and this clear count has been called as you see here and this one close has been called because our controller now move from the memory okay so now i hope you have a clear understand of how to use this get a controller in this get x package okay i think that's all for today's lesson we talk about the get x controller so for the next video i'm going to talk about the dependence management in get x so don't forget to subscribe to my channel sum up my content and open a notification so you won't miss out the latest flutter tutorial thanks for watching i will see you in next video hello my friend welcome back to my four-star school youtube channel in today's lesson we are going to learn the dependence management inside get x we have learned the raw management display management and get x controller in our previous lesson so if you are new here feel free to reach out to my channel page and you'll find a flatter ui from scratch tutorial and get x tutorial also flatter tutorial and start tutorial so don't forget to subscribe to my channel some out my content and open a notification so you won't miss out the latest flutter tutorial and in today's lesson we're going to focus on independence management as you see from this my map i have listed out all the topic we're going to cover in this video okay without further ado let's get started and first we're going to talk the dependence management for create the instance inside the get x package and we were talking about the get put get lazy put get put asynchronous and also get great and get dd so let's open our visual studio code and as well as the android emulator here i have wrote some code example and i will walk you through and give you an explanation of what it is and how you can use it so first as you see from the folder dependence management folder i separate our view controller and binding and also some normal class here and for the cloud starter i declare some of the class because i want to show you how can you use this get replace and get lazy replace so i create an abstract class called base and then i create this parent class extender base and also the child class extend this parent class so for the controller and we just define account of a variable also make it observable and we can increase its value and also we have uh it is life cycle method for on in it it will call immediately after the widget is located it is memory however for the already it will call after the widget is rendered on a screen so if you going to make some api call and i recommend you put it inside this only in it if you want to show some dialogue or something after the widget is rendered on the screen you could put it in this already and we also have this on close method which will code just before the controller is deleted from the memory so you could do some cleaning stuff inside its own clothes and for the binding class we will talk this later when we actually get into this topic and also for review we have these dependent example class which is stateless the widget and also we have a put our controller and it's a basically just uh rub with get material app and you will return a scaffold and we have our app bar as you see here have this title get x dependence management after that we have this center widget uh also inside we have this column widget make these counter in the center of our screen so we're using this controller.com value to access the variable inside this controller as you see here and also we have this floating action button when i click this button the value will increase as you see here so that's just our very basic project setup and we're going to talk about those uh instantiating methods one by one so for the first extension method we're going to talk about is this get put which you will use uh very often in your project so let's back to our visual studio code and our emulator as you see in line 13 i create this final variable i call this get output inject our controller into the memory as you see here this is the console when i click this restart button so first it will initially this controller as you see here and then after that you will ensure our get material app controller and you will see we have controller on a8 and also controller already being code so for this one this countable right but we can use this controller.count of value to access this kind of variable because we using this get output and we can actually find this controller using this kind of method get our fine and we specify what control you're going to find and we could increase main discountable web as you see another approach is we just created using some default approach as i mentioned here okay for example we create this controller by ourself and we save the code and we need to restart this application you see we have our controller and we trying to find this controller however we didn't call this get output so this actually won't work as you see the get didn't find the controller because we didn't use in this dependence injection instantiation method provided by galaxy sdk so if you want uh legate state management to manage your instance you must using this kit output and you inject this class so you will automatically management those instance for you so if you call this get.fine you will return the controller you put into the memory so i'm going to command out this one and we come now this is save again we're going to restart our application by using this approach we can find our controller and increase this value here as you see okay this is a first approach another thing i want to mention is this get doppler only create a singleton like instant so for example i have this controller and i put controller here and after that i create i the second controller you see we put the same controller and we're going to save the code and here i prepare another widget okay i'm going to uncommand out so it's the second controller right so we're going to restart our application if i press this button both of those count variable increase that means we're using the same controller here right as you see from the console we only instant one controller so i guess i press this button both of those number will be increased because we share the same controller as you see we using this one so let's try when i click this number at this button you see both those number increased that means this get output will return uh the singleton instant for us if you want to make it a multiple instance you can use another attribute inside this get doppler and you can actually give it a label okay so it means something like here you give it a label and the label have this unique id right so by doing this uh we're going to restart our application when you press this button only the first number will increase because for the second one this controller two so this one won't increase because in here you find the controller so it means you find the first one and it will only increase the first one so let's try right you see we only increase the first controller because we have multiple instance however if you want to increase the second one and we're going to use the tag uh we specified before it should be the unique id the unique id will be the uh second controller we have the syntax which is you need id so i'm going to restart this application and you will see a phone console we first we have this controller initially right uh which is line 13. after that we have a this controller with unique id being insured so which means our line 22 we create another instance so when i press this button the second one will increase as you see let's try so we increase the second encounter because we're using the unique id as the tag to increase that controller just keep in mind if you're using this get output so every time you're using get.5 you will return the same instance unless you give a unique tag for this controller okay that's for our get a pool and another thing is this terminal attribute so for example we have this attribute inside this kit dot poo that means you want to keep this controller instant throughout the entire app and as we all know if you destroy this view the controller will remove from the memory as well so if you want to keep it alive throughout the entire application you could manually set these uh terminal to true okay so next we're going to talk about the lazy put so let's back to our visual studio code and we're going to combine out our first controller and also the second one okay i'm going to comment out in here we're going to uncomment stop here don't worry i'm going to talk these in later for this binding builder so first we're going to talk this get the lazy put so in order using this get the lazy put you must put this inside your binding class so for example you have your own binding class which implements the binding right so you can using laser put here another way is for the shortcut you can using this a binding builder which also implements this binding class so you could put inside this binding builder you can put your binding logic here but for now we're going to talk about the get the lazy put and we will talk about the binding later so for the get the lazy put it means you're going to load your instant when you need it right so you don't need to load it when we restart this application as you see at least controller are we using get output will load into memory as as soon as i press this restart button right so we if we're using this get the lazy put you won't see these in our console okay so let's comment out this part also this part and here i will create a button okay i need to command out this one as well when i click this detail button i will navigate to the detail page as you see here i using this net route as you'll see here i put these inside the gap page and we're mapping this detail route to our detail page so let's check about the detail page so inside the detail page we're using this controller uh we're using this kit.file so as you see we didn't use get output here because we lazy put the controller in our view as you see here we're using this lazy put we put this controller so as long as we need this controller you will load into the memory and we can find the controller using this get off fine and we have this count of arrival right you see here inside these obx and also we have this floating action button when i press the button the counter will be increased so let's clear our console and we're going to restart our application so as you see for this dependent example we only have a get material app we don't we don't put any controller in this page so you will see on the console we only have this get material app controller has been created and also initialized because we're using this lazy put so you're only loaded when we need it for example i click this button so in our detail page we're going to need this countable variable during that time this controller will load into the memory so let's check it out when i click this button you'll see first we go to the route detail uh which you see is this detail page and then you will see we have this controller has been created and also has been initialized so that means we need this controller in our second page then you are log into the memory as you see here this one lazy load will create the instant we need needed and we also have some attribute associated which is a dependence means which class it could be any class and also we have this tag it's the same as this get output and we can create the unique instance so by default it also create a singleton so you'll get the same controller every time so what's more we have these phoenix which means you will create for the certain location if you set to true so let's back to uh which is vehicle and you see these uh console when i click this go back button the controller actually will remove from the memory so let's see when i click the go back button you'll see we close this route and also the controller on dd bin code and also controller delete from the memory if i set these spinnings to true we will keep our controller in the memory so let's try it we go to our view.dar and in here we have these lazy put and we can set this phoenix to chu right i'm going to save it okay and we're going to restart our application so keep in mind if we didn't set this phoenix our controller will delete from memory so let's try it and we start this application okay now the material controller has been created and also initialized so let's click this detail patch button so as you see we need this counter so the controller being created and also initialized and i click this go back button our route closed and also the controller on delete the code but this time we didn't see these controller of being delete from the memory because we're using this phoenix right when set to chew so next time we go to this detail page you'll create very very fast from the same location because we saved it in the memory we didn't delete the from the memory so it's very fast we can create it again and actually it works right see so that's the get off lazy poo and next we're going to talk about this get the poo asynchronized so let's back to our visual studio code and let's combine now these okay the lazy put and we have this get output asynchronized so for here uh we're going to create another class as you see we have some asynchronous task processing in the background so in the front we're going to await these three seconds so i'm going to save this one and let's see so let's restart our application and you will see when i click this detail page oh sorry i forget this controller so we need to pull this controller so let's save again and restart our application so as you see we have this material controller and uh watch this console carefully so first when i click this button you'll see this controller being created and initialized as soon as i click this button and after three seconds and then you will see this asynchronized task class being initiated and created so let's see when i press this button the control arrow into the memory right and you see after three seconds you see the instance of this asynchronous task has been created because it's a normal class you see so we don't have this on uh initialized method or method being called it's just a normal class so you could put your fetching api here in this synchronized method so the difference it received the builder so the builder is you can use a synchronized function you can do some api calling here also you have these attack which is the same as those get output and lazy put and also we have this permanent by default is set to force if you want this instant alive during this entire application you can manually set this terminal to true okay so that's basically for those uh most common used three instantane method in get x so there are other two installation method for example this kit.create and get so what's differences between this get.create and this get output so as i mentioned the get output will create only one instance among the entire application if you didn't specify this tag however if you're using this get.create it will create no shared instance which means every time you call this method it will create a new instance for you and also the permian by default will set to true so for example so let's back to our vicious data code and we're going to comment out this one uh command now this one uncommon now this get.create so we're going to command now this lazy put because we already create this controller by using get.create so and if you move your mouse you see the default the permanent will set to true so let's save and restart our application and you will see when i click this detail page and the controller log into memory and we see this counter here so we're going to create another one and by do this you will see we have uh instant controller loading to the memory uh being created and initialized twice also i'm going to do some change on this detail page so first i create another controller as you see i'm using this kit.fine if we using get.put and then we're using this get.find uh you will find the same controller right so for example here and we have those two objects are watching on different account and variable right one is from controller and now it's from controller two okay so and let's back to this view down there watch this console very carefully and you will see the controller being create twice so let's click this button uh you will see we have a controller right uh controller only is being called and also controller on anything called and we have a controller already been called twice you see here and this instant of controller being initialized twice so it means this get.gray actually create two separate controller for this page right so when i press this button i think only the first number will increase as i see and that's these uh differences between the get.create and get.put so don't worry i will talk the skit.create when we talk about the get widget so it's better to use together with get widget with this get.create so the getdd means you can manually delete the instance by using this schedule delete and however most of time you don't need these because by default the get x have this smart management and you ultimate the delete those unused controller are for you okay so next we're going to talk about uh how you can find the controller so back to this visual studio code and you see in our digital page uh we have uh these our first approach uh we could use this get dot file and we put uh what type of the controller going to find so this is the first approach and the second approach is i'm going to command now this so the second approach is you declare it is a type which is the controller type and using the git dot file so they are basically the same stuff so it depends on you prefer so those two actually do the same thing this is how you can find the controller so you could using this get.find or controller in here right you increment this accountable arrival and also you can use just this controller because you already find it and you have these type so you can access to this controller right and you put in here another way is something like get top five right you specify the controller so it basically means the same thing okay so after that we're going to talk about how you can alternate the controller by using uh two methods one is get or replace so analysis these get a lazy replace maybe you hear about the polymorphism in other type of programming language basically it means you can use your trial a class to substitute your parent class for example here so we have these apparent uh controller we put these parents and also we have this child and we're using this uh put right so we manually put two instance into our dependence management so [Music] i'm going to find in our detail page right so in here i'm going to comment it out so we have this trial right as you see i will put both parents and child into the memory so in here we're going to find this trial and also i'm going to print if this child is an instant of the child so i'm going to save it and clear the console i'm going to restart this application as you see we have this line of statement so we only create this parent instance this one actually didn't call because we have this parent so when i click this button we navigate to the second second page and you will see this one actually is a fourth we actually find the parent so let's change the position of this so we're going to save again so this time it will be true because we only load this a child into the memory and you will see this trial is true right we have a this trial instant so it will be true but in the reality you don't want to remember the sequences right uh which one which line of code you write first and later so here comes the second approach uh get x pro i ask these replays y and we can replace this uh instant uh with this one so let's see and we can restart our application and you'll see first we have this parent right allowing a create and we call this replay so you will delete this one and put this again right so listen and when i navigate to our second page and you will see it should be a trial instant of a child so let's see you'll see this is child turn to true so replace means you will remove this from my memory this instant of parent from a memory and inject this child into the membrane and like a lazy replace mean the same thing but you just lazy create the instant when you need it so next we're going to talk about the binding so for the binding you can have a two approach to bind your controller with your view so the first approach is you create your own class for example for our detail page we have this detailed binding which implements this binding class right and then we're going to overwrite this a method which is the dependence method so in here we lazy put our controller okay and back to our view page so i'm going to comment out this one and this one as well and here we have uh this computer app we have this uh get page and we could using this way and we finding our detail binding with our page so i'm going to comment out this okay we find our dependence with our view right and also i'm going to [Music] uh using this one right okay and for we're going to save it so for our detail page i'm going to comment guys and comment this okay and comment nowadays also command now this okay save and we have this route table and we map these detail to this detail page and in detail page we have this details binding so in detail banding i will find our controller and we're using this lazy put so you will only allow this controller into a memory when we actually in the detail page so let's restart application and watch the console very careful and as you see our material controller has been created and initialized and when i click this detail page and you'll see our controller actually create and initialize which means it loads the memory and we could click this button and the count increase so we could using this binding which you need to override this method this is our first approach we create this class and implement the bindings so let's check this is our first approach right we're using these binding class and with this name raw so another one is we can using this binding class with a normal row so let's comment out this one get page so we're going to combine out this entire page attribute so in here uh by this on press we're going to use the normal route we're going to use get.2 so in the narrow we're using get.net and we choose detail raw in here we're only using a get.2 and we go to the detail page and we have this binding attribute so we find our detail bindings so let's say and we're going to restart our verification yeah it probably the same thing so when i click this detail page and we initialize our controller right so we could click it yeah it works so they are to approach so you create these binding class and you can use it with narrow and also the normal route okay and i'm going to command out this one and open our first approach so i need to uncommand this get x also provide the shortcut for us so if you don't want to write this a binding class and you think it's too much work you can just using these finding builders and the binding builder actually implement these uh binding as well so you could using this one and you actually receive the builder so here you could do the same stuff you lazy for your controller we're going to save our code and restart our location and you'll see we have a good material controller create and initialize when i click this button our controller will be created and initialized because we're using this lazy put right and this is a shortcut and you can also use it in your normal route right you just place in binding attribute so let's uh to approach to using the binding so first one you can create a class and another one is you using this bindings builder and the last thing i want to mention is the get x have these smart management attribute inside the get material app so you see i scroll up to this material app and we have this smart we have this smart management smart management actually have a three type so the first one is four that means it will dispose class they are not being used and will not set to be permanent so you automatically delete those controller which is permanent set to force and also it will automatically management notes for you another one is this only builder for only builder they don't have permission to dispose the class by using get approved or get put synchronized so they don't have apprentice permission to delete dependence using those two methods so the last one is keep the factory this one it means it will save your controller in the factory then you will recreate the dependence when you need it again something similar with this phoenix and that's all for today's lesson it's quite a lot of stuff and i highly recommend you go to protects and you can understand it more and i will upload these my map and the source code in my patreon so if you are interested in those uh feel free to reach out to my patreon i really appreciate for those people who support me i can't do those video without your help so don't forget to subscribe to my channel sum up my content and open the notifications so you won't miss out the latest flutter tutorial okay thank you guys i will see you in next video what's up everyone welcome back to my four-star school youtube channel so in today's lesson we're going to learn internationalization in this get-x package we have learned the raw management estate management and also the dependence management in this kit next package in our previous lesson so if you are new here feel free to reach out to my channel page and you will find flutter ui from scratch tutorial get x tutorial flutter tutorial for beginners and type tutorial for beginner so don't forget to subscribe to my channel check out my content and open the notification so you won't miss out the latest flutter tutorial okay without further ado let's get started first i'm going to open my visual studio code in android emulator as you can see here i made these demo app before today's lesson don't worry i will work through the code line by line and explain to you so you'll know how to make the internationalization in the schedex package so in order to make internationalization in get x first you need to create your custom class which extends translation let's take a look in this translation folder and here we have a translation example which just the entrance point for our application and we wrap it with our material app and then we have this translation view dot which is the basic view for our application and we have a translation controller for our application and also this messages class for our application so first i'm going to talk about this message total as you see this message is our custom class which extends the translation provided by this get sdk as you see in order to make our application internationalization we need to first create our custom class that extends the translation class provided by get x as you see here we override the keys method in this translation and you see this syntax we have the return type and this special keyword get and our message name and in this method we don't receive any parameter we only have one return type which is this map and you can see here this keyword is a special method in the flutter which is getter so the getters are special class master let's use to retrieve the value of the class field in here we're going to retrieve the keys inside our messages class and let's back to visual studio code and inside this method as you see the return type we have the map and inside the map we have the string as a key and another map as it is value so for example here we define this country called language code for the country called language code here i find this website and i will put in the description below and you can check the country code and the language call for specific language so for example in our visual studio code the em means the language code which is english and the u.s would be the country code and it's united states here we have our another map the hello is a key and we have value is hello world and we have a spanish version key is the send which is this hello and we have this hola for the value and basically you need to define these keys inside your custom class that extends this translation as i mentioned in this my map that's back to which spherical and we have our view as you see in a view we have this message controller so let's see what's inside this message controller for the message controller we extend the get x controller that means we're going to that galaxy management to manage our controller and inside our message controller we define a method which is called trans change language and we receive the language called any country code and here we create this locale and we pass our language code in the country code as you see here the language code will be our first parameter and the country could be our second parameter after that we're going to use this get the update locale and pass the custom locale and change it right so this is basically for this message controller which change the locale okay let's close it inside our translation view doctor we're going to create our message controller and inject into the memory we're using this get output and then let's back to this mind map and we're going to use this a specific symbol to translate our text so for example you just append this tr at the end of your key here we have these text widget as you see here and we have this hello is defined in our message there and we have this hello you will replace the key with the it is value based on the locale we choose for example if you have a english seo system language you will display the hello world if you have spanish as your system language you will display this hola and back to our translation w in order to let or get to automatically replace the text for you you're going to add these tr after your key for example something in here as you see we have this hello world and when i click this button and you see the button actually using our message controller and we change the language we change to a spanish version the new locale and you will turn to spanish so let's see when i click this button you will see our text actually change and you are going to make some config for your material app before you can achieve these translation so back to our translation example and we have our get material app so inside the get material app we have some attribute to specify the first one will be the translation the translation you're going to pass your custom translation class that extends the translation and then you're going to put your locale in this locale attribute and first the transaction will be displaced in this locale and you also have this four bed locale that means if the first one have some arrow you automatically choose the second one which is this four bear locale and you can manually specify the locale you want to use and also there's another way you can use your system locale just means you're going to use this get device locale you will automatically uh retrieve the system locale and put it here this is the requirement you're going to use the translation in the get x so after you finish this step and we can get to this translation view dot dar and put our key here append this tr inside our text widget and we have at least a translation button which can change our language when i press this english these entire text will change back to english again so you see we can change different language as long as you define the inner key in our message another thing i want to mention is actually you can use translation with some parameters as you see in this application you see my name and my email will be the same no matter i change the locale to spanish when i click the spanish button i change my locale to spanish but my name and my email will be the same so that means we're using the parameter in this translation so let's back to visual studio code how i achieve these and i put this login as a key and we have english version as well as this spanish version but the differences is i have this name with this add symbol and this will be something i'm going to replace in my text widget with these tr parameters method as you see here these name and email just a placeholder you're using this add symbol and back to our translation view data here we have these text widget and inside we're using this login as a key and we're using these tr parameters method and you'll see we change this name to my name and email to my email so we could achieve these translation with parameter it's pretty simple and easy right thanks to get x it makes internationalization very easy and simple in our app development and i think that's all for today's video and i will post the code and the mind map to my patron i encourage you guys to practice these along with the video so you can get more understanding of how you can fully use this internationalization in get x okay thanks for watching and i will see you in next video what's up everyone welcome back to my four star squad youtube channel in today's lesson we are going to learn how to change light theme to dark theme using x package and this is my next video talking about get x package if you are new to my channel feel free to reach out to my channel page and you will find a completely flatter get x tutorial for beginners and flutter tutorial entire programming language tutorial and also flutter ui from the scratch tutorial after we finish this skedex tutorial we're going to build the application using the kx package so don't forget to subscribe to my channel some out my content and open a notification so you won't miss out the latest flutter tutorial okay without further ado let's get started so first let's open the visual studio code in android emulator as you see here i wrote the code for today's lesson and i will walk through those examples line by line and give you an explanation as you see this is a demo for the dynamic changing the theme using get x package changing light mode to that mode when i press this button the lighting will change to a dark theme as you see here and also the text will change from black to white depends on the current theme that's back to the mind map as you see if you want to dynamically changing your theme so first you're going to create a theme file inside your flutter app as you see here i create a scene folder and here i create a sim starter things view and things controller so let's look into this c instructor for the scene starter i create the custom theme and one is lighting another is dark theme as you see i using the default a light scene from these color schema here are some predefined color for light theme and here is some predefined color for the dark theme and as you see here this uh purple from the dark theme is this primary color and we can change back to the light theme and this our dark purple color is uh came from this primary color and this is our first step to define these custom things color and you can define your text theme button theme inside the sim data as you see here there are lots of attributes you can pass your text theme through this constructor okay and back to the mind map after we finish the first step the second step is to configure our theme in this get material app let's open our theme example as you see we wrap our example by this material app inside this cut material app we're going to config some attribute so first is the theme which is the lighting we're going to import our custom theme and as you see here we make these uh fill static so you can access to this attribute using these class name dot light theme right as you see here we can using the cloud stand dot live lighting for our lighting and classnet.cm for our taxi and then we're going to configure our symbol as you see we will get from our theme controller and let's look into our theme controller here we have the scatter method for our theme first we're going to check the symbol in our local storage and if we start mode we're going to return cmo dar otherwise we're going to return sim mode line so don't worry if you didn't know this get storage we're going to talk it later so as you see here we're passing at least sim controller dot theme which is the getter method return this sim data and we're using this get output i put our theme controller into the memory so it can access to our theme back to their mind map after reconfig the theme and that theme in get material app so the next step is create our theme controller and define those changing theme method so that's back to visual spherical in this theme controller i will extend the get x controller and here we have some method to changing the theme so the first one is changing dim and we receive the same data and this is the first one and we're going to call this get.change theme from getx sdk after that we have this change theme mode and we will receive the symbol and also we will use the get x sdk which is this change theme or provided by the get x we can change the theme mode okay there's two method we have in our controller so let's back to this theme view so in a theme view we're going to find our theme controller so as you see when i start our application first the theme controller will load into the memory so in our example which is the themespiel.we can find our theme controller and we can access to it is attribute or method inside this thing controller and we scroll down we have this get x theme which is a black text here and also we have a button and let's look into this on press when i press this button first we're going to check if our app is under detect mode and we can using this get uto method which to return the boolean value if it is a dark mode if it's a demo we're going to change our steam mode to light theme so for this else statement we're going to change the theme mode back to the dark theme so as you see here when i click this button the symbol will change to dark sim because this one is returned false so it will execute this statement okay so let's check and we can change the theme to attack team and when i click again it will change to lighting again and another approach is we can change the theme instead of the symbol so let's comment this out okay uncomment this one oh so we're going to combine this up uncommon this okay and we save again we're going to restart our application okay you see we finish the initialize for our theme controller so basically it will be the same as we change the symbol you are going to click the button and our thing will change to dark theme and when i click this button again you are back to the light team that's how you can dynamic changing your app theme in the schedulex package so back to the mymap and we can use the third party library to save the user preferences for it is sim for example if you user change their like theme to dark theme so the next time when you restart your application you will read the user's preference and display the dark theme in your application so how can we achieve these and here i'm going to introduce another package which is called get storage and we're going to store users a preference in local storage and next time we can read this information and display the correct theme so back to our visual studio code in order to save users preference we're going to uh using this get storage package so first we're going to install this package by placing this get storage in our pubs pc yaml file as you see here in line 37 after you finish here you're going to install the dependence and then place this one the package on the top of your controller file as you see here and then we have these instant of our storage and we define a key a stack mode right and then we're going to load our theme so first we're going to rate our install mode by default we'll keep it false so for example so the first time we don't have this key in our local storage so it will return the force and when user changing the theme so you see we have this save sim method and we're going to write this key with this boolean value which passed by the user as you see here after we changing the light theme and we're going to save the theme as you see it start mode will be false and we pass to this controller and we're going to save to our local storage right so next time when you open the application first you will load our theme and read these you start more key after you have those two method low seam and safety are you going to use this guest storage so in each method in your main.darf as you see from this redmi file first you're going to initialize your storage driver with this away keyword and we turn these uh method to a synchronized so first we're going to initialize our guest storage and as you see here in our theme controller we can create our instance after get storage finish is initialized and we can get our you start more this key and we can read the key and write the data to the key and you will store in our local storage so next time when you open your application by default you will know the user's preference so for example here and i change the theme to dark theme right and i'm going to restart our application as you see our application finish i restart and you display the dark mode right okay i'm going to comment out these local storage method and you will see the differences between using storage on no using a storage so let's comment out the safe sim messer in our sim dot view okay so we're going to save it also in this mandator we're going to command our get x storage for our theme controller and we're going to comment out these save theme okay and no theme so for the scatter method we're going to change to using get start mode okay so let's save i'm going to restart our application so this time we are now save the user preference in the local storage as you see i change this theme to a dark mode right and i restart this application the application will back to the live theme you see so after it finished uh initialized the steering wheel back to the light sim so that's why i'm going to use this i guess storage to store the user's preferences so next time when i restart our application you will keep the user's preferences for the last attempt okay here i'm going to change it back to using the data from local storage so first going to uncomment those out and same for the theme and rethink let's replace it here and we're going to save it for our main author and uncommand this out okay and for our theme view doctor and uncomment those two and here we're going to comment out this trend theme we're going to use this change theme mode right okay and comment this out so from this one and open this one and save so we're going to change it to the theme and we're going to restart our application as you see we finish the initialize of our theme controller and it keeps the dark theme because we save the symbol to local storage and you will read the data from the local storage which is the dark mode is set to the tube right so you will keep the dark theme and when i change back to the live theme and i restart the application this app will keep the live theme because it read the data from the local storage and indicate it start more false so we're going to display the live theme okay so that's all for today's lesson we learned how to dynamic be changing the lighting to dark game using get x package i will upload this my map along with my source code to my patreon so don't forget to subscribe to my channel thumb up my content and open a notification so you won't miss out the latest flat tutorial okay thanks for watching i will see you in next video what's up everyone welcome back to my 4 star school youtube channel in today's lesson we are going to learn get x services and get view in get x package and this is our seventh video talking about the get x package so if you are new to my channel feel free to reach down to my channel page and you will find flutter ui from scratch tutorial fluttergs tutorial flutter tutorial and our programming language tutorial so don't forget to subscribe to my channel from my content and open a notification so you won't miss out the latest flutter tutorial okay without further ado let's get started let's open our visual studio code and enjoy emulator as you see here i have wrote the code before today's lesson which is under the schedex service and here we have a service example total service view data and setting service.dar so let's look into this service example so let's service example just a normal class that extends the same as the widget inside it is build method it return the example which wrapped by the skip material app let's look into the servers view dot dot so in the server's view data we have this scaffold widget and we have our app bar have these guest services it is title shown on the top of our screen and then we have uh the text widget in the center of the screen indicate how many times we press this button and we have this increased button which can increase our counter the last one will be the setting servers dot dot and this will be the most important one we're going to talk in today's lesson which extends the galaxy service so as i mentioned before the galaxy service will be a class that will exist the entire application life cycle so as long as you initialize this setting service and you are not going to remove from your memory let's look into the mind map so the galaxy service like the normal class have the life cycle on in it already and on close or you just create your custom class that extends the get x service so for example you have your api service which one to uh live throughout the entire application and also you have a storage service the cache service and you don't want to delete those services until you close your application since the galaxy state management i won't be able to remove the galaxy service however we could manually remove this service by call this get the reset method so let's look into the code example so back to the visual studio code as you see we have our settings service right and we have this initial method going to read the data from our local storage so in today's example i'm going to use another package which is a shared preference it's an alternative for the guest storage we use in our last video and as you see this is a share preference package which have a four thousand and three hundred likes on pub dev so back to today's code and you see i using this late keyword and i'm going to initialize this instance of our share preferences in this in it method right and i'm going to use this away keyword to wait the instance then i'm going to make these uh in it method are synchronized and you will return the future of our current instance which is this setting service so we're going to call this method before i run our application so let's back to the main.file as you see and before i run my application first i'm going to call this method which is service in each service right and it's a synchronized method so i return this future void and i'm going to await for initialize our service so inside this initial service method we going to bring down starting service and also service started before and end of initialize our setting servers as you see i using this synchronized method to asynchronize put our survey into the memory as you see here i call the setting survey in it method which would be this method and we're going to initialize our shared preferences and we can get the value from our local storage and we set to the countable variable as you see here it will show how many times i have pressed for this button so back to main doctor after we finish getting this data and we run this application what's more the another important thing i want to mention is inline 16 you're going to make sure you with your flat binding initialize before you custom inject your dependence into this flatter app so we need to call this line of code before you initialize your settings service or any kind of service right let's restart our application and you're going to look at this console very careful as you see i have a restart my application so first i'm going to see the starting service right and we are now running this application so first we're going to run this line 17 and we see these starting service here and then we're going to call this settings server stock in it and which is this method and we have this line of debug print on our console so the setting servers initialized the share preferences and also share preferences is ready that means we have already initialized our share preferences so our counter will have at least nine right show on the screen okay so and then you will set the survey started which is line 26 okay so basically you can put any servers right for example you can like have your guest storage and your hive your share preference any kind of a synchronized function so here i'm going to increase our counter for example i increased to 12 so i price three times and i'm going to restart our application so you're going to see and you will show i have 12 times right after we finish those initialized dependence okay you see it doesn't change so maybe i need to stop this application and i run again so you can see it clearly so when i open my application again it will still show the number 12 okay so let's see so we have this initial value will be a zero but we're going to load it from our share preferences so you're going to see it's 12 and it's not zero so for the first time okay you see okay that's basically how you can use this get service in your flutter app so let's back to the mindmap so the next thing i'm going to talk is this get view so gabriel which means it's a stateless widget have the sketcher controller for registered controller so that's back to our visual studio and here i'm going to change this service view dota because you see uh before this build method i manually find our controller like this line of code so suppose you have a mini dart file each one you're going to file controller another way is you using this get view so for example you extend the get view and you specify the controller you're going to use then you can actually like comment out this slide of code all right so it basically do the same thing so we're going to save our application okay clear the console i'm going to restart it it won't broke the application so basically you just have the get a messer to get this controller for you so you just need to specify what kind of controller you are using right for example here we're using this setting service so we could increase this counter that's all for today's lesson it will be a short video talking about get a service and get view so don't forget to subscribe to my channel some of my content and open a notification so you won't miss out the latest flutter tutorial okay thanks for watching i will see you in next video what's up everyone welcome back to my 4 star squad youtube channel in today's lesson we're going to learn get widget in this get x package so we will base on this shopping cart example combined with the get create method which inside the dependence management of the skelex package and also i will using the get widget for this shopping item so first i will give you a quick demo for today's lesson as you see we have this shopping cart and i can increase the quality for each item and as you see we have this total quantity which indicate i have two apple watch i can increase my headphone so the total will be five and when i increase these shoes and total number will also increase i will using get create method and get lazy put along with give you and get widget in this example so if you are new to my channel feel free to reach out to my channel page and you will find flatter ui from scratch tutorial flutterglass tutorial flatter tutorial and that programming language tutorial so don't forget to subscribe to my channel thumb up my content and open the notification so you won't miss out the latest flutter tutorial okay without further ado let's get started let's open our visual studio code in android emulator as you see here i wrote the code before today's lesson and i will give you a explanation for the code i wrote so first let's look into our project structure first i have my card folder under card folder we have cardview and card controller and then i have this item folder and i have item view item model and item controller as well and you can see in this project folder so for our main entry as you see we return the get material application and our home will be our car view the car view would be the page you see on here so inside the car view we have a scaffold and we have f bar just have our title my card shown here and then we have a column widget inside column widget we're going to list out all the item which you see here right and the item will be in this item view so the item just the layout for each of those shopping item and the most important part is this initial binding so as you see i using this binding builder just for easy in this case if you don't know what is binding builder you can find my dependence management tutorial for get x in my get x tutorial playlist so the finding inside this binding builder by just using this lazy put and inject our card controller so what is car controller let's check the car controller inside this car controller we extend the get x controller and we only have these simple variable as you see these total quantity and we have two method one is to increase our total quantity another one is decrease our total quantity so as you see here are using this laser put means this card controller i would have a single instance which sure among these whole view is card real right so every time i click those increase button for different items a total quantity will be increased since it is sure among this entire card view so another one is this item controller as you see i here are using this get.create method means i will create this item controller every time by using this get down fine method so let's look into the code for this item controller so for the item controller we also have this quantity variable you see and in here and we have increased method which increase the quantity for each item and so we have this reset method because when i decrease the quantity for each item it can be miners so i will check if it a small and zero i will reset to zero for each item quantity back to the scalex widget dr and we're using different approach to inject our dependence so for this lazy put for the card controller so let's look into this card view as you see this cut view i'm going to extend the get view because this car controller will share the same instance right so i'm using this get view and by default gabriel will return the getter mixer for this card controller so i can just using the controller in our get view so i'm going to search the as you see we have this controller which provided by this get view and we could access to the robot here and also we could increase it or decrease it let's for our cartwheel and back to this item view so in the item view and here are using the get widget so that means every time you will find the same instant for our item controller because we are using the get create you will create different instance when we're using get.5 right so here we also have this controller of the web here using controller decrease the item and we have another one is increase so this controller is provided by the scale widget and we're going to find the same instance so let's look at these uh debug console as you see when i start our application first we have our material controller load into memory then we have this card controller as you see we only have one card controller and then we have this item controller it will print out four times right because we have four items and each time are using the controller.increase you will get the send instance for us because we're using this skate widget in this item view we're using shopping cart controller and we find this car controller by using this get off fine so you will guarantee we'll find this car controller for us because we're using this lazy put and you will create a singleton instant for us so that's for our item view and as you see for these increase method i will first increase the count variable in these controller which is item controller then i will also increase this quantity in this shopping cart control as well so you see when i increase this t-shirt quantity the total quantity will increase as well and for our decrease method so first i will decrease the quantity for the item i click as you see i decrease the quantity for this apple watch and then i will check if the quantity is smaller than zero if it's smaller than zero i will reset the quantity to zero otherwise i will decrease this total quantity as you see our total quantity decreased to a and then i click those decrease button twice you see it never ends to minus quantity because we have this conditional statement to check if the quantity is smaller than zero so that is our item view for this shopping cart and let's look into our item model so the item model just very simple class there to the object mapping for our shipping cart and we define this image url the title size and price and we have this static method which is general ray a list of items for us to use in our shopping cart so that's basically uh the whole example for our shopping cart okay i think that's all for today's lesson for this uh shopping cart example combined with scale widget and get create and i will post the code example along with this my map to my patreon don't forget to subscribe to my channel thumb up my content and open a notification so you won't miss out the latest flat tutorial and we will build the complete application using the skedx package after we finish this entire get x series okay thanks for watching i will see you in next video what's up everyone welcome back to my four-star school youtube channel in today's lesson we're going to learn get connect inside the get x package and this is the demo we're going to build using the get connect to send a http request following a restful api standard and i will work through the example and give you an explanation how to use it although we were using the deal package in our real development but since get x provide this feature let you make a risk for api communication so i will just briefly talk about this and if you are new to my channel feel free to reach out to my channel page and you will find flutter ui from scratch tutorial flatter get x tutorial flatter tutorial and our type programming language tutorial so don't forget to subscribe to my channel from my content and open a notification so you won't miss out the latest flutter tutorial okay without further ado let's get started okay let's open our visual studio code and enjoy emulator as you see here i wrote the code before today's lesson and i will guide you through with these examples and give you an explanation so first let's look into the user example this will be our mention point for this application as you see in this build method i only set up it is home attribute which will return our user view and another one is i issue it is binding and i pass the user binding for this user view and let's look into this user binding so in the user binding i first initialized the user provide using this uh get uh lazy put and then i lazy initialize the user controller by passing this user provider as you see i using this get dot file and you will find my user provider so let's back to this my map and the user provider in this example you will provide the rest for api communication to your backend so back to the visual studio go and let's look into the user provider so in the user provider i extend the get connect which is the today's topic and i can do some custom configuration inside the user provider as you see we have these only need method which would run when we initiate our user provider and we can config it is a basic url or a default decoder and sometimes you can also satieties requires a modifier or response modifier so let's back to visual studio and then we have this get a list of user method which will call this get request for our api slash user and it will concat this url with our base uil so you will see a list of user after we call the scauser method and that's for our user provider so let's look into our user controller so in a user controller we extends the get x controller also we using these state maxim and i will talk about this state maxim later so first we have this user provider attribute and we pass from it is constructor and in this user controller we need method we're using this fetch all user right so we will call this fetch or user and inside is fetched our user we're using a user provider get users right you will get the response of a list of user and we're using this then method and we can retrieve the data from our result and we'll send it back to our front end the reason i use this change method because i use the stay maxim so it will pass the data to this changed method and it will show on our screen if we have the data otherwise it will show the arrow and this will combine with this user view and we have a controller.obx and we can access the state and we can render the user information on the screen so initially i will show the circular proverbs indicator so when i restart our application so first you see a circular indicator which means we are fetching the data from our backend and you see after a few seconds the list of user information lists out on our screen means we successful i get the user data back in this way so we will get the user data back and we set this data to our changed method and in indicate we have a new state right so we can get the state in here so this one will be our new state which is the list of user model right and we can show a list of users on our screen okay so let's back three for this user view okay i know it's hard to understand for the first time but don't worry i will talk about this again so back to the user controller so first you need to understand this change measure is associated with this state maxim and when i specify the type for this say maxim which is a list of user model that means the first parameter we have in this change method we have the same type as we specify at our state method and then this data will be passed back to our user view when we're using this controller right so i'm going to rename this state to the data so it would be better for you to understand so we will get the data back in this controller.obs so we will have the data which is passing from here all right so initially is to fetching the data so you will show these uh circular progress indicator unless we have data back we'll render a list of view contains a list of a user pro profile as you see here right so for example i'm going to change the ui in our based url so i change to something uh [Music] no exist right so i save i'm going to restart our application and in this time you will see this error message because first it will show the circular progress indicator and then you will show this arrow as you see the arrow is the string is not the subtype of int or index because we uh sending the wrong paste the url so you'll see this type of error so you will not call this one you will not trigger this one this one will only trigger when you successful get the data back so i'm going to change the user provider and we change to correct url and we save again and we restart our application so you will see these trigger this distribute the builder will trigger because we have a data back right and we can pass it to this user profile and show a list of user here and i hope for now you have a better understanding for this get connect that means you can sending your request to your backend following the risk for api standard which is the get post put and delete but in reality we were using the third party library called deal and i will talk that in the futures video so i think that's all for today's lesson and i will upload all the source code and my map to my patron so you could find the resources there okay don't forget to subscribe to my channel thumb up my content and open the notification so you won't miss out the latest flutter tutorial okay thanks for watching i will see you in next video what's up everyone welcome back to my 4 star school youtube channel in today's lesson we are going to learn get x best practice and the command line interface which is get cli if you are new to my channel feel free to reach out to my channel page and you will find flatter ui from scratch tutorial flutter get x tutorial flatter tutorial entire programming language tutorial so don't forget to subscribe to my channel thumb up my content and open a notification so you won't miss out the latest flutter tutorial okay without further ado let's get started so first we're going to talk about the mvc design pattern the m stands for model b stands for the view and c stands for the controller as you see from this diagram the user action same to the controller and the controller will send a request to the module and module will get the data and respond back to the controller and controller notify the view to update the ui in this pattern the module handles data logic and interacts with the database the controller handles request flow by the user and the view handles data presentation and it will dynamically render the page from this diagram we saw review never talked to the module and model never talked to view they will communicate through the controller so we can write our business logic inside the controller and we will follow this design pattern to structure our project using the get x so i will talk about the get x pattern in this project here is the example project like follow the get x pattern and first you see we have the main. and the app folder the app folder is where all the applications directory will be contained so inside this app folder we have a data folder the data folder will representable for containing everything related to our data and we have enums folder contain a list of custom defined inline class and we have our service folder which contain the service that will extend the get x service as we mentioned in our previous lesson we can use get x service for our authentication or local storage then we will have a provider's folder contains our data provider which can be api or local database or file base for this example then we will have our models folder which contain our custom classes usually we'll use this for the object relation mapping for our database table after that we will have our modules folder so the modules folder consists of a list of page for example we have a home page and detail page so we have a separate folder for each page and for each page and we have our view with your controller binding and repository so if we have some widget which only used by the home page so we will create this widgets folder under our home module and then we will have our videos folder under the application folder so this feature is for the global so that will come and use by different pages and then we will have these routes folder contains different routes and pages the route starter will contain a list of constant string for the route and the pages will for mapping that route with our page and then we will have our core folder so inside this call we'll have our values folder themes folder and youtubes folder for the value we will have a string.contains a list of strings and color stutter and also we can agree our language folder under this values folder and we have a different language for example we have english data and shine instructor inside our themes folder we can have text sim tatar button tin twitter and inside this youtube folder we can have our keys top there and helper starter so don't worry we'll have a real project based on this get x pattern so don't forget to subscribe to my channel okay we finished the walkthrough for the get x pattern so next we will talk about the get command line interface that will implement the schedex pattern you can find the official uh get cri package on pop dot there it's called get cri and i will walk through of those commands okay let's back to the mind map so first we need to install our coi package you can run this flutter pop global active get cri command to install the get cri however when you successful install you cannot using the get command because you need to configure your system path for the mac os uh you need to decide which shell you're using if you running shell you can follow the same step i did in this my map so first you open your hrc file and then you export your system part so for example we will show here so first i need to open my hrc file and you will see i place the part inside this file which is this line so you just copy this one and paste in here and you hit command save and you close it and then you need to reopen these terminal or you can use this source command to reload the terminal so this is for the mac os if you run the windows i will put the link in the description how you can set up your part for the windows okay next i will show you how to use get human interface to create our get x project so first let's open our terminal and we will go to our projects folder and in our project folder we're going to use get command to create our project name i'm going to call it get x pattern example so if i hit the enter i will show you which which project you're going to create you could either choose flutter project or get survey so here i'm going to create the flutter project uh so the company name educate star school okay and we chose swift and we choose cortland and we want not safety and we're going to use the winter which is start recommended and then it's creating our project for us so we just need to wait a few minutes and this one is the most important part you need to choose the get x pattern so in the case i choose the number one and i hit enter and we will need to override our application so we're going to override the default flatter project and just wait few seconds indicate we successful create our get x pattern example so we're going to use our vs code to open our project so we're going to navigate to the projects folder and it's called the get x pattern example so we're going to open it so here you see we have our library folder and it will basically the same as we mentioned in these best projects you have this app folder and we have a data folder and we have a module folder contains home folder home folder we have a home binding home controller and home view and we have these routers folder and can then this router string right we have a home route and we have a home page for the route mapping so basically it's very simple project and we can follow the same structure to make it scale and maintainable so back to these command line interface are we going to try some different command in this case so first command we're going to try is is create another page so for example we inside this we have our home page right and we're going to create another detail page so you could either use these uh a terminal or you can use the terminal integrate inside this visual studio code so for simple i just use this one and i'm going to get x cut an example and now we're using get create [Music] i think it's called get create page okay create page and detail page so if i hit enter you will see we have another folder create for us which content binding a controller in the view right and the most important part is when you create this detail folder you automatically do the mapping for you so you will create detail route and your map for the project so you'll do it automatically for you so it's very convenient for this case and you can also create your view the preview and your controller by yourself so by default if you run these get create page uh with your folders name you will create the binding for you the controller for you and the view for you so if you want to create another controller you can run this get create controller command followed by your controller name and this on keyword to indicate uh which folder so for example if we want to create a login controller on our home folder so we could run the command like get create and we will have our controller we're going to call login controller and it's on our home folder so we hit enter and back to our visual studio code and you will see under our home folder the controller will have a login controller we could also use the command i'm showing here to create a separate view so for example and i'm going to create a login view so we will using get create view login on home folder so let's hit enter and let's back to visual studio code and you'll see we have a login view under the send a view folder on our home folder right but the difference is when i using this separate command to create a separate view it didn't indicate which controller we are using right so if you create a view using the this page command you will indicate you are going to use the home controller by default so if you're using this view command to create a separate view it didn't indicate which controller you are going to use and also i think i make a mistake in this case so we could remove the viewing controller so you can it will automatically append the view for for you same for the controller so next we're going to show you how can how you can create this provider so basically i just follow the same command so for example i'm going to create a user provider under our home folder so i'm going to paste on our terminal and i hit enter back to our visual studio code and you'll see we will have these providers folder automatically create for us and we can take a look for this user provider you basically just extend the get connect so if you don't know get a get connect feel free to reach out to my channel page i actually created this get connect tutorial how you can use the get connect to fetch the rest for api for your backend and we also can use the camila interface to generate a localization file for us so we need to do is we need to create the translation file in json format under this ss locales folder right so here we're going to create our assets folder okay we have locale so we're going to create the english version json so first for english version we're going to have our key hello which is hello and for the we have hello and we have hola so we can save i'm going to run this command to generate the localization and back to visual studio code and you will see we have this generated folder for us we will have our app translation we have our local key we can use this locale in our application and next we're going to create the model using the get command so we go there to option we can create a model with provider and a model without provider if you're using the the first option you will create the module and the provider as well so we'll try the first one and first thing we need to is to define this user json so back to visual studio under our access folder we're going to create our modus folder and we will have our user user json. contains dna which is my name and the age right so we're going to save this user json because we want using this first command it will create a provider for us so i'm going to delete this user provider and we're going to run this command so i just copy this one and paste on my terminal and i hit enter okay it says the user module.create successful and the user provider also creates successful so going back to our visual studio code and first we're going to look at this user class right you see we have our nand and age we have these from json and to json and we also have this user provider which extends the get connect and you'll see we have this get user this method we can use to retrieve the single user and we can also post the user using these post method and can also delete the user so you automatically implement this user provider so if we using the second option ski the provider it will only create the user model for us which is this user model total file and last but not least you can also install and remove the third party library using the get command interface if you want to install the third party library you can use this get install http which will install the http package for you so you see i run this command you'll run this flutter pubg basically you will do the same thing if we specify this http in our pub cb cmo file and you will see and you will automatically include these http package for us and you can also remove by running this get remove command so i'm going to try so i'm going to remove the http package indicate we have successfully removed our http package and you see you automatically remove the dependence for you inside this pub cbc yaml file okay i think that's all for today's lesson and we talk about the command line interface using the get cri package and also we talk about the get x pattern how to create your project follow the best practice to separate your view your business logic and your module this will be our last video talking about get x package and next i'm going to create a completely flutter application using the scalex package and follow the best practice which is this get x pattern so don't forget to subscribe to my channel thumb up my content and open the notification so you won't miss out the latest flutter tutorial okay guys thanks for watching i will see you in next video

Channel: Fullstack School

Views: 29,549

Keywords: flutter getx, flutter tutorial, flutter state management, flutter getx tutorial, getx flutter, flutter getx state management, getx flutter tutorial, getx tutorial flutter, getx package, getx tutorial step by step, what is getx, getx 2021, flutter getx demo, flutter course, mastering getx, best getx tutorial, getx route, 2021 getx, flutter getx controller, getx theme flutter, getx view, route management getx, flutter getx api, getx full course, what is getx flutter

Id: vIIBp6xJJeA

Length: 195min 30sec (11730 seconds)

Published: Wed Dec 01 2021