GetX State Management tutorial with Flutter 😍

hey everybody what's up welcome back to channel codex this is your host of zil and in today's video we're gonna see how to achieve state management with the help of get x package get x is very famous nowadays people are using for route management state management and lot of other stuff so i thought why not to create a tutorial on that so here is my screen in front of you so basically we'll be creating this shop application online shopping where you have first product second product third product right this is a list item coming from server we'll assume that it's coming from server and then we are adding elements to the card so as soon as you element anything you add any element to the cart the total price here is going to change and that is done with the help of state management using get x if you add another item it's going to add that in a total figure and if you notice over here the cart icon says two items are there so all of this is being achieved with the help of get x and with very few lines of code so those who just join now in the live stream this is what we are going to create today something similar to this or maybe we will try to create uh exactly same thing and to achieve exact same thing i'm just going to copy paste some of the ui component not you know not state management thing what i'm going to teach you but just a little bit of ui i'll be copying so that we don't waste time in there the first thing which i do always when i create application i just delete the home page okay this i i don't really like it to be honest so inside material app the first page we have to create so let's go ahead in our source code the file structure and here create all the folders so i'm going to name views because we are going to follow the mvc pattern so there will be views folder there will be models sorry not inside views inside lib folder we'll create another folder called models and create another folder called controllers all right so we have model view and controllers these three folders are there now let's go ahead and create our first view which is our page so i'm going to say new file and say what we can say shopping page shopping page dot dart and let's create a basic page over here so i'm going to go a little fast on the ui side because that is not what we have this live stream for and let's create a stateless widget shopping page so notice one thing over here that i created stateless widget for my uh page it's not a stateful widget because when you're working with get x you don't need stateful widget at all because in a stateful widget you have your state basically lies in the ram and you don't want to have that dependency you can put anything you want any data you want to remember you can put inside get x so create always stateless widgets inside get when you're working with the get x specifically and i'm just going to give it a scaffold with a body container that's fine and to fix the issue here i'll just say shopping page so to the viewers who have just joined we are creating again i'm just repeating myself uh we are creating this uh get x package we are demonstrating the get x state management inside flutter with the help of a shopping application all right so our shopping page is up and running and you cannot see anything the reason because it's blank it it has only one container and what we are going to create over here is one list view which will show the list of uh shopping items like products available and then we will create one label where we will show the total price and one final button where we show the cart items yeah so what we are saying that will have a list view so what are we waiting for just convert this as a column and inside the children add a list view so i'm going to use listview.builder this one because this is a list of products coming from internet you should use builder for infinite number of items and the item builder takes of course context and the index if i'm not wrong yeah that's fine and inside that let's return a card so this is going to be our element of list and the item count also we need we don't have as of now perfect so now you have seen that some error happened and the reason because this list view is inside column so it needs to know what is the height it's going to be so i'm just going to wrap with the expanded just be here for a couple of minutes i'm just going to finish this ui part uh real fast and then we will talk about the actual implementation so this list is expanded now the error has gone and and let me just put a hard-coded account as well item count five maybe fine it's not showing up that's fine and finally below this expanded list view i'm going to add a label which is text and here we will show the total figure total amount okay whatever is going to be and finally let me add a size box also so that there's a spacing of height 100 pixel that's that's all we need so total amount is being displayed over here there's a height of 60 and let me just wrap this column inside a safe area so that nothing gets cut off we have to fetch the items the shopping items from the server okay so what we are going to do to mock up that we need a model first right how each item is going to look like so for that inside a model i'm going to create a product dot dot so this product dot dot will contain the class which specifies our model so let me just copy paste that here i have the product already read uh it's ready with me so i'm just going to copy paste okay and it's very simple like it has all the properties what is the id of the product what is the name what is the image what is the description and how much is the price it's very simple just for demonstration okay so model we have view we already created what else we need is a controller okay so let's go to controller and add new file i'm going to say uh shopping or maybe uh yeah shopping controller dot dot now let's create a class called shopping controller and this will extend from get x controller so let's say get x controller we didn't get any suggestion why because for that we have to add a dependency so let's leave the class as of now and go to pub spec yaml over here and add a dependency just like that to work with get let me let me show you as well get x flutter okay this is the package which we are going to work with so make sure to download the latest version and let me also tell you that this is top three most like flutter package and if you're working with get x make sure to give them a like okay just like that i just did it and let's uh import this package inside our project just copy from here and add it here just like that and as soon as you save you are going to get that package basically visual studio is going to get that package for you and now you can safely close this or let it be there so let's jump back to the controller part and let's try to extend this from get x controller and now you can see the suggestion is coming up for get x so i'm just going to import the get x from state manager and now we have the controller in place so what what we need inside controller is the elements which we want to bind to the ui so if you have ever worked with mvc controller mvc pattern you know that the controller has all the properties all the elements which is going to bind to ui okay so what we want inside shopping uh application like shopping page basically is the list of items list of product right so i'm just going to define list of or maybe i can just say where why to define everything myself so where shopping items are uh let's say products products yep okay and now what it will be here you can define it's going to be list of product that's it you're done so this thing you can bind to your user interface but what will happen it's not going to update as the data updates because to work with getx controller you have to make it observable so whenever your data changes as soon as your user user user interface your ui basically gets should get updated right so to achieve that this is an important point so this this definition is very simple like you have a list of product with you to make it observable you do obs so now it became observable so anytime your data is going to change it's going to update the user interface as well okay so let me let me uh bring down that point as well because uh in in get x you can achieve like you can update your user interface with three different methods there's a get builder there's a get x and there's obs x obx okay uh we are not going to talk about get builder we are not going to talk about obx if you want i can brief that in end of the tutorial basically obs is something we are going to work today because that's a reactive approach and it works just fine and i just love it so you should also prefer working with obs unless you have a requirement where you don't want a single extra bit of memory you just you are very restricted with the ram so go ahead with get builder and it it will work for you but in get builder you have to update your data manually okay and with obs you just update your data any uh at any point of time and it's going to reflect the ui automatically so i hope till this point people are clear we just created a list of products and it made it observable let me know in the comment section whether you guys are enjoying the tutorial or not whether you are understanding what i'm trying to say now in your controller you get all the states just like your page so there's on init there's a close there's update so every information every event you will be getting inside your controller so as soon as you create this controller you can trigger uh certain commands so say for example i'm just going to override what happened override init method okay on init so what will happen on init i'm just going to call the api like not going to call api exactly but uh like uh we'll try to simulate that so we will try to simulate something that we are fetching the data from internet and then we are updating this list of products to show it to viewer so i'm going to say fetch products okay and let's define this method over here void fetch products and of course this method is going to be a sync because it's going to interact with the internet like we are simulating that what happened okay fine so in here what i'm going to do to simulate internet call i'm just going to fake it by future dot delayed and duration of maybe one second one second duration so i'm just going to delete and after that i'm going to say uh maybe server response so this is what server response came list of product or just i can just remove it okay so this is what came from server you just try to understand that okay and i'm going to i'm just going to copy that data from here existing project so these items like first second and third product it came from the api just assume that as of now all right and this product result whatever came from api we are going to assign to our observable uh instance so products we are going to update the value basically over here i'll just say sorry products dot value is equal to this new data which came from the api so let's just collapse it so you don't see it what i'm doing over here so you got the point right uh in your get x controller you can create observable items just like that and on init you can call apis if you want it combines high performance set state management yeah t shastra it has a lot of feature get x has a lot of feature over other things so you should consider using it okay let's let's move uh in our tutorial so our model is ready our view is ready and now our controller is also ready we have the products which we can bind to the user interface we have fetch the initial data okay yeah sorry about that i was just waiting because of these lights the ac is turned on still uh it's very hot all right so our mvc all three are ready we just have to link it up now it's very important pay attention over here what i'm trying to do now uh am i on the right file uh it's online shop yes so in our shopping page now what i will do is create an instance of our controller so our page our view should know where our controller resides so i'm just going to say final shopping controller is equal to we have to create a new instance of that so i'll say shopping controller just like that so now you notice that we have the instance of controller with us to use it some other point to use later on in the project we can use dependency injection which is preferred way for uh defining controllers so you just say get dot put and now with get.put what basically you are saying that create this controller and put it in the dependency so any anytime in the later on when you're later on in the hierarchy you want to achieve you want to fetch this data you can use the same controller same instance of it and let's resolve it by get so everything is fine so this is how you uh define the dependency injection and basically you can skip that if you don't want to use it further but this is recommended all right so we got the instance of our controller now using that controller what i have to do is make this list view always listen to the data inside controller so what we have to do for that we have to wrap this list view uh inside a get x so i'm just going to say wrap it with the screen builder so that i get the implementation of builder and everything this is a shortcut which i use okay i i thought i will show you manually but that didn't work well so i just wrap it with the screen builder and just change it to get x now you have the full template with you you don't have to change anything just instead of object you specify it's a shopping controller there's no stream remove it and the output which it gives is just the controller okay now everything should work fine perfect it's just perfect so what we have done we have wrapped our list view uh let me just show you the mobile screen as well okay there are some errors going on we'll fix that so we have wrapped our list view inside get x uh get x widget and that is going to provide us with the shopping controller and then we can fetch all the information using this controller okay so i'm just going to use this controller and ask for the products this product is something which we created uh earlier and here we are going to use the length of the product basically so now our project compiles everything is fine but nothing shows up because because maybe this card is empty so let me just copy the card as well real quick i hope you guys are getting the point which i'm trying to make here uh it's just a very simple setup kind of thing so this entire card i'm just going to copy from here to here so that we don't waste time creating the user interface perfect now it has started giving some error and that error is because because of the products controller so what we can use is the shopping controller so previously i used or even better i can use just controller over here okay and what happens on the race button that i will uh tell you later on because that's a different story altogether now let's save and try to run perfect simple right so we got all these elements now let me just restart and you will notice that it takes one second to load the data and then this item comes so basically what is happening at the beginning we are calling the shopping controller here it's going the command is going to this controller and when it's initializing that time it's going to make a api call or from where wherever you want to face the data either from database or anywhere and that you just update the products value this product and this list view is going to continuously listen to it so if you add any extra element it's just going to update in front of you so far so good let me know in the comment section whether you guys are getting the point uh whether you guys are enjoying the tutorial and let me just also provide a background color so that you can differentiate between the list item okay i'm just going to say colors dot teal and it looks just nice okay now when i say add to cart nothing happens because i just commented out so basically now we completed the 50 of our uh tutorial like how to achieve get x like this list which you have which are seeing right now on top here is achieved with the help of get x so anytime you get a new data in the server it's going to update automatically right you can write any logic you want so let's not waste time and move on because we have almost completed 45 minutes so let's move on the next part of this tutorial where i'm going to add elements to the cart so for that again we need another controller which will uh manage everything related to card so try to understand this thing that controllers are based on the functionality and not based on the page so this is the general mistake people do because when we say that view mvc model view controller so for each view there's a controller it's not like that the controller is basically a functionality so your one controller can be shared across two page your one page can have two controllers it's just matter of the functionality so we fetched the list of item maybe it came from search or something now we have to add to cart so we need card for uh functionality here so what i'm going to do go to controllers create a new file this time i'm going to call cart controller dot dart again same practice we have to do create a class sorry controller and this will extend extends yes from get x controller it's very simple right and what we need here again is a list of item which you have added in the card so i'm just going to copy that information where is the where is the thing i can just close this main dot dot i don't want pop speak yaml okay so here we have list of products i'm just going to copy and put inside card controller because in card controller also we need list of products and to be specific i'll call cart items perfect now again whenever you add two uh card items it's going to update so you can write a method add to cart and here you provide the card item so i'm just going to pass in the product over here and this particular product it will add in the card so basically here card items dot add the product it's that simple so anytime from any page you're calling this method add to cart it is going to update this item and whoever wherever is listening to the cart items they are going to get the updated data so it's that cool like from your search page you are in some product history page or wishlist page or wherever you just call this functionality add to cart using the card controller of course that will add elements to the cart uh card items and when you open your cart exactly that time you will find all those elements so that's how a controller really helps to modular modularize your code sorry all right so we have the basic functionality which we wanted we are not going to do anything on init we are just going to call this method so let's go to the shopping page from here and uncomment these two lines so the data will be coming from this controller the product will be adding and card controller we don't have that instance so let's go ahead and define that so i'm going to say final cut controller see capital camel casing you have to follow that's a good practice and again get dot put card controller that's it so one more point i wanted to tell you that one time you put something in the dependency like card controller i just created now you don't have to create it again like entire life cycle of the application until you destroy this page it's going to be there in the dependency so like from this page you are navigating to the next page there also you can find this controller you just have to write get dot find and it will work totally fine so each page you don't have to do that it's a one-time process because it's a dependency dependency injection so we have the card controller now on click of this add cut button using that card controller we are adding to cart and what we are adding product at this index so let's just re-run the application sorry so here our products are loaded i just added to cart added to cart add it to cart but you didn't see anything why because the total amount is not updating there's nothing to see right the results are not displayed so quickly let's add this total amount also observable make it observable uh not observable make it listenable so i'm just going to wrap this with stream builder and you know the reason why i'm wrapping with the stream builder so that i can convert it to get x okay and it accepts type of card controller there's no stream for sure and i remember there's a plug-in available in visual studio code with help of that you can easily get these templates so i recommend using that but i don't have it installed maybe at the end of this live stream i will install it so i'm just going to say controller over here perfect so this text is now a wrap inside get x so anytime there's a change in the total amount we are going to get the data back so you will be thinking we just created in the card controller list of items how we are going to get the total amount right uh something happened yeah because we are not using this controller anywhere so let it be read for some time so what i'm going to do now is find the total amount this card items has because each item has some price so i'm just going to find the total amount so i'll just say total amount or maybe say total price is equal to these card items of course which we have observable and i'm just going to fold it the initial value will be zero and let's say we'll store in the sum for each item and now i'm going to say sum plus item dot price now this is basic dart stuff like uh if you are into dart programming you should know this and if you if you don't know then you can google around how to sum up something how to aggregate something how to find distinct items uh okay some notification what it is i cannot see it okay somebody subscribed so thank you so much for subscribing ali ali hussain of thank you so much so here it's saying that some issue is happening because now you notice over here cart items is not just a simple list of product it's a rx list of product like it's observable thing so no issue we can access the exact list also oh my goodness i'm going to mistake something let me make this a property or how how i can do that let me check my previous code so that yeah card items only i'm using what's wrong in that come on maybe we need to define the data type here double get perfect now it worked so basically instead of creating a property i just created uh what we call sorry instead of creating a field i just created a property so when you define get it becomes a property of that class particular class so we are finding the total price is the sum of all the card items so all the card items price we are fetching and putting in the total price and this time we don't have to make it observable we don't have to write dot obs in front of us because this is listening to the card items so anytime your card item changes it is automatically going to update and whoever is listening to that is also going to update so that's a beauty over there you don't have to make every property which relies on the observable make it observable because it's very simple it works automatically now i'm going to say total amount in dollar so and uh what what what we have to use dollar this for symbol what happened controller dot yes total price okay and now let's just save it let's see yeah so now you can see that the total price is zero or maybe if you cannot see it i can make it visible so i'm just going to provide text style font size of 32 and color sorry [Music] all right now at least you can see it so we have the total amount of zero zero and let me just add something in the card so i just click add card you can see 30 added over here so without entire page rebuilding without uh everything happening again this this scenario we are updating both the widgets so as soon as we are changing data it's going to add that element in the cart i like the total price is getting updated so we have seen now how card controller also works and now one last thing i'm going to do is add a functionality for the card count basically and that is also going to be very simple stuff just like that so this is like uh a cherry on the cake uh we have every functionality on the uh present we'll just create something which represents actual cart value so i'm just going to create a number of items so this will be integer of course a get property and we'll say cart or maybe count and this will come from where cut items start length it's as simple as that you don't have to make it observable it's already uh listening to the card items because it works on the card sorry it is related to card item as soon as it updates it's going to fetch that value so now we have another property to work with i'm just going to define uh this is the body i'm just going to define a floating action button over here floating action button come on come on come on give me a suggestion okay so here we go let me just format it so that you can see it 43 people are watching thank you so much guys for staying in this video let me take some question as well before i write that final controller now you can see that the card item is over here so before i write that final functionality uh let me take some comments bro can we make one file where we instantiate every controllers exactly exactly you can do that you can write everything inside your main class so if you want you have right you have asked a very very good question numan thank you so much for that and i was about to tell you uh at the end so here once your project starts that time you can write every controller over here like get output first controller second control third controller and then you can use in your entire application but sometimes if you are if you want to save memory if you don't want that things which are not used to reside in the memory that time you can create on your page and destroy as soon as the page destroys so that destroying part it's actually handled by get x very good like as soon as your page will destroy it will automatically destroy you don't have to do anything but if you want every controller to be initialized at first to go you can write it over here no issue with that okay so where are we we are writing this floating action button where we are going to update the card items count so let me give the icon i'm just going to say i can start card something related to card how that looks okay and also let me change the background color colors dot amber i used and it just looked fine to me and maybe this icon can be of color black i'm not sure fine so the text part over here now notice the beauty of get x or the flutter itself you don't have to update whenever there is account updated for the card item you don't have to update entire floating action button entire button with the shadow with the image of card you don't have to update everything you just update this text which is having the count so i'm just going to wrap this again with the stream builder and sorry about that uh i didn't uh install that plugin i will recommend you guys i'll put link in the description for that plugin for vs code that will give you suggestion just like stream builder suggestion so you can wrap with the get x i'm just going to say get x real quick and it works with card controller there's no stream and in return it gives controller to work with a little bit of uh you know just i just remember these things now so what we have to show here controller dot count and this count is integer so i'll make it sorry to string okay reload and let's change the color as well one thing i don't like about the text widget is that to just simply change your color of the text you have to write styles and all those stuff so they should have thought about this like it's it's good to have something modularized but this is very common thing like you you change your text color very often so they should have given this option upfrontly yep let me put comma so that it is nice formatted let's uh let's let's say font size also to 24 pixel and save everything and now one final time i'm going to show you this entire thing in action so this is our project loaded it took one second to load from the internet and that we have defined if you said two second it will take two seconds and whatever like just to demonstrate that it's fetching from the internet okay and i'm going to say add this item to cart 30 added one item added to cart add this item now you see the price 79.99 and two items in the card now you can write any functionality which you want if you click on this you want to go to the next page and show entire card item there you can do that of course and that is the part of get x tutorial with navigation and route management so which i'm going to plan next week maybe maybe with the live stream maybe with the recorded video but of course i will plan the route management as well and it's it's super duper easy you just write get dot 2 and the name of page and it's done it's very simple what i have done so far uh let me just summarize that so we created this mvc pattern so here it is model view controller model is the uh like the model of the page like what what you want to show it there the controller is something which is driving the page basically and the view is something is your user interface all right so thank you once again uh for joining the live stream i hope you guys learned something give it a like if you have and uh provide provide your feedback in the comment section keep liking the video keep providing your comments so that my videos get a rank top on the youtube that will be your contribution and again requesting you guys to take a membership in return of that i am promising one video per month last month also i did a live stream for my members there were only two members at that point of time so after live stream ended i just deleted it and again if you guys are taking membership i'm going to do uh this week members only members dedicated video this week so make sure to take subscription of my channel and i will see you guys in the next video thank you so much you can write in the comment section if you want i'll be available for next two minutes uh with the ending screen see you guys in the next one

Channel: CodeX

Views: 57,239

Keywords: flutter tutorial, flutter, flutter app, learn flutter, flutter with example, code, dart, programming, code practice, codex, afzal, in flutter, flutter sdk, flutter trend, flutter is future, getx, flutter state management, getx flutter, flutter getx, getbuilder, obx, reactive, cart, online, shopping, application, getx vs provider, getx vs bloc flutter

Id: ZnevdXDH25Q

Length: 38min 13sec (2293 seconds)

Published: Sun Oct 04 2020