Flutter State Management: Riverpod | Provider, but different

hello everyone today we're going to take a look at riverpod we've previously looked at a couple of set state options set state and provider today we're going to look at a third option called riverpod so what is riverpod the official documentation states that riverpod can be considered a rewrite of provider to make improvements that would be otherwise impossible without going too in depth people regularly file issues or ask questions about some problems they face with provider the problem is these problems are deeply rooted in how provider works and fixing these problems is likely impossible without drastic changes to the mechanism of provider so let's take a look at riverpod in action we will be building the same app that we've built in the other state management videos at the top will be an app bar that says my favorite fruit is and then we will have three buttons that have different fruit on them if you select a button then the app bar will change to say that your favorite fruit is the fruit that is listed on the button so we're going to start with our default boilerplate which has a stateless widget with the material app scaffold into app bar in it we're going to import the material package set up main we're going to do a stateless widget here by typing stl and hitting tab [Music] putting a question mark there for null safety we'll create our material app and our scaffold and then here in that bar and then the title of the app bar will just be my favorite fruit is unknown currently all right if you run it you can see that everything looks okay so far so now we will need to install river pot so if you open up your terminal down here at the bottom you'll just type in flutter pub ad flutter riverpod once that's installed you can come over here to your pubspec yaml file and you'll see flutter river pod listed that command installs flutter river pod and runs pub git for you so now you should be able to import flutter river pod at the top we're going to add a provider scope right here we're going to wrap with a widget then we're going to start with the basic provider just to show the fruit name inside the app bar so we're going to use riverpods provider which is the most basic of all providers it's just going to expose the object and it cannot be changed now we're going to change the stateless widget here to a consumer widget [Music] and because of that we need to add one more option to the build widget and then down here in the app bar i'm going to add watch fruit name i'm going to go ahead and change this to still unknown so we can actually see it change and there it is my favorite fruit is still unknown i'll change that back now so now we're going to add three elevated buttons in the body each one will have a different fruit name on it and i'm going to use a custom button so i'll create the custom button at the bottom the custom button is going to be a stateless widget so i'll just type st less [Music] we'll have a fruit variable that will be a string so we will now receive that fruit variable and then down here we will create the elevated button and now we can add the fruit button to the body of the scaffold and there we go you see all three of the buttons so now let's try to set the fruit value to the provider in the elevated buttons on pressed you'll notice that we get an error and it says illegal assignment to a non-assignable expression that is because we used provider up here so we can fix that by changing this to a state provider then down here we're going to add dot state [Music] and down here we will also add dot state and now it should function the way it's supposed to now that is technically the basics of riverpod but i can also show you one other option that works more like the original provider and it will use notify listeners so the first thing we'll do is create a class called favorites at the bottom [Music] so favorite stores the fruit variable which is currently set to unknown and then we will call this change fruit to change the fruit variable to the new fruit name and then we will notify the listeners so we're going to convert this line right here now to a change notifier provider [Music] next in the app bar we'll look for the favorite provider and then look for that fruit variable that's stored here so we'll change this to favorite provider and change this to fruit then down here in the elevated button we're going to change this to favorite provider and this will call change fruit [Music] okay let's recap what's going on first we set up a favorite provider which is a change notifier provider that is looking at favorites then down here in the app bar we say my favorite fruit is and it's watching the fruit variable that's inside favorite provider that's down here and is currently set to unknown then it will show three buttons one that says apples one that says oranges and one that says bananas so if you choose the apples fruit button it calls the change fruit method that's inside the favorite provider and passes the name of the fruit which is apples down so it's calling change fruit right here and then it's setting fruit which is currently set to unknown to apples then it will notify its listeners which is this right here and now this will say my favorite fruit is apples let's give it a try so it still says my favorite fruit is unknown if i click apples it changes to apples if i click oranges it changes to oranges and if i click bananas it changes to bananas so as always there's more to learn about riverpod but this should give you a basic foundation to start with you may also like this video here and if you'd like to see more of my videos please consider subscribing thanks and i hope to see you in the next one you

Channel: Learn Flutter with Me

Views: 8,016

Keywords: flutter riverpod, flutter riverpod basics, flutter riverpod tutorial, flutter riverpod example, flutter riverpod state management, flutter riverpod for beginners, flutter state management

Id: d-2qZPcu6z4

Length: 8min 29sec (509 seconds)

Published: Fri May 28 2021