🥵 Flutter Provider State Management! | Make a simple Project | Flutter | Provider | App Developer

hey there this is akshit Madan welcome back to a new video and in this video we are going to cover provider State Management so I am getting a lot of requests of this video and also of block State Management so next video is block State Management complete tutorial and uh this video in this video we are going to cover provider State Management so what we are going to learn in this so first of all you should be clear with the concept of State Management so let me take one minute and explain you what uh State Management is in simple terms right so let's say you are making this application this is a counter application right and when you click on this plus you can see that the counter is increasing right so so you can understand that this is a state the state of this variable right it's getting incremented right so when I go to the next page and come back it should be maintained right it should not get refreshed so in the same way let's say if I give you a bigger example let's say you are creating a e-commerce application right and you are adding some products in the card right so some products are getting added in the card right so there is some there is some state of that card that is maintained so when you go to a product page when you go to a different page then it's not like that card gets empty it's not like that right it gets saved somewhere it gets saved right so state is maintained so this is this complete concept is called State Management where we are storing the current context the current state of the Mobile screen of the app in memory right so this is all called State Management right so in like this was a very simple exam example that I gave you and now we are going to make a simple simple application in this video and that video is more than enough this video is more than enough for you to understand or start using provider in your applications right and so what we are going to build today let me explain it to you so uh there will be a simple text at the top and that text will be just a number right and below that there will be a list of numbers right and there will be a plus icon over here so when I click on the plus icon the last element of the list will get incremented and added in the list right so let's say currently at the top there is zero and in the list also there is zero as soon as I click on this plus the zero will uh add one more the in the list item there will be one more element getting added that will be one and on the top the text will also get updated with the latest value of list that will be one right so let's start building it uh I don't like talking much about what we are going to build and also one more thing don't code along with me right please don't code along with me first watch this video if you want to make notes please make notes but code after watching this video completely right so you will be clear that what is your end goal and how you have to achieve that goal right so let's start building it without uh much talking and wasting time so you can see that this is my uh simple let me clear everything let me clear the completement.dart and let me import material.dart here let's create a wide main function here and let's call run app new Maya that's great let's go to the next line and create a stateless widget called my app and over here I'm going to return a material app perfect now I'm going to create one file called home dot dot in this also I'm going to create a stateless widget called home and in the main.dot I'm going to call home perfect and now let's go to home and return a scaffold and the scaffold I'm going to return an app bar let's save it you can see that bar on the right hand side let me return a body as a container in the container and also let me have a floating action button Floating Action button perfect what does it want uh okay so let me return on press and in this on press I'm going to currently have an empty function and over here in the container I'm going to have a child with the column with children my first children will be text it will have zero I'm having a static value but I'm going to write the logic also that's not a big problem and over here in the next thing I'm going to have a list view dot Builder and item count let's say for now 10 item Builder let's define a context and an index and I'm going to return a simple text over here let's say one what is there a context from Index this is good okay perfect and let's have a semicolon and this can become our sized box this can become constant and this some people say that I ignore links uh in my videos so that's why I'm not uh ignoring lens I'm adding uh I'm taking care of the uh taking care of all the lints now right so uh future already completed okay what is this now check over okay uh let's see what is the error column children yeah we need to wrap this literot Builder with an expanded that's good perfect I can see uh let me increase the text size so I can add a style text Style font size 30 and also let me add the same uh text style to this one too okay this I've added to this one perfect you can see there is zero and there is a list of some numbers right so now what I want to do is now what I want to do is as soon as I click on this plus let me make this as plus so it will have a child icon [Music] I can start add this will also become const perfect so when I click on this plus icon I want to update this list with one more item or I want to append the latest Value Plus One in the in this list and I want to update this text with the latest value of this list or the last value of this list right so for now let me create a uh let me I need to make it a stateful widget because now we need to change the state so what I'm going to do is I'm going to have a list of int and this will be called numbers is equal to 1 comma 2 comma 3 comma 4 right and let me have this 0 will become numbers dot last dot the string right this constant will be gone now and this textile will have const now perfect and now in the item dot uh in this list I will also have an item count so where is my item count yeah over here this will become numbers dot length and this will have numbers at index cost will be gone const will be added over here and this will become dot to string perfect you can see 4 is the latest value one two three four now let me uh do the project without using any State Management right without using provider without using block without using get X anything right so so to show you that what I want to build and that same thing we are going to build using provider and this video is going to clear all your basic doubts regarding provider what is provider how to use it how to create provider files how to manage consumers what are consumers everything will be clear right so don't worry so in this on press what I'm going to do is I'm going to add set state first of all let's get the number last number right so int last is equal to numbers dot last perfect and set state will be numbers uh sorry numbers dot add this value will be uh last plus one perfect right so now let me save it and when I click on this plus you can see you can see the top counter is also increasing and my list is also getting appended perfectly right you can see okay this is good this is good right now what I want to do is let me create one more file now right so let me create one more file and let's call this file as second dot dot second dot dot let's create a stateful widget over here now what I want to do is I want this same list in the second page but with a horizontal scroll View now tell me how are you going to do it pause this video think about it how you how like I want to see your fundamentals how strong they are right how will you do it so I hope that you have tried it out so one thing can be you can pass the list from home.dot to the next page right okay you can pass the latest list uh you can pass this numbers list from here to there let's do it let's not uh imagine that thing let's try to do it right so this can expect sorry except uh final list of end numbers from there and I can add parameter to the Constructor right and let me take the UI scaffold to scaffold over here and let me import material.dot this will become widget dot numbers right let me just do it okay this is good and this list view dot Builder where is it yeah let me remove uh this thing expand it and let me make the scroll scroll Direction access dot horizontal let me save it in the home dot dot let me add a new button so I can add an elevated button which will say navigator dot push sorry Navigator off context dot push material page route context second perfect numbers I have passed so let me show you and this will have a simple text second so now what we are done with uh so this is my list right when I go to second I can't see anything let me maintain I guess the issue is uh we need to provide it uh we need to wrap it with a container and we need to give it a height of let's say 200 and width of sorry height is 200 width of double dot Max finite perfect so you can see it's happening it's happening that's not an issue right so uh what is happening over here I am having this list this list is passed to Second and I'm getting the same list so if I just go to the previous screen update this go to second I'm getting the updated list that's not an issue and if I just increment this this is getting updated not an issue but when I get back the state is not updated why because there I've just passed this list the previous updated list to the next screen but there some things are happening but my previous screen is not having any idea about what is happening there right so I'm cutting the state I'm losing my state now does the list the state of this list is now not maintained right so this issue this issue we need to handle using provider or block or get X or any other state management package that you want to use right this issue we need to resolve so why are we having tutu list here you can see Toto list are there let's have one common file let's have one common list let's have one common add function to the list and let's utilize that complete class everywhere throughout the app right that we can do let's do it so first of all I go to the pubspect.eml in my dependencies I'm going to have provider right and let me just save it and let me go to uh yeah let's create a file I'm not taking care of the project structure you I've already created two videos on how to maintain your project structure you can watch it you can create files as per that but now let me create a file called list provider dot dot right and now let me create a class list numbers list provider let's call it now one thing will come we need this is not a normal class this class is going to use inheritance and it is going to extend my change Notifier class right so this is how we are calling the uh we are calling a class called Gene modifier we are extending it and then we are going to create our class why because I need a function I need a function called notify listeners I'm going to show you don't worry about it right so here I'm going to using in this class I'm going to Define my list let's do it so I'm going to have let me just copy it let's not waste time let me just copy this list Ctrl C control V perfect and in the over here we wrote wrote a function right to add the list element let's add it over here so let's add a function called add and this is not going to return anything so void add and this is not going to take anything it will just uh take the last from there so end last is equal to numbers dot last and numbers dot add last plus one till here I hope you have understood I have not done any rocket science right I just created a class I defined a list I created a function I'm not doing anything else right now how will your these two screens will listen to this provider class will listen to this class we'll take data from this class how will that happen so for that first of all what I need to do is I need to register this provider in my main dot dot in my material app right so what I need to do is I need to wrap this thing with a multi provider I am using multi provider uh you can use a single provider I'm using multiple provider so that you can have multiple providers in your material app you can wrap it with multiple providers right because in real scenario obviously you won't have just one provider right you will have multiple providers so try to follow the same approach you will never get stuck anywhere right so multi provider it takes a parameter and the parameter is a child so a child we have already provided so providers us and over here you can see it's a list so today I created one provider one uh class but tomorrow you can have hundreds of hundreds of Provider classes so that's why you need to have a list and every provider you need to register it over here otherwise it will give you an error right so write change Notifier provider and create uh takes a function so it will take context and you can Define the name so it was numbers list provider perfect this is done perfect this is done now right so we have registered our provider uh in a in the main.dot right now let me take care of this thing also Define it as constant this new will okay what is this prefer okay constant new new is not required perfect so this is done yes now we can start utilizing that over here so let me just refresh the app perfect there is no error in the console now let's go to home dot dot and how can I utilize it so let me just remove these functions let me just remove this list let every let's every uh let's do everything from the scratch and uh okay this is good text is over here perfect perfect now there is no issue I guess we can start with implementing the provider so to utilize that list providers utilize this list and this function we need to wrap our widget with a widget called consumer right so let's wrap this body so that I can have instance of that model in my whole screen in my whole widget so let's wrap it with a widget called consumer now in this consumer you also need to define the type of this consumer so type will be your provider name so it will be numbers list provider and let's just import it uh okay this is done and this will not have a child this will have a builder right it will have context value and child so let me just write it like this perfect and this will have one more this closing bracket this value you can give any name so this will act as your model right so I am calling it as numbers provider model right now using this numbers provider model I can access the this variable list this function of this class right let me show you how so using so I am having numbers provider model let me just copy it let me just paste it dot numbers you can see it is solved so using this numbers provider model I'm accessing the numbers list getting the last daughter string perfect let me do the same thing over here over here perfect now one more error is there let's see okay over here so now yeah now I don't need to pass the numbers list also I don't need to pass anything this can second will also list listen to that same class so let me just remove it now over here so let me just remove the Constructor also not a Constructor the parameter in the Constructor okay now this numbers we can remove from here and let's define the second as const this text as constant let's go to Second let's do the same thing let me remove this uh on press functionality we are going to access the function from that provider class wrap the body with the consumer numbers list provider child will have uh and obviously I'm going to provide you the code so don't worry about that let's call it numbers list provider small end and let's replace this widget dot will be gone now so you can see using this provider we don't need to actually pass any parameter to the Constructor that's also a very good thing right so let me just copy it let me just paste it one error is there yeah you need to close the bracket perfect now uh one thing that we're missing is in The Floating Action button we need to define a function also so that function also uh okay that's a problem now actually we build we wrap the body uh with the consumer actually we need to wrap the scaffold because so that we can have the access to this function now so let me just remove this thing from here Ctrl X let me wrap it over here and this will do something like this yeah it's done so now this is done so I have wrapped my scaffold with the consumer and now I can access numbers providermodel dot add functionality I will do the same thing on my second dot dot right you can see let me just remove my uh this thing from here and let me do it on scaffold so that I can access the function yes this is good and over here I can say numbers list provider dot add save it let's refresh the app let's see the magic of Provider now right so my app is refreshed and one two three four is there because I already defined it over here let me just add some value nothing is happening obviously at the first time we computer Engineers have to face some defeat now we are going to see why it is not happening right I know the solution can you think of it can you think of it you can pause the video if you know some things about provider you will get it the missing part is in this file we are missing notify listeners so what is this notify listeners so notify listeners what is going to do is as a name defines notify so whichever widget is listening to this class in our case it is home dot dot scaffold widget complete scaffold widget widget is listening to this class and the second dot dot also scaffold widget is listening to this class Whenever there is a change whenever there's a change in the values of of the variables of this list of this file it is going to notify the listeners it is going to notify those consumer widgets right or basically you can say that whenever this function is called right it is at the end it is going to notify those consumers right so that's a consumer like ears right consumers it is going to consume some State consume some value and notify listeners like it is going to notify it right so consumers and notify listeners right there's a mixture perfect so now we have added a notify listeners let me just refresh it and I hope nothing breaks so let me just refresh it again yeah this is good you can see it is happening you can see it is running perfectly I go to the next screen it is running perfectly I add some values here it is running perfectly I get back it is updated the problem that we faced using set States is solved Now using provider you can see the magic right now think about it as a card screen right so this is a products page you added some products on wishlist now when you go to the card those products should be in the wish list if you remove those remove some product from the wishlist from the card screen when you get back it should be removed on the previous screen also right so there State Management is going to play a very critical role and now you have this weapon right you can do it using provider I hope you like this video if you have any doubts reach out to me mostly in all the apps these consumers notify listeners and is cleaning up class wrapping main.dart material app with multi-provider is going to solve 99 of the cases in that one person you have to just search on stack Overflow or Google you will get your answer or you can reach out to me but I suggest that before reaching out to me uh try to find a solution because if you will directly reach out to some people you will never uh like get this Talent of actually solving the errors on your own right so I hope you like this video till the next part or not there's no part of this till the next video of block State Management keep coding keep innovating and thanks a lot

Channel: Akshit Madan

Views: 9,751

Keywords: #developer, #flutter, #appdevelopers, #ios, #android, #google, #apple, #data, #datascience, #collegestudents, #engineering, blockchain, freelancer, college, students, internship, web3, solidity, python

Id: ABfwe8nUi-s

Length: 26min 40sec (1600 seconds)

Published: Sat Feb 04 2023