🔴 Provider in Flutter 2023 || Explained with a simple app || State management

welcome back to another video in this video we will see how to use provider in our flutter app so provided is one of the state management techniques so generally we use such state to update items update the data in our flutter upright so the issue with set state that is uh it renders the entire screen when we use set state but when we use provider we can just render the particular area where we want to update the data so and provider has many other use cases which we'll look into this video so I have created a demo project already so the main dot dot contains the standard code template from the home I'm calling add items which is my UI so basically we are going to create a shopping list right in this add items class I have a app bar and actions I am displaying the total items in card so we will create a shopping list and the body will this body I am using list view Builder to build 10 items which has a button so our task is when we add this button this number should get updated without using set state so we have to maintain a state where I have created a folder here State and card dot dot is the card file so we will store all our items we will whenever we add items to cart this is where it will get stored and I have created two other functions which is to get total items the total count and to add the item right so this is my uh standard template which I have already created so to let's move into provider now so you can just go to pub.tab search for provider copy just provided package and paste it in your subject.yaml which I've already done right so before moving into the concept I'll just explain you using a simple diagram so we have our card data dot dot so here we will be adding our cart items so this is our state and we have our add items class which is our UI so our task is to establish a connection between this UI and state so that we can communicate and interchange data between these two class UI and State so for that we will create a pipeline but this pipeline will be attached to State and the parent class of this UI so my app in in this case my app is the parent class of this UI so we will establish a connection between a pipeline between states and foreign class of this uh UI in this case my app is the parent class but generally in all the projects my app will be the parent class for all the other widgets right so generally it's a good idea to establish a connection between State and my app for all the uh State models so that's what we are going to do here so what we'll do is we will go to our main dot dot so this is my my app class so I'll first create an entry point for my pipeline so I'll just give change Notifier provider right so this change notify provided is my entry point of the pipeline so this contains a create attribute so for this create attribute we'll pass a context and we will have to return the date so here the state is cart so we'll just return the state to this and it has another property called child so this child we will pass our material app and we have to close this uh entry point pipeline so this pipeline is a term which I am using for you for you to understand better so this change Notifier provider is the entry point of the pipeline and we have to close this pipeline right so change Notifier provider is the entry point of the pipeline and we have the exit pipeline exit point of the pipeline right so for that what we'll do is we'll go to ours State and we will just add width Notifier we change Notifier so this establish a connection between State and our uh parent class of the UI okay so the pipeline is fixed now we can uh exchange data between all the classes all the subclasses all the children classes of my app in this case add items is the children class of my app right so now we can exchange data between these classes and State so let's first consume data let's first get data from this state so we'll try to get the data from this we'll get we'll try to get the count of this items in our UI so this is where we are going to get the count so for that what we will do is we'll use the consumer class so now this consumer class has a builder so this Builder will have to pass context we'll we'll get the data and we have a child let's not dive deep into this so let's just understand the syntax as it is and we have to return whatever the widget we are going to pass so we'll just cut this text and we'll pass it inside this and this Con consumer will have to pass a generic we'll have to say what we are consuming we are consuming from the cart right so we will just give the generic there and instead of this 0 which we have statically typed here we can pass the count so from this data from this variable we can access all the methods of this state so that's what we'll do now so data dot get total items so we will get total items from the cart using this consumer so I'll just hot restart it or hot hot restarted and we can see that we are getting the standard zero so let's try to add some items here and see if the number changes so we can see the count it is um we have we can see the count is one here because we have one item in the card so now we have we'll delete this and we'll again we'll come back to our previous date so we have 0 here so now our task is whenever we click this button this number the card should get added so we are consuming a data now we have to put back data through that pipeline right so for that we will use provider and inside this button so whenever this button is pressed we'll have to send data right so we have we'll use provider dot off and we'll use generic which is which is our state uh don't get too confused with the syntax just understand the syntax as it is use the syntax as it is we'll have to pass the context and for the lesson we'll have to give it false and then from here we can pass the methods of the card state of the card class so we'll have to add item right this add item is the method of card so we'll have to pass the item here so inside this we will pass our item name as it is and that's it so whenever we press the button this value will get added to our total item list so let's see if this works so now when we are adding this button nothing changes it's it's zero uh because we are sending the data we are passing the data to the pipeline but nobody is getting back the data so for that we'll have to notify the pipeline that something has been changed so there's one keyword which we'll use here so whenever we are adding item we'll have to notify the pipeline that something is changed right so for that we'll use notify listener so whenever we are adding item we'll have to tell the pipeline that something is changed only then the consumer will consume it again so now we will see how it works so now when we add our cart some data is going through that Pipeline and we are telling the pipeline that something has been changed then this consumer against go the consumer go again from the pipeline and get the data back again so one one item I have added to the card again I'm adding some other items some other items some other item and so on so that's how we use provider to update data to to handle data for State Management uh I hope you understood this concept ah clearly so now we had one state and we are create establishing a pipeline to my app right what if so so us okay so this is another explanation uh if you have another item another class here so since we are establishing a connection between my app and this state we can use this state data in anywhere in our children class so but what if there is another class another state so what if there is another state which we have to establish a pipeline between my app and this new class because we already have one pipeline right so we know we have to establish another pipeline so what if uh we have cases like that where we have to add multiple pipelines to our my app so I'll just create another State here let's say this is wishlist dot dot so I'll just create a wish list with change Notifier and this will contain my string list just for uh example purpose so now I have another state here I I have to add a pipeline to main.dot but I already have a pipeline here right so now we'll have to do a small change to this code so now when we want to add multiple pipelines then we'll use multiple multiple provider widget and inside this we have a provider attribute so for that we will pass a list and inside list first we can pass one pipeline then we can create another pipeline of wish list and we have to close this bracket carefully so when you want multi multiple pipelines you can use multiple provider but if you have just one pipeline you can use uh one change Notifier directly it's not necessary that you have to add pipelines to my app only you have to add pipeline to uh the parent class of the UI but it is generally a good idea to add it in my app itself because you can access this state from anywhere in the project so it will work the same so there will be no change in your card State and the UI okay that was so I have covered the entire concept of Provider I'll just end it with one more tip this provider is not just for uh putting data you can consume data from this as well let's try to replace this consumer using our provider itself so I'll copy my text and instead of this data dot items what I will do is I'll use my here I will add int total items and I'll use my provider here get total items right and here you can pass total item from here so instead of consumer you can use directly provider itself to get the uh total items to to call the other functions but the only but the only difference is here we have to change false for Listen to True what it means is whenever notify listener is called if this is false this will not listen to that data but when node file is this notify listeners is called and if this is true it will this will get an alert message that something has changed run this code again so you can see that I can it works similar similar way but if I give false so if I give false when even if I add even if the if I press the button even if I add data to the state nothing is being fetched back so that's the only difference between true and false that it listens to changes in the state so I hope that I'm sure if you are a beginner this would be slightly difficult but if you practice it uh once or twice you will be able to understand uh and you will be able to manage that in a much more efficient manner and I hope this video gave you a little bit of idea and you're able to understand uh provider now uh so that was it and see you in the next video

Channel: Techness With Hussain

Views: 1,045

Keywords: Flutter provider tutorial, state management in Flutter, Flutter providers, efficient state management, Flutter app development, Flutter state management tutorial, Flutter provider package, Flutter state management example, Flutter state management using providers.

Id: lGDhFBisyD8

Length: 15min 2sec (902 seconds)

Published: Sun Jun 25 2023