Flutter State Management with Provider 5

provider is a state management package for your application so you don't have to use set state in your app to update the state for multiple widgets okay so if you go to the user list screen that i created so normally you use set state if you want to update the state of your widget so i have it in the home screen here too set state and the user list is a local state here so for the app here you can put in a name julian and a city here tokyo and then i can add some more random strings here and add then i can go to the list screen which is the same widget as you see here list and then i can delete this and go back you can see it's gone i can delete it's gone here too okay so i'm just using this user list stateless widget i'm using it in both the user list screen and the home screen okay so this is the home screen this is the user list screen and basically i'm just using a form here and i'm calling add user when i press the add button so that's creating a new user and it's adding it to the local state here with set state and the delete user function is called when i press the trash can icon here so i also created a few like customized buttons here okay and for the cheetah input that's the input for this screen here you can see the code for that and this will all be on my github so this initial code here you'll find in the github repo and that will be in the description of the video okay so now let's go to the documentation and you see provider 5 here it was just released on march 4th i'm going to talk about the most used providers which are the change notifier provider stream provider and the feature provider so back to the code the first thing i want to do is i want to create a new change notifier provider if you don't know what that is you can see here it says it listens to a change notifier which is part of the flutter package and it is exposed to its descendants and it rebuilds whenever they change notifier notify listeners is called so that's the important part here is this function here you can see here how it's done but let's go back to the code and i'm going to create a new file here i'm going to call it uh let's call it controller i like to use that for the name of my notifier folder so controller and then i'm gonna add a new file i'm gonna say user notifier notifier dart and then i'm going to create a new class so class user notifier and then i'm going to say extends change notifier so extending this class here tells the app that you might have variables here that might change and your app needs to know of those changes okay so in here i'm gonna create a few different variables i'm gonna say list user so it's gonna be a list of different users like here and for the user class we have just name city very very basic okay so i'm gonna say underscore user list equals empty list so the underscore is a private variable so let's import our user and then i'm gonna say int let's say age and i will create another end called uh let's call it height so for now i want to focus on the user list okay so now i'm going to create a new list so it's going to be unmodifiable list view so this is just a way to wrap your list view so you can't modify it directly you normally don't want to modify your state directly especially if it's a list so i'm going to say of type user and then git user list and then i will return the unmodifiable list view wrapped around the user list if you're not sure what this does you can go into the class here and you can kind of look at the the source code i'm not going to go into that right now but you can take a look here so we can save this so we have our getter for the list so down here i want to create a few different functions so i'm going to say add user and then we're going to pass in a new user so user user and then i'm going to add a new user to the list so i'm going to say user list dot add and then i would just add that user to the list so user and then to actually notify the app that it has changed i'm going to say notify listeners okay so this line here is the most important part so this combined with the change notifier is pretty powerful and you'll see how that works in a little bit so down here i'm going to create a new function say delete user and then i'm going to pass in the index that i want to delete so if i want to delete the third user in the list then i will say 0 1 2 and pass into here okay so index then i'm going to say underscore user list dot remove where i'm going to remove the user where the index is equal to the index that i pass in here so i get the user and then i will say underscore user dot name is equal to user list at that index dot name okay and this should be underscore here okay so it's saying remove where and then i'm passing in a function that returns the user where the name is equal to the name at that index so hope that makes sense so far and then i want to do a notify listeners if i [Music] listen okay while we're here i want to add some functions for the age and height so i want to increment the age and height and i will add that functionality later to the ui here but for now let's do uh increment age and then that's a pretty simple function here we'll just say age plus plus and notify listeners let's copy and paste this increment height and do underscore height okay so that's all i'm going to do for the actually i need to add the getters for this too so don't forget that also you always want to try to add getters for your change notifier variables so we will do int get age return underscore h and get height underscore height so now we need to register a change notifier with our app so that it knows that this class is notifying the app of changes so doing that is actually pretty easy we can go to our main so the first thing i want to do here in our main is i want to register or change notifier provider with the app so to do that is actually pretty easy instead of having my app here instead of run app directly we can wrap that in a multi-provider a multi-provider is a way for you to register multiple providers with your application so i would say multi provider and they can pass in your provider array here so down here i can say change notifier provider so if you want to register a change notifier like we did here then we need to actually use a change notifier provider and normally you would pass in like a context here but we could just put underscore for now because we don't really need to use it so then we're going to return a user notifier so this expects a type of change notifier that's our first provider being registered in the app so now let's actually replace our set date in our home screen with the change notifier methods okay so we want to add a user and delete a user so let's go back to our home screen so here in our home screen uh let's see down here in our add user we're calling the add user here locally and then the add user is calling userlist.ad so the first thing i want to do is i want to get rid of this user list because we already have our user list defined in our change notifier so let's get rid of this so let's get rid of this and also let's get rid of our delete user too because this is the same logic that we have in our change notifier so let's get rid of this and now to actually create a provider or a user notifier we need to create a new instance of it so let's go down here and we'll create a new user notifier here and let's call it user notifier and then to actually create it you say provider dot of so at this point you could pass in the type of change notifier so you could say user notifier so this creates a new instance of user notifier so we can just put the that here and we need to pass in our context because it expects a context to so context and i just realized that i put this in the wrong spot so we need a build of context for this right so this should not be up here in our state directly it should be inside of the build method so that's something to keep in mind whenever we use something from this provider here it will rebuild this entire widget which might not be what you want but for now let's use this so let's go down here so user notifier and instead of add user let's comment this out we will say change or user notifier dot add user and then pass in the same user here okay so we're doing the exact same thing but instead of using local state we're using our change notifier via our change notifier provider okay so here before we were passing the user list to the user list screen and the delete user method too so we're passing into the user list screen and passing into the user list widget to show here so now we can get rid of these two okay so no more passing around these variables and functions so save oops save let's go to our user list screen first and we can get rid of these too get rid of these and now since we can delete the user directly with the trashcan icon we can get rid of this set state function 2 in this entire function so let's get rid of this and then let's go to our user list down here and we no longer pass these in so let's get rid of these this two okay you can kind of already see that we are simplifying the code a lot more by not passing around all these different objects okay so let me get rid of that so first let's work on the user list screen so let's get rid of that and now this screen is okay because this only represents the entire screen not the actual list itself so back to the user list now we need to actually show the user list items here so for the text there's a couple different options so in provider three i showed you how to use the consumer widget so the consumer lets you listen for a change on a specific change notifier and it'll only update that widget that it surrounds so we can surround the text widget here with the consumer so consumer and then you tell it the type of notifier so it's a user notifier and then you pass in the widget that you want to build here so let's cut this out and for the builder it takes in the context the actual notifier itself so we could say notifier then it takes a child so we're only going to use the actual notifier so if you don't want to use these other two objects here then you can actually just put like an underscore here or not like that but here and then you could put two here so if you had a third one here it would be three but for now we have one and two okay and now we can return the widget that we want to create which is the text widget okay comma and let's see no comment here we don't need to do this anymore we can say notifier dot user list and then passing the index dot name and then we can do the same thing here use the dot city here so i kind of hope that you can see what we're doing so far i should have done this before but if you want to see how this rebuilds you can do a print statement so you can say print a user list re-building or just building okay now we need to account for the delete method here so we have our consumer here right and we're not using a uh provider like we did before on the home screen so we can either do this or we can use consumers but we've already started using the consumer here so let's continue with that so i want to wrap the icon button in the consumer now so consumer of type user nullifier and then builder we'll do the same thing here underscore notifier double underscore and then we'll return the icon button parentheses and now we want to use our delete function so we can say notifier dot delete and we pass in the index so we can just have the index and get rid of this part here okay think we have an extra parenthesis yeah okay so one more thing the users.length so this one is a bit tougher because this is not a widget so we can't just use a consumer here so i'm going to go up here and copy the nullifier here add that to the build so now we can use this user another fire object down here and say user notifier dot user list dot length okay and i hope you can see that it doesn't really make a lot of sense to use both if you don't need to but in this case we kind of need to because we're trying to use the value of the user list outside of a widget itself okay so let's run this and see if it still works so let's do further run oops let's do flutter run and while this is going i can double check a few things i can go to our user list here and we can make this a stateless widget now too so let's do that just to make things a little bit cleaner let's get rid of this you can say user list screen extends state widget and we have an error here oh yeah let's go back to our main here i think i missed something so when i move this to a multi-provider i forgot to add the my app back in so inside of here we can add the child and that'll be my app okay let's restart and let's test so put some random stuff in here and let's go to our list that works let's try to delete go back and everything works the exact same so i hope you can see the power of this already so in version 4 they added something called the read and watch functions so that's an even better way to watch and read different variables in your change notifier instead of doing this here down here i'm going to use something called watch so the syntax for this is not too difficult you just say context so we have our context from the build context up here context dot watch so i'm saying watch something from the user notifier and that something will be the user list dot length so whenever the length changes this watch will get triggered which will cause the user list to be rebuilt and our new user will be added to the list or we will delete a user from the list okay so let's rebuild or restart let's test this again so let's add user okay that looks good add now let's try to delete from here let's delete okay so let's go up here to our consumer now and instead of the consumer i want to watch for the name and the city now so in order to do that we can actually remove our consumer like so so we have our text like before and instead of this here we could say context dot watch and then of type user notifier dot user list and so on okay then we can say the same thing down here and now let's test this so you can see how using provider it just cleans things up a lot so you don't have to pass things around and you can also listen in for different changes in your provider so let's restart and let's add something here and add delete add some more let's go to our list and with the test delete okay so up here we can actually delete this now too let's go back to our user list screen that looks good back to our home screen and here we can also use the reading watch for the functions so before we were just using it for the variables but now we can say context dot read so if you want to use a function don't use watch use read first then user notifier and then dot add user and so on so remember if you want to use a function from the notifier with this syntax here use context.read not context.right okay let's save and let's go back to the user list one more time and i forgot to do it for the delete here too so let's actually get rid of this and we could say context dot read user notifier dot delete at index okay and we can do that here too oh yeah so i kept the watch here too so that's not a good thing you don't need to use both um so let's get rid of the consumer here i really like that they created these new ways to read and watch the variables watch and read just makes things so much easier to like look at and process you know i think that's all i wanted to do for the user list and the home screen that covers reading writing consumer let's reload and test to make sure and add delete add and delete okay looks good let's go back so i only talked about the change notifier provider so far but let's go look at the api file that i created here too so i created git profile username get current time get session time so i wanted to create two features with some delay to kind of mock a actual api response and a get session time stream so this stream will increment this value every second so every second it'll go from 0 1 to 3. and i want to show these values in our toolbar here like the app bar up here and i'm going to create providers to actually monitor that data so let's go to our main so that's the reason why i created a multi-provider here is because i'm going to be adding more providers to this so down here i'm going to add something called a future provider and the future provider is created the same way as a change notifier provider but you also have the initial data field here so up here when i say underscore first let's do this and then i'm going to pass in or then i'm going to return a future here so when you create a future provider the create here expects to return a feature so i'm going to return the get profile i think that's what i called it let's just copy and paste it here and then we can and then for the initial data it's just going to be zero okay and let's just go up here and import that api and cheetah api okay okay next i want to create a provider for our stream so up here i want to say stream provider so initial data is going to be zero okay so i made a mistake so i meant to put zero for the stream provider not the feature provider so that's something good to know so since this returns a feature string the initial data should be a string two so up here i'm going to say loading name so this is what you'll see when the app first loads and then after the feature completes the string from this feature will be put into whatever text that you want it to be put into okay so for the stream parader this would be zero so we'll say get session time and that should be underscore okay so now let's use both of these and see how they work so first i'll go to the home screen and in the app bar in the title first let's wrap the text in a consumer just to see how this looks of type string okay this takes in the builder so this would be the builder underscore actually this won't be the notifier this will be the string because the consumer is of type string so this would be a title let's call it and child or let's just do two underscores turn the text and this should be this okay so now we could pass in the text here the title okay so this consumer is a type string so so back in the in the main here we have one feature parader that returns of type string if we had two featured providers of type string then like say we had this and we had some other thing here some other function here if you had two different string features here and you used this syntax then whenever you received a string from a future that value would get put into this object here so this will get triggered twice and depending on the actual um the timing of it you either see the first one and then the second one or you will only see the second one so because we only have one string feature this would work as you would expect it to work okay so this title here would be the get profile username okay so we'll put that title into here and let's reload and i missed something let's go look at the error uh consumer let's go back to the main oh i deleted the feature okay so let's delete this one and let's reload okay see loading name after five seconds you'll see julian curry okay so you can kind of see how you would want to use this if you want to call some api before your app first loads or at the beginning of your app launch for example that's very handy so you might be thinking that we can use the watch here with the string value let's try it out to be sure so let's get rid of this and let's do context dot watch of type string and see if this works so because you can't do any method calls or actual like variables you could just do this and see if this works so let's reload you see loading name and julien curry so now i will show you how to use the second one here without the multi provider so let's go to the home screen and down to our single child scroll view let's see let's put it above our cheetah inputs so up here uh first let's do a size box i think height let's do the same 16 and up here i'm going to create my future provider inside of this home widget so let's do future provider initial data we will do loading time so it kind of works the same way as we did defining it in the multiplayer editor but this localizes the future provider to a single class here to your single uh widget which is our home widget so now in our create i want to call the other api method so let's do get current time okay and i am missing the input here so should be an arrow function so like this okay so that's it for the feature provider but this by itself doesn't really do much because we're not actually showing any ui so when this completes we need to say what happens after that so after it completes we can show a child widget so for this we could say text time complete save reload okay so you can see that the actual feature didn't really complete so what we can do with this is we can create a consumer around this so this will consume that time when it completes so we can say consumer string and then we have our builder you know the drill so underscore let's say time string underscore underscore okay now we'll pass in the time string here so let's see if this works so let's reload you can see loading time here after five seconds you should see the time so 2 2 am here yep i'm working pretty late but it's okay okay and let's make the text a bit bigger let's do a style a text style let's do font size something like 18. okay so that's two different ways to actually build a feature provider you can do it in the main like so and just consume it wherever you want to in the app or you can do it locally as we did in the home screen and you can consume it directly in the home screen itself so let's go back to the main and i already have my stream provided here right so let's figure out how to consume that let's go back to the home screen and up in the app bar i want to create a leading widget so leading means that it'll be before the text up here so leading and let's make it a consumer so i'm going to consume the the actual stream so let's do consume consumer and it's a type end and we will do the builder underscore uh it's not time let's do value i guess underscore underscore and we will return a text that is time dot tostring because it's an end our value it's not it's not time it's a value to string okay and the consumer so we have our build here uh let's just see how this looks so let's restart so up here you can see one two three four so every second we just increment that so that's one way to consume the string with a stream let's make this look a little bit better too so let's do a centered text so let's do center child style text style and we're going to add some size to that so font size and we'll do 18 okay that looks better and as you might expect you can use the watch if you want to so let's go delete this and let's do context dot watch int string let's reload and you can see the same behavior here and i got rid of our center here for some reason so let's do center okay so the same behavior with watch so i hope you can see here this is very interesting so you can see our user list building every time that increments so that's actually not what you want so let's go back to our consumer real quick and let's reload and now as you can see we don't get that same log here so that's something that you should be very very aware of when you're using watch in your widget that is actually rebuilding the entire widget tree or the widget itself the entire stateless widget or the entire state full widget um so like we can do a print here too so we can say print home rebuilding and then let's reload so you can see here that's not being called every time this increments so this is what you would want in your app if something is changing in your app you only want that one widget to be rebuilt i did mention this before too like consumer is what i usually prefer over the watch let's change that back to watch just to make sure that what i just said is true so let's get rid of this again and we'll do context dot watch int tap to string let's restart and yeah you can see here every single time this increments home is rebuilding user list is rebuilding that is not good so that's not what you want so that's the normal behavior that you would see with like set state too you will see the user list being rebuilt and the home being rebuilt every time you press or every time you invoke a set state so that is something to keep in mind this syntax looks a lot better it's very concise very short but it's not very efficient compared to using a consumer yeah don't forget that that's very important so um okay so let's change it back one more time okay so there's one last thing that i want to talk about so i created these two functions in the in the controller here so the increment age and increment height so i want to talk about using the selector widget so the selector is even more efficient than the consumer widget let's go back to the home screen and i want to create two more buttons here i want to create uh let's say i think down here yeah so cheetah button uh let's just copy and paste these so one and two so this one will be age and this one will be height i will use the functions that are in the change notifier so i will say context dot read and then i will say user notifier dot increment h okay so this and then i'm going to copy this here okay and then increment height okay so let's reload that does not look good so let's add some size box in here okay so now when i press these those values will get incremented we have some errors here ah okay two of these here there we go okay so now i want to create selectors so i want to select on the age in the app bar here so let's go up to the app bar and let's see below the title let's put it under here i want to add some actions so actions are widgets that will show on the right side of your title up here so leading is the left side actions are the right side and you can put like multiple widgets here too so let's do actions and then for the actions um i'm going to create a centered and we'll do child and for the child i'm going to have a selector so selectors are very powerful selectors are equivalent to the context.watch but like i said before the watch is not very efficient because it rebuilds the entire widget while selector does not do that okay so let's do selector and then you pass in first the type of user notifier and then the type that you expect to select on so we will select on the uh the age which is a int so we'll say end here and then we have a builder so the bidder will be the actual thing that you want to see the widget so like before because you do underscore and then for this we'll say age and um let's just do underscore twice and we'll return the text and we can pass in the h h.2 string actually so put some commas in here and now we need to select on that too so let's add our selector so the selector tells it what to select on because it doesn't know what this should be by default it knows that it's an end but it doesn't know which it inside of your user notifier this takes in the type of context so context or just underscore and then the actual notifier object so let's call it notifier notifier and then we return the actual value that we want to select on so i want to say notifier dot h okay so if i did notifier dot height then this value here would be the actual height not the h but i want to say h okay so this is saying when the age changes then set it to this text here if this was height then this would say when the height changes set the height to this and it only changes this text value it only rebuilds the text value if that particular value changes so dot h here again okay i think that's all we want to do for this one okay so let's restart and now when i press the height button let's see what happens nothing when i press the h button let's see and you can see that we increment it by one every time um let's go back and let's change this to height just to see if it works the same way now let's change the age first nothing and height so you can see that this selector is very powerful because it only listens for a particular field within your notifier okay so yeah i covered a lot of things i covered uh the change notifier provider i covered the future provider i covered the stream provider i covered reading and watching values using just the context i hope it kind of helps you get a firm understanding of the library i use it a lot in my apps so yeah stay tuned for the next video and happy coding bye [Music] you

Channel: The Flutter Factory

Views: 25,904

Keywords: cross-platform app tutorials, cheetah coding, Flutter Provider, Flutter state management, flutter StreamProvider, flutter FutureProvider, flutter ChangeNotifierProvider

Id: za9PwKgv58M

Length: 42min 40sec (2560 seconds)

Published: Sun Mar 14 2021