Flutter Provider 5 changeNotifier Example | State Management

hello fellow flutterers in the last video we worked with set state and in this video we're going to work with provider specifically the change notifier provider now the change notifier provider simply put notifies the rest of the app of changes it's that simple so like in the set state video that we did previously we're going to do a favorite fruit app the way it'll work is there'll be three buttons on the screen that have three different fruits in them and an app bar that says my favorite fruit is x when you press the button it's going to send fruit down into a custom button but we need a way to get the fruit back up to the app bar so we'll be able to accomplish that with change notifier first things first i'm going to import the flutter material package i'm going to do my typical main with a fat arrow we're going to type run app and then my app next we're going to create my app which extends a stateful widget we're going to type override and then we'll go ahead and start connecting to our state then we will create my app state which extends state my app we're gonna override again we're gonna do a build going to return a material app and a scaffold and we're going to set up an app bar with a title of text that just says my favorite fruit is unknown and running it you'll see that it worked my favorite fruit is unknown is listed in the app bar so what we want to do next is we want three elevated buttons one will say apples one will say oranges and one will say bananas just like in the set state video but to keep it clean we're going to go ahead and create a custom button for those elevated buttons so down here at the very bottom of the page we'll go ahead and create our class called fruit button it's going to extend a stateless widget we're going to set a final string of fruit we're going to look for this stateless widget to receive a fruit string we'll go ahead and type in our override we'll do widget build build context context so we're going to return an elevated button we're going to set it's unpressed to blank at the moment and it will have a child of text fruit now to call this fruit button we'll just simply go up here below app bar we'll add a body and we'll add a column in the column we'll have children and here we will just type in fruit button fruit equals apples fruit button fruit equals oranges and fruit button fruit equals bananas go ahead and give that a save and we'll see our buttons and as usual i forgot to center it so i'm gonna right mouse click do show context actions i'm gonna say wrap with center it's gonna automatically add it for me i hit save again and now it's centered okay so now as you see we've created a material app with the scaffold which has an app bar and a body in it the app bar says my favorite fruit is unknown currently now the body has three fruit buttons and the fruit button passes the name of the fruit down into the fruit button class the problem that we're running into just like in the set state video is we have to get the fruit once this button is pressed back up into the app bar so we're going to do that by using the change notifier provider so the thing that we need to do now is install provider if you're using android studio like i am you can simply go down here and click on the terminal tab and from here you can type in flutter pub add provider doing that will add provider to your pub spec yaml file and will run pub get for you so you should be ready to go at that point i do believe you can add this manually like you always have i'll add a link to more information in the description so now that we've done that we're going to go down here below the fruit button class we're going to create a new class called favorites so think of favorites like it'll be a container for all of your favorites so if you're doing a larger app you can have your favorite sport in there favorite song in there your favorite color in there but for this small app we're just going to have your favorite fruit in there so i'm going to call it favorites and it's going to extend the change notifier at the top i'm going to have string fruit equals unknown then we're going to type void change fruit with a string of a variable called new fruit when we call this change fruit we're going to change the fruit variable to new fruit and then we have to notify the listeners and what that does is simply notify the listeners which we'll show in just a second the next thing we're going to do is go ahead and import provider up here in run app where we currently just have my app i'm going to type in change notifier provider here i'm going to type create with the fat arrow and it's going to point to that favorites class that we created a few seconds ago and then this will have a child that points to my app so we've put the change notifier provider all the way at the top so it can talk down to all the different sections so now we're going to scroll down here to app bar and instead of having unknown hard-coded in there we're going to type provider of favorites context fruit this is now going to get the fruit that is stored in favorites save that and we still see my favorite fruit is unknown because that's what we have stored down here in favorites then we have one last piece to do we need to go down here into the elevated buttons on pressed and we need to call that change fruit command that we made earlier so we're going to type in provider of favorites context and we're going to set this to not listen for notifications so we'll put in there listen colon false we'll type in change fruit and then we'll set this to fruit so let's recap one last time we see an app bar that says my favorite fruit is unknown we get three buttons one says apples one says oranges one says bananas if you press the button then it goes to change fruit with the name of the fruit it sets the new name of the fruit to the name of the button and then it notifies its listeners when it notifies its listeners this up here updates to the new fruit name so let's give it a try so it currently says my favorite fruit is unknown if i press apples changes to apples if i press oranges it changes the oranges and if i press bananas it changes to bananas so this is obviously a very basic example of change notifier provider you would obviously more than likely want to use this on a much larger application in this case you would probably just use the set state method that we used in the previous video but what i wanted to show here is a much smaller implementation of it that might be easier to understand so thank you for watching please consider checking out this video or if you'd like to see more videos like this please consider subscribing and we'll see you in the next one

Channel: Learn Flutter with Me

Views: 6,664

Keywords: flutter provider 5 changenotifier example, flutter changenotifierprovider example, flutter provider 5 changenotifier tutorial, flutter provider state management, flutter provider state management tutorial, flutter provider state management example, flutter, flutter provider, flutter 2 provider 5

Id: A1qu8X7f36k

Length: 10min 15sec (615 seconds)

Published: Wed May 05 2021