Flutter Provider Tutorial - Flutter Provider State Management Guide

in today's video I'm going to be showing you guys how to implement the provider State Management package within your flutter application provider is an excellent State Management packet that builds upon inherited widgets and it's an excellent choice for anybody wanting to build complex applications using flutter with complex State Management we're going to be taking a look at all of the basics when it comes to working with providers such as how to set them up how to consume them and how to update values within them and notify the listeners of these providers of the changes that happen within them well we're going to be building an application that is going to have two pages a products page and a card page and there's going to be some State that's going to be shared between them and a user who's using our application will be able to select products that they want to buy and then these products that they actually select this information will be reflected on the card page and we're going to be shown the actual products that the user has selected as well as a card total and if we go back and update our selection to be something different then if you go to card then it's going to show us the updated information to get started the first thing that we're going to be doing is taking a look at the dependencies that we're going to be using using within this project the only dependency we're going to be using is the provider package and as a side note links to all of the resources that I use within this video as well as a link to the source code can be found in the description below so feel free to take a look at it I'm going to copy the provider dependency and I will come back to my code base and then I will come to dependency section and paste this here once this is done I will let flutter pup gets do it magic and install the dependency and then I'll start giving my application a test run our application is a very Bare Bones application we just have two pages within our application both of them being stateless widgets one is the products page where I'm going to be showing the list of products and then another page which is card page where I'm going to be showing the actual contents of our cart and then finally I have a cona Dart file where I have defined a list of the actual products that are available for the user to buy and besides this there's nothing else added to the application so we're going to be implementing Provider from The Bare Bones so to get started the first thing that I want to do is just show you guys how the application looks currently so for now our application has two page the products page has an app bar which shows the title of the page as well as a link to go to the card page and on the card page there's nothing besides an app bar which shows card as well as a button to go back to our products page so let's get going the first thing that I'm going to be doing is actually showing you guys how do you define an actual change Notifier and what change notifiers are and why do we use them in the context of a provider so to get started what we can do is create a folder under lip and I'm going to call this providers and then here I'm going to create a new file and I am going to call this file cardor provider do do like so now this card provider is going to store information within it for the contents of the card and this state is going to be then shared between the products page and the card page so to get started the first thing that we're going to be learning is what a change Notifier is so I'm going to create a class first and I'm going to say that this is going to be a card provider and then I'm going to say that it's going to extend the change Notifier and the change Notifier is basically a mechanism through which a class can update its listeners on the changes that happen within this class so if the listeners of this class which could be anything and we'll talk about what listeners are later on are listening to what's going on within this class whenever something within this class changes like it's data or something like that then this class can let those listeners know that hey something within me has changed and then the listeners can do whatever they want with that information they can rebuild themselves or anything else so get let's started the first thing that I'm going to be doing is defining what the structure of my provider is going to be so this totally depends on you but since we are taking a look at the example of a cart what I'm going to be doing is creating a list which I'm going to say final I'm going to say this is going to be a list of product and you're going to say that where does this product Class come from well it comes from the con. file where I have a list of products and in that list each element is a product class instance so that's pretty much where this comes from so we are going to have a list of products and I'm going to say that this is going to be called underscore items so this is going to be a private property and I'm going to set that to be an empty list to start with and then to fix this error I will import from cons. the actual product class definition once this is done the next thing I'm going to be doing is actually defining a getter on the class which will allow me to get the items that the user has selected so I'm going to say that we will return a list of products and this is going to be a getter it's going to be items and we're going to return underscore items like so then I'm going to be adding some functions to my actual class which are going to allow me to manipulate this list or manipulate the data that's within this class or the properties of this class I should say so I'm going to say that I'm going to have a function which will return nothing it will be called add and then I'm going to say that we will get a product passed to us which I'll say item and then what we'll basically do is that we'll go to our items list and we'll add to that the item that we have like so and then once this is done since now the data within our class has changed and maybe we want to notify listeners of this class about the changes that happened within this class we are going to call a function called notify listeners and that's pretty much it then I'm also going to add the ability to remove an item so for that I'll do remove and I'll say that the same way we did before we're going to get a product item and then I'm going to do items. remove and I'm going to say that remove the following item like so and and this needs to be a DOT and then once the item has been removed I want to notify listeners so remember if you do not call notify listeners then the listeners of this class are not going to be notified and they would not react to the changes of the state within this class so it's important that you call notifi listeners if you want to actually let the listeners know that hey it's time for you guys to act upon the changes within this class for example in the case of a widget it might rebuild once this is done I'm also going to create another function it will also return aoid I'll say it's going to be called remove all and what this is going to do is that it's going to remove everything from my items list so this will be items. clear and then similarly we will do notify listeners and the final thing that I'm going to be doing is setting up a function which will return to me the total of the items that are within our card so for this I'll say that we will have a function that will return a double to us I'm going to say that it's going to be called get card total like so and once this is done I'm going to do the following I'll take the items list I will fold it so what the fold function basically does is that for each of the elements it goes through them and it combines them into a single value so for the fold I have to give it an initial value the initial value is going to be zero so our sum is going to start from zero and then after that what we'll do for each element is that we'll take the previous value and we'll add to that the item that we get so this element can be item item Dot and then we have price like so and what items. fold will eventually do is that it's going to go through all of the items within our items list and for each of them it's going to take the items price and add that to the running total that it already has and then at the end it'll return that sum to us so I'll do command save and now our card provider is set up so now that we have a change Notifier setup this exists within our application but it's just a definition for now we haven't instantiated an actual instance of this so our application doesn't have access to it so now what we're going to be doing is taking a look at another thing that actually comes from the provider packet which is a change Notifier provider and what they actually are and what they allow us to do so change notified provider as the name suggests is a class which provides an instance of a change Notifier to its children some of you might still be confused with what an actual change Notifier provider does or what does it mean that it provides an instance of a change Notifier to its children I'm going to be demonstrating this by using an image so change Notifier provider does exactly what's being shown in this image so if we wrap this change Notifier provider class on top of a widget tree which could be the complete applications widget tree or just a part of the applications widget tree then whatever is underneath of this provider will'll have access to this provider is going to be able to read from this provider and potentially is also going to be able to update values within this provider so the way this basically works is that in order to consume a provider or in order to interact with a provider the widget that's going to be interacting with the provider needs to be underneath of the provider in the widget tree so in this example you can see that we have a provider which wraps a widget this widget has multiple children underneath of it which are widgets so any widget beneath this provider is going to be able to access the value of this provider or any providers that are above it if this provider didn't exist here but actually existed underneath of this consumer let's just say then this widget this top level widget would not be able to actually access the information from the provider but in this case since our consumer here which you could think of as widgets as well exist underneath of our provider they're able to interact with the provider and read values from it so let's get back to coding now so what I want to do is that I want to share this state and allow both of my pages to have the ability to interact with the c provider so for that what I'll do is that I am going to come to my main. file and then I am going to be wrapping my my app class with an actual change Notifier provider so to do that I will refactor it and I'll say that I'm going to wbp this with a widget the widget in this case is going to be a change Notifier provider and this comes from the provider package then this change Notifier provider is going to have a child property which is going to be my app and then once this is done what I'm now going to be doing is actually telling the change Notifier provider what change Notifier is it going to be instan intiating and then providing that to its children so for that what I'll do is that I am going to say that we are going to have a create property which is a function where we get the context and then we need to Define what happens or how do we create an instance of a change notifi provider so here I'll create an instance of a card provider like so and initialize it so now our card provider is going to be available to the my app widget and anything that lives underneath of that which which in this case are our products page our cards page since they're part of the material app they're underneath of it so with this done now I've practically set up my provider so if I do command save on my application and restart my application you are going to see that nothing's broken so we can move on to the next step so now how do we interact with this provider how do we interact with this change Notifier provider well there are a couple ways of doing this and I'm going to be showing you two ways one is by using a consumer widget and then the other is by using provider. off so we're going to be taking a look at both of them so to get started let's firstly take a look at the second thing that I talked about which is how to access a provider by doing provider. off so let's get into it so I'll go to my pages and I'll come to my products page and here the first thing that I'm going to be doing is building the UI so to build the UI what I'm going to do is that I'll come to the build UI function and instead of returning an empty container I will return a list view. builder then my list f. Builder is going to require two things it requires an item count so how many items it is going to build well this is going to be the products that we get from the cona Dell and the length for them and then it's also going to expect an item Builder which is how it's going to build each of the items within this list view so for each of these items what I'll do is that I will return a list t for now like so and do command save and make sure that nothing breaks within our application once this this is done I'm going to add some properties to my list how to define what they actually are so the leading property for the list T is going to be a container and then the text is going to be product. name so to access the product what I'll do is that I will create a variable product I will call this product and this is going to be equal to the products list and then the current index like so and if we do command save now the list is being rended so now what I want to do is actually Implement a box on the trailing edge of the list view or the list TI I should say so that I can select products that I want to add to my car so to do that after the title I will say trailing property and this is going to be a checkbox but the value for this checkbox actually depends on whether we have this item within our items list in our card provider or not so how do we do this well if you want to determine the value for this checkbox we need to check is this item within the list of items within our card provider so to do that we need to read our provider so let's take a look at how do we read our provider so at the top of my build UF function I'll say that I'll Define a variable which will store a reference to my card provider it's going to be of type card provider and I'm going to say card provider like so and then to access the card Provider from the vidget 3 I'm going to do provider. off and then here I will say cart provider like so and then I will pass the context to this function like so so what provider. off is basically going to do is that it's going to go up the widget 3 and it's going to try to find a provider of type card provider and the first ever instance of this card provider that it finds that is what it's going to return to us so if you have multiple card providers for some reason within your widget tree then the first one that is it counters is going to be one that's going to be given to you so now that this is done I will take this card provider and I'll come to my checkbox so determine what the the value of the checkbox is going to be so whether it's a tick box or not a tick what we're going to do is that I'm going to do card provider do items and then from here I'm going to do do contains so if the item contains the product that we are currently looping over then the value for this is going to be true otherwise it'll be false and then once this is done I will also Define the unchanged parameter so onchanged is going to be called every time we tap on the checkbox we are going to be given a value and then we will determine what we do on changed so I'll do command save and as you can see since none of the items for now have been added to our card providers item list then none of them are checked so if I click on them right now nothing's going to happen because one we're not handling the logic of what happens when the check boox gets clicked on and also we're not adding anything to our card provider so now let's take a look at how can we fix this so what I'm going to be doing is that I'm going to saying if the value is going to be true then what I'll do is that I'm going to do card provider. add and then I'm going to pass the product like so and since within ad not only do we add the item to the to the items list but we also call the notify listeners then this is automatically going to update the state and else if this is not the case then what I'll do is that I'll take the same function but instead of doing add I'll do remove and do command save so once this is done let's give it a test run so now if I go to my products list and I click on one of these as you can see we call card provider. add it adds this product to the items list then we call notify listeners which notifies all of the listeners that are listening to this specific change Notifier about the changes that have occurred and then the widgets rebuild themselves and this is how provider Works in essence so now that this is done our products page is completely done we can select products that we want to add to our cart and once we have added these then I want to go to my cart page and actually actually see the items that I've selected and the total for them so let's work on that now so to do that firstly I'll come to my card page and I'll close down all of the other files and in my card page I'm going to be using the consumer widget to consume the provider instead of doing provider. off and this is just another way of interacting with providers so in my build UI function what I'm going to be doing is that instead of returning a container I'm going to return a consumer widget for the consumer widget we need need to Define what type of an actual provider it's going to be consuming so in this case it's going to be card provider like so so it's going to do the same thing as provider. off where it's going to go up the widget tree try to F an instance of the card provider and then make that available to its children then once this is done I'm going to Define what actually happens for this consumer but before that let's import provider so for this consumer we need to Define firstly the Builder function and the Builder function is going to take three three things it's going to take in a context it's going to provide us with the provider which we can use to interact with it and then it's going to give us an optional third parameter which I'm going to ignore by using an underscore and then this function is going to return a viget which will be rendered on the screen with the information that we access from the provider so I'm going to return a column and that's pretty much it and then I will set some children for this and do command save so the first thing that I'm going to do is that I'm going to have a sized box as the first actual child for this column so I'm come and paste that in here like so and once this is done the child for the side box is going to be a list View and specifically the Builder function like so and once this is done I will add the remaining brackets just to make sure that there's no error so for the item Builder it's going to be the same thing we're going to cut a context and an index and then we will return a list tile for each of the elements like so but our list view. Builders if you remember correctly expects an item count so this item count is actually going to come from our provider um because we are just going to be showing the items that exist within our card so for that I'm going to do provider and remember this is the provider that gets provided to us in this Builder function so provider and then it's going to automatically understand what type of Provider it's going to to be in this case it's card provider and then we can access the properties on it such as items. length and new command save and then for the list T it's going to be pretty simple all I'll do is add a title which is going to be text product. name and then the product we're going to access it the same way by creating a variable of type product and it's going to be the item at the specific index and also I'm going to import the definition for the product from con. dot so once this is done you can see that now the ACT items that we've selected and added to our cart are being shown on the card page so the last thing that I want to do is actually display the total for these actual items so to do that I'm going to add a widget after the size box which is going to be a text widget like so and this text widget is going to say car total and then a space and then a dollar sign and then what I'm going to do is actually display the actual C total so to do that I'll interpolate the value within the string by doing dollar sign and then opening up curly brackets and within this I'm going to do provider and then Dot and I'm going to call the function get card total like so and if I do command save you're going to see that the C total is now being shown to us so let's just say that I want to remove items from my cart not only from the products list by clicking on these check boxes but also from here by maybe long presses on each of these items so if I long press one of these item it removes them from the card so to do that what I can do is that on my list tile I can define a function on long press call back I can say if a list tile gets on long press then do the following do provider. remove and remove the specific product and do command save so now if I hold one of these it's going to remove them it's going to update the car toal automatically since within our remove function we call notify listeners so the UI rebuilds and if we go to our products page is going to do the same thing because the products page is also listening to the changes that are happening within our card provider it's also going to rebuild itself and show us the updated UI and with that that's pretty much for today's tutorial remember if you want to learn more about provider I'll leave links down in the description below to some good learning material which you can read to understand more about provider but this is going to be a sufficient enough starting point for you to build upon and enhance your knowledge as always if you enjoyed the video then please don't forget to leave a like on the video and subscribe to my channel channel so that you get notified every time I release a video and stay happy stay healthy keep learning keep growing and I'll see you guys in the next video bye-bye

Channel: Hussain Mustafa

Views: 449

Keywords: flutter state management, flutter provider, flutter, flutter provider state management, flutter provider tutorial, flutter provider explained, flutter provider state management tutorial, provider state management flutter, provider state management flutter example, state management flutter provider, provider flutter project, provider flutter example, flutter state management for beginners, flutter provider best practices, flutter provider for beginners, flutter provider package

Id: CvRkyxJn2Fc

Length: 21min 7sec (1267 seconds)

Published: Mon Dec 18 2023