Flutter State Management with Provider
Playing
01. Flutter State Management with Provider

Episodes

0%
Your progress
  • Total: 11m
  • Played: 0m
  • Remaining: 11m
Join or sign in to track your progress

Transcript

00:00
In this snippet we're going to talk about state management in Flutter using
00:05
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
00:23
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
00:40
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
01:00
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
01:16
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
01:35
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
01:53
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
02:10
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
02:28
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
02:44
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
03:05
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
03:23
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
03:43
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
04:05
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
04:23
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
04:39
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
05:01
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
05:17
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
05:34
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
05:53
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
06:10
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
06:31
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
06:51
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
07:09
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
07:31
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
07:53
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
08:12
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
08:28
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
08:49
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
09:09
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
09:28
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
09:48
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
10:05
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
10:21
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
10:42
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
10:59
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
11:19
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

Episode summary

In this episode, we're diving into the basics of state management in Flutter apps using the Provider package. If you've never touched Provider before, don't worry—this is designed for total beginners!

We'll kick things off by creating a new Flutter project and spin up the classic counter app. Normally, this app uses setState inside a stateful widget to update the counter when you tap the button. But here, we're going to refactor it to use Provider instead, which is a more scalable solution and super useful for larger apps.

First, you'll see how to add Provider as a dependency in your pubspec.yaml and why that's necessary. Then, we'll walk through creating a simple Counter model (a class) that extends ChangeNotifier. This class stores the counter value and includes a method for incrementing it. By calling notifyListeners() inside that method, we let any listening widgets know that something has changed and it's time to rebuild.

Next, we jump into modifying the app's main function to wrap everything in a ChangeNotifierProvider so the whole app has access to our counter state. We'll also update the UI: instead of updating the counter with setState, we use a Consumer widget that only rebuilds the part of the UI that displays the counter when it changes.

We'll walk through some potential hiccups, like why calling increment directly doesn’t work as expected, and you’ll see the Provider pattern in action: pressing the button triggers the increment in the model, notifies listeners, and the consumer updates the UI.

By the end, you'll have a solid handle on the absolute essentials of state management with Provider, setting you up for more advanced state management in your future Flutter projects!

Episode discussion

No comments, yet. Be the first!