the Dart provider package and this is a really nice easy way to get started with state. Most of the time even if you're building a large application you don't need a complex state management strategy so we're just going to focus on using provider. I'm going to assume that you've never heard of it, you've never used it

before and we're going to go and switch over the default app that we get when we create a new Flutter project which is that counter app and if you follow some other courses we have on Flutter you'll be very familiar with this. So let's go ahead and create a new Flutter project and I'm going to call this provider

counter. Like I said we're going to be using that default counter app and what we're essentially going to do is just switch this over to use state management rather than using the set state function which you may be familiar with. So let's go and just place this inside of a folder so let's go to tutorials and

Flutter and create this in here and we'll basically just wait for Flutter to create this project for us and then we'll boot up our emulator. Okay so our project is all created let's go and start this without debugging and I'm just going to use a device here which is a pixel device. Let me just bring this

over here so we can keep an eye on this. Once this is up and loaded we can start to switch things around. Okay brilliant our demo app is up and running and as you can see this is working as we would expect. Perfect. Now like I said at the moment what we're using is a stateful widget and we're using the set state

function to increment the counter variable that we have here which of course is by default zero and what that is doing is every time we call set state it's going ahead and refreshing the widgets that use this so in this case this value here is changing so of course we see the widgets refreshed and

the number incremented reading from that new incremented value. So the first thing that we're going to do is head over and install provider and then we'll look at a few things that we need to get this working. So let's come over to the installation section and grab the dependency in the current version. We're

going to come over to pubspec.yaml and we're going to come under our dependencies section, paste this in, save this and that will go ahead and automatically install that for us and once that is finished we can start looking at how this works. Now the first thing that we need is a counter model so

I'm just going to come up here and create a counter model and this is a very very simple example but this will at least get you started. Now inside of this counter model we are going to store the value of the counter so I'm just going to call this value and of course I'm going to type in this to an integer

and then we're going to create out if we come down here a function which will increment this value. So on its own this isn't going to do too much at the moment it will just simply increment that value and that is pretty much it. So with this new counter model or class that we've created this needs to be a change

notifier. Now the way that state management is going to work with provider is inside of here when we increment this we're going to notify any listeners that are listening to this particular value and then we'll implement the listeners inside of our widget so then widgets can subsequently

be refreshed. So this counter needs to extend the change notifier class so once we've done that we now have something that can notify our listeners. Now we're kind of getting ahead of ourselves now but what we can actually do is call this notify listeners method or function and that's going to notify them listeners

which I spoke about a second ago. Okay so at the moment our app has no idea what we're registering to notify our widgets inside of here so we need to make a couple of changes to our main function just here where we run our app. What we're going to implement is a change notifier provider. This is going to provide our

application with a list potentially in this case it's just going to be one thing that notifies the rest of our application and you're going to want to place this as high up as required and in most cases this will be when we run our app. So we're going to put this state listening at the very top of our

application. You don't always want to do that for larger applications that's not going to be the case but we're just looking at a very simple example for now. So instead of calling my app which is of course this stateless widget just here I'm going to get rid of this and I'm going to instead from this return a

change notifier provider and inside of here the child of this will be the app that we want to render. Now inside of this to actually give ourselves the list of items or potential list of items that we want to listen out for we are going to implement a builder. We get our context just in here but in this case

it's very very simple we just want to say well counter is something that is a change notifier and will potentially notify any listeners in our application. So that's not done much let's just give the whole app a refresh here just to make sure that we didn't break anything and you can see that this is working in

exactly the same way. Now the widget here doesn't actually have to be a stateful widget we can just use this as a stateless widget and we don't need to implement this stateful stuff. I'm not going to do that now but in future when we when you are implementing this it doesn't need to be a stateful widget in

order for this to work. Okay so let's come down to just have a look at some of this if you're not familiar with the simple app that you get when you create a new Flutter project we have our state just here and like I said earlier we're calling the set state method to get this to kind of refresh the widgets. Now we

don't need this anymore so let's get rid of the increment counter method and let's get rid of this counter variable just inside of here because we know that now the counter value is being stored inside of this counter model just here and let's just take a look at this value here we're going to kind of ignore this

now so what I'm going to do is actually hard code this into zero and we want to talk about what happens when we press this value. So in fact let's leave that for now and let's create an empty method in there so we don't want to do anything when that's pressed and let's look at the actual counter value first

of all and we're going to talk about a consumer. Now a consumer is something it's another widget where you wrap other widgets within it which will listen for particular values and then refresh just them widgets. So essentially we can wrap anything inside of a consumer this is basically just what's going to listen

out for a state change on our counter when we call that notify listeners function. So we don't need to refresh this text we just need to refresh this text here whenever that counter value changes. So I'm going to cut this out of here and I'm going to go ahead and pull in that consumer. Now it's really

important that we type in this to a counter so our application knows what we're actually listening for otherwise we could be listening to any kind of state. So let's go and inside of here pull in our builder and inside of here we get three things. We get the context, we get the counter model itself or the

counter class itself and any child elements which we don't need to discuss just here. So inside of here then we want to go ahead and return that text so let's just pull this in indent it and go ahead and give that return value and that's going to listen for any time that notify listeners function is called. What it

will then do is give us access to the entire counter so once we increment it the value will be incremented counter will have its value changed inside of there and then this consumer will pick up on any of them changes. So if we just save this out nothing's going to have changed again we can just refresh the

app just to make sure. Of course when we press this increment button now nothing's actually going to happen because we've not done anything inside of onPressed but when we do go ahead and modify that value the consumer here will be notified it knows it's listening out for a counter we'll get the counter objects

inside of here and therefore we can grab the new value. So the question now is and the last step really here is how do we increment the counter value? Well you may think well maybe we could just call counter and then the increment method let's just take a look at what happens when we do that so let's save this out

and I'm actually going to convert this over like so and let's just see what happens when we do this so I'm going to go ahead and press this and it looks like at the moment nothing is happening so the way that we do this then is we use provider we say of we tell it what we're trying to do or what model or what

class we're trying to use and then we go ahead and pass in our application context then we go ahead and call that increment method so what that's now going to do if we just save this out we're going to call the increment method over on our counter that's going to increment the value which we're reading

inside of our consumer we're going to notify listeners once we've notified our listeners we come down here the consumer will be able to render that value now I've just realized that what I did do a minute ago when I showed you how to call this by saying counter increment that wouldn't have worked anyway because I'd

hard-coded this value in here so let's just see what happens when we do say counter dot value and we'll see if we just cast that to a string or put it inside of back ticks what happens so I'm going to go ahead and click this and you can see still nothing is happening we're not seeing any errors in our debug

console but nothing is happening so just to be clear that's not going to work so let's bring back the code that we had just a minute ago save that out I'm just going to refresh the app in its entirety just to make sure it's up to date and I'm going to go ahead and click on this and sure enough you can see that every

time I increment this what is happening is exactly what we just explained so just to go over this once again at the top of our app we're saying that our change notify provider is giving us this counter so inside of this counter now we can use notify listeners once we've done something inside of here and

this could be a list of items that you want to render out in a list and this could be to add an item delete an item update an item it doesn't matter what you're doing inside of here as long as you call notify listeners anytime that you use the consumer down here that will notify you of anything that's happened

inside of the app and you'll get that model or list of models or list of things inside of here ready to go ahead and pull back the value so again what we've done here is we've used our provider using the counter to call that increment method and update it so that's just a really basic look at implementing

provider once you've nailed this very very simple implementation as you start to look more into using provider this will make total sense these are the core concepts of provider that you need to know in order to start building larger applications where you have much better state management