Chapter 5 - Provider - Flutter State Management Course 💙

hi everyone and welcome to this chapter in this chapter we're going to be talking about the provider package as part of state management you've probably come across this name at least if you haven't used it before and in this chapter unlike the other chapters we're going to go a lot more into details about this third party package provider is not nothing that is built into flutter some people think that flutter works with provider and it's just built into flutter and that's really not the case um flutter um sorry provider is kind of like a wrapper around inherited widget and if you've followed the chapters in this course chronologically up to this point you'll have noticed that i've already talked about inherited widgets before so inherited widget will allow you to reach from the bottom of your widget tree to the top somewhere in the top it doesn't necessarily have to be the direct descendant the direct parent of that widget that we're talking about but it allows you to reach up in the tree and grab a widget or a provider so in order for a provider to work you need to work with context and as you'll soon see there are so many there are so many functions available on a provider that allow you to watch changes in your widget to read for instance or select specific changes to watch in a widget tree or if you just want to interact with your provider you can also do that with specific functions on your context so the reason i'm mentioning this right now is that it's so important to understand how build context works in flutter and how that allows you to or allows provider to give you more functionality that it could had there not been a build context in the picture this chapter is going to be a long one so it is not just going to be done in 40 minutes or 45 minutes or even an hour uh i want this chapter to go deep into provider and we're going to have a look at three complete examples of how to integrate flat provider into three separate flutter applications um for all these three applications we're going to create uh separate projects and then we're going to add functionality into these projects and there are kind of going to be real life situations that you may encounter if you want to have provider in your application so grab a cup of tea or a coffee because i think this chapter is going to be quite a long one so let's go ahead and create our first project in here i'm gonna do some reshuffling here on the screen bring up terminal and make it ginormous so we see even if you're on a mobile device let's go create the first application for or the first project in here so let's say flutter creates let's call it testing provider and we're going to call it course and then i like to add an organization here as well so we're going to let that do its work okay so after doing that i'm going to just cd into this folder and i'm going to bring up visual studio code which is the code editor that i prefer to work with almost for every thing that i do python django rust everything um except for ios development which you're supposed to use xcode for so let's in here then say select device and i'm just going to go to the main dart file in here and um we are also going to basically replace this entire thing with a simple scaffold okay so i'm not going to explain this just run up with material app and there's a home page which is stateless widget and it has a simple scaffold inside it alright just like that okay now that it's done i'm going to run this application on an iphone simulator and while that is going on we're going to go talk about the rest of the things that we need to discuss so provider as i mentioned is a third-party package and you can go and have a look at his github repositories open source of course and you i actually encourage you to have a look at the repository as well just to get acquainted with the source code and this structure a little bit as well so here's our application running it's an empty application as i said is a scaffold with an empty home page right now i'm gonna remove the widget inspector and also get rid of this debug console at the bottom of the screen okay and i'm not gonna show this simulator so much because it blocks so much of the screen real estate but we just know that it's there if we need it so as you can see at the bottom of the screen we have to go and add this third party package which is called provider and the best way to do that is just to bring up the in integrated terminal on visual studio code and just say flutter pub ad provider all right but this is going to go and grab the latest version of provider for us and it's going to bring it into our pop spec let's see hop spec yeah and if you look here you can see it is provider 602 at the moment excuse me so there we go so that's that's adding our dependency so as i mentioned in the beginning of this chapter provider along with a lot of other state management solutions in flutter and also including the built-in state management in flutter itself they work using inherited widget and i've created a chapter in this state management course dedicated to inherit widget which i really think you should go and watch and because it and there's a reason that i did that chapter before i did the provider chapter simply because understanding inherited widget and inherited model helps you a lot in understanding how provider and many other state management packages work so if you haven't done that already um you could do me a favor and go and watch the chapter about inherited widget which is in this playlist which you can find the link to the playlist at the bottom of the screen or yeah in the description description section so uh it's very important to actually understand that what we're going to do in this chapter is to create a breadcrumb application and i'll show you how that breadcrumb chrome application looks like so let me bring up the simulator uh and we call it uh this application is called testing provider so i've already provided i've already created that application which we're gonna develop and it should look like this so you can see it's a very simple application it um it allows you it has two buttons here it says add new breadcrumb and then a reset button add new breadcrumb button send you to a separate screen in which you can enter a new name so in here let's say uh phones okay phones and it then gets added here this is a separate widget which we're going to call breadcrumbs widget and then as soon as i add a new one let's say mobile you can see that the phones one is actually now an active link so and you can also add another one let's say apple okay and it adds it to the breadcrumbs as you can see as soon as we add a new breadcrumb the previous ones get kind of activated so that the user can tap on them if they want to we're not going to add a tap gesture detector to these in this chapter because that's kind of like outside the scope of this we're just rendering them but it kind of explains the logic you've probably seen breadcrumbs before breadcrumbs are really good for simply simplifying navigation in a nested views whether it's inside a website or it's in a mobile application unfortunately mobile applications don't show breadcrumbs so often and i i see that a little bit as a problem uh but that's my personal view on ios if you have deeply nested views and view controllers that you're pushing on top of each other you can always hold your finger on the on the back button and it will show you i mean this is actually a trick that not a lot of people know you can press your finger on the back button to see the um entire view hierarchy we can have a look at that by going to for instance the settings page let's go to general and then keyboard and then hardware keyboard so now we're a lot of levels deep if you hold your finger on this you will see now it's kind of like a breadcrumb so you can like jump back to the settings if you want to so that's ios's way of implementing breadcrumbs you could say but in this application we're going to do it this way so we're going to have a widget that displays the breadcrumbs and then we're going to allow the user to add new breadcrumbs upon which we make the previous breadcrumbs if any as active we'll mark them as active so that they become blue color then we will also have a reset button so tapping on the reset button is going to reset this breadcrumb as you can see in here so there's lots of moving components in here and even though this application is very simple was all but it's going to take advantage of something called a change notifier which is our provider and we're also going to create a little provider which uses a builder to take this change notifier and create a ui out of them okay i know it kind of like sounds a little bit abstract right now and but we're gonna figure it out by the end of this chapter so let's get rid of this terminal sorry the debug console at the bottom screen and start coding so i'm going to also go to the source code that i've prepared for this from before testing provider okay so what we need to do is to go ahead and create a class for this breadcrumb and this breadcrumb is going to have two properties as you'll soon see it's first gonna have like some sort of a excuse me a name and it's also going to have a variable property called is active so i mean there are different design decisions that you can make in here so you may want to have your breadcrumb as an immutable class and then you may want to for instance upon you having to activate it or making it blue you may want to create a copy of it and then put it in an array i thought that it's kind of like outside the scope of this chapter for me to go into that kind of discussion so what we're going to do is just going to create a simple class that can become active or deactivated okay so let's go ahead and just create a breadcrumb class in here so i'm going to say class breadcrumb like this okay and let's make the c capital in here as i mentioned we are going to go and add two properties in here one is is active and the other one is name so is active is in fact a um a property that can be changed so it's variable property and the name is final so you can't change the name so let's say it's a string of name all right after doing that as you can see we have these two errors that this uh one of my favorite uh extensions in visual studio code is highlighting those errors for me as likely laying them out in line and that extension is called aero lens i've explained this before in my free flutter course as well so if you want to download this air lens extension you're more welcome to do that so let's go ahead and add the um let's see the constructor in here so like that but we're going to make this and this is active and this name and let's make these required and named parameters okay like this now they're required name parameters and unfortunately we can't make this class a constant simply because we have a variable of course let's go back to the application so that it can do a hot reload okay now as i mentioned when you saw in this example let's go back in this application that we developed as you can see adding a breadcrumb by default its active state is going to be false but as soon as we add a new breadcrumb like let's actually call this one xxx or something at the end the previous one becomes active all right so we need a function that can go to that and say hey you're now active all right so let's let's implement that function so let's just say void activate and the only thing that this guy does is just says is actively called the true okay so that's it and we could also to be honest we renamed this to underscore is active kind of saying like this is a re this is we don't want you to play with it you could do that if you want to you're more welcome to do that so what we need then is since we're adding these to a list we also want to implement equality so we want to be able to tell apart different breadcrumbs okay so let's go ahead in here and just say override um override and it's a bull operator equal equal and then we're going to say covariant breadcrumb other and in here we're just going to say as long as is active is equal to other is active and name is equal to other name then we are marked as equal as well i mean to be honest with this is not the absolute best implementation of equal equal but it kind of demonstrates the purpose i would if i wanted to do this like correctly i would add the uuid package to my application i will actually create a uuid for every breadcrumb and then we could literally compare that and we could do that i mean to be honest we could add uuid right now and like fix this right now so maybe maybe let's do that i'm like going off the tangent here but let's do that let's just say um flutter actually where is it where am i here fluffer pub add uid okay so let's go ahead and do that and then i'm going to close this let's go ahead and import uuid import package view id like that and let's add a new id in here so we're going to say final string uid and in here we just say uid is const uib dot v4 so now we have a uid and then in here we can just compare that okay so let's say we say uid is other uid just like that all right and as you can see it's asking us to implement also hashcode and i can get help from visual studio code to implement that and for the hashcode i'm going to return uuid's hashcode so that's that's just going to work like butter so it just fits in okay then the last thing that we have to do in here is to calculate or performing hot load is not working because i have to switch back to that application again now hot reload is working okay now we have to calculate a little title and what this title actually means is if you look here this item let's add better breadcrumbs in here let's say mobile you can see the title of this breadcrumb at the moment is mobile so its title is its name however when i add a new breadcrumb and i say phone the title changes to mobile space and then it adds this little um greater than sign in here okay with a space after that as well so that's what we want to calculate if a breadcrumb is active we want it to have this little greater than sign space greater than sign space after it so let's go ahead and add a property in here we're seeing string get title and that is if it's active and then we say it's equal to name and then this right actually we could do it like this and we could just say it's equal to name plus if we're active then this otherwise plus empty string okay so this is a little bit more clever way of calculating that title all right great so so what are providers themselves i mean we're going to have some sort of like a state in here in our application that keeps hold of our um keeps hold of our breadcrumbs so we could have from zero to n number of breadcrumbs and providers themselves are very simple like a provider is nothing magical it is either a value notifier or a change on fire for instance so we've also talked about change notifiers and filing out fires in previous chapters so if you're creating a provider all you're basically doing is holding onto state and then notifying whoever is listening to you using for instance a change notifier that hey something changed internally go and do something about it okay so that's what we're gonna do in here we're gonna create a change notifier that manages our breadcrumbs okay so let's go ahead and start the implementation for that now what we're going to say here is say class breadcrumb provider extends change the fire okay so you can see it's very simple you just created a change notifier in here okay so and this guy is then going to hold on to a list of breadcrumb objects so we're going to add a listing here we're going to say final list and we're going to say a list of breadcrumbs and we're calling it underscore items like this okay now that we have that we are going to also create a read-only version of this items so uh you can see in here i prefixed this with underscore in here simply because we don't want the outside world to know about this or manipulate this so if you want to expose a read-only version of a list your best bet is to create something called an unmodifiable list view so let's say unmodifiable list view of breadcrumbs and we call this a getter of item is equal to unmodifiable list view of our items i think it's something like that okay like this all right so what we did in here is we created a simple uh storage which we can read from and write to and we also created a an immutable variant of the same list remember lists in either in flutter and dart actually more accurately in dart they are um there are classes classes can internally change this is unlike what you would have in rust for instance that you would have a structure and that structure can be either used immutably or immutably and then you would mark them as mut if you're mutably using it but in in darts you have a class and that class can change that's it unless you have a constant instance of that class and in this case we don't have a constant because it makes no sense to have a constant list of breadcrumbs it means it will never change but we want that list to change internally in this provider but we don't want the outside world to be able to change it and that's why we're creating this unmodifiable list view in here okay so we also need to be able to allow the outside world for instance our user interface to add new breadcrumb instances to our breadcrumb provider so we need a public function in here so let's say void add and we're going to say you add a breadcrumb in here okay just like that and in this add function when you as i mentioned when you add a new item to your breadcrumb provider you want to go through all the existing breadcrumbs in this items and activate them so let's go ahead and say for final item in items and we just say item activate all right and that activate like that and that will give it give those items that um look and feel that they will have that greater than sign as their part at part of the title when they will when we will later actually render them as part of a widget which you'll soon see how after doing that let's add this item the new one in inside items we say add breadcrumb okay and in here since we're a change notifier we have to tell our listeners capsule that something has happened internally that changed the state of our provider so that's with notify listeners right here okay and as you saw in the ui of what we're developing which looks like this there should be a reset button so pressing this reset button should remove all the breadcrumbs from these items or this item and this items properly okay let's go and add that function and that is going to be the reset function so let's go and add a function here we call it reset void um reset and we say items remove we don't have anything no we should say clear and then we say notify the source as well so this is going to notify anyone anyone who's listening to our changes and you'll soon see actually how we're going to implement that part the listening part to changes okay now that we have a breadcrumb class and we have this breadcrumb provider we need to focus on how to render the breadcrumbs we have no component at the moment that can render these breadcrumbs depending on whether they're active or not and also what their title is etc etc so let's go ahead and create a little stateless widget for that okay and after doing that we need a widget to display our breadcrumbs on the screen so if we bring back our simulator and have a look at how it looks like if i reset this and let's say item one and then we say item two then we can see that these items are rendered next to each other and if i add something that is a very long text that would wrap and then you can see oh it was exactly at the at the edge i just wanted it to go over the edge so one more item you'll see that it wraps to the next line so we're using wrap in this example the wrap widget so we need a widget that can display our breadcrumbs so let's go ahead and implement that so i'm just going to say a new stateless widget and we're going to call it breadcrumbs widget and of course in here we need to grab a an unmodifiable list of our breadcrumbs so let's go ahead and say final unmodifiable list view of bread crumb and we'll call this bread crumbs like this okay and of course we need to add this in the constructor so as i bring in the caption at the bottom of the screen so and let's make this also a required parameter in here so just like that okay so that's really good and performing hot reload is not working because we have to switch to our application okay so what we need is to actually implement our breadcrumb widgets and that's gonna be um using wrap so i'll bring this caption up here so let's go ahead in here and say we will use wrap and rap has a property called children okay so in this children what we're going to do is to grab our bread crumbs is on our unmodifiable issue of breadcrumb and we're going to map every one of these okay and let's just call the parameter bread crumb like this and we don't want an error function we want an actual function and we're going to say two lists at the end okay and in here now our responsibility is to create a widget for every breadcrumb okay so let's go ahead and just do a return text in here okay and for the text of the text widget we're going to say breadcrumb breadcrumb.title remember we implemented the title before so we don't have to do that in here and the style is going to be a text style because we want the active breadcrumbs to be blue or bluish so let's go in here and say the color is if the breadcrumb is active then let's just actually use color colors blue otherwise we're going to say color is black so we're using a ternary operator in here okay and then we have to put a semicolon in here and maybe a trailing comma there and a trailing command here as well okay so that created our breadcrumbs widget all right so what we need to do in here is to create now an instance of our provider you can see we've created the provider but no one's actually providing this to the entire application so there is a class called change notifier provider as you can see at the bottom of the screen and this change notifier provider will allow you to create an instance of a change notifier as its name indicates which in this case is our breadcrumb provider and it will be able to then provide that to its descendants as you'll soon see so what i always like to do is to actually have a look at the class hierarchy for things that i'm using so let's go ahead in here and just just provisionally just write um change notifier provider okay so i like to just go into their source code to have a look as you can see in here says this thing um needs an item that is a change notifier okay and and then it actually extends a class called listenable provider listenable provider in turn extends inherited provider and inherited provider use a single child stateless widget which i believe actually comes from another package so i think this comes from stacked or sorry it's called nested not stacked so nested is a completely separate package that we haven't really talked about yet but i believe i will actually do it in this course perhaps at the end so provider would itself brings in a dependency called nested which we don't talk about right now as i mentioned but it's just good to know that the single child stays stateless widget is inside nested package which provider then brings in as a dependency and that itself uses something called a single child widget and single child widget is also inside nested as you can see up here and that one implements widget which then in turn is is inside flutter so it is about six layers deep and i highly recommend that if you want to work with change notifier provider which we're going to do in this chapter that you actually spend a little bit of time having a look at its source code it's always good practice to do that so let's see we will as i mentioned we will talk about some of these things more a little bit more in depth later in this chapter but we can't go into all those um details to be honest with you it's always good to have a look at their documentation on source code on the side so let's go ahead now and bring this provider to our application so that our ui widgets have access to it and the way we're going to do it is to go up here in the material app and wrap our material app with our change notifier provider so i'm just going to say here wrap it with a widget and it's a change notifier provider just like that we're going to have an error we'll see soon how we're going to fix it so as you can see the error tells you that this thing in the exchange file provider class has a property has a parameter in its constructor called create and is a required parameter which we haven't provided and this create gives you a build context i believe let's have a look create it gives you a build context and expects you to return a change notifier okay so let's go ahead and say create we don't want the build context and instead we're going to create our bread crumbs breadcrumb provider i think we call it yes just like that all right so now we create the breadcrumb provider and bring it into the build context of the application from this point on so the child of this change notifier providers build contacts will have access to our breadcrumb provider in this in this manner okay as you saw in the actual example that we develop here here when we go to this thing when we press this add new breadcrumb it actually goes to a new screen so we need a new route for that okay so let's go ahead and create a little route in here and we're just gonna call it slash new so in here we're just going to say routes let's see routes just like that and this is a map of string and a material route so let's just say slash new and i'm going to bring the code a little bit higher so you can see it better and let's say we take a context and in here we just say const material for now because we don't really have any new screens we haven't developed any new screen at the moment so it's just okay to return a material of material for now okay since we've um let's go back to our application so hot reload is going to work like that since we've changed the oh i changed the language to swedish since we've changed the main function and run app and hot reload doesn't really take changes from a main function we have to do a hot restart so i'm gonna do that now hot restart okay and the application is up and running so no errors at least that's really good let's go ahead and add a column to our home page um and this column is going to be used to display our information vertically so first is going to be the breadcrumbs widget then there is going to be two buttons one the add and the other one for resets okay as we saw here so the root component here is a column so let's go ahead and to our home page and the code is right here and for the body we're just going to add a column with empty children so let's do that let's say body is a column and is children is just an empty const array for now or list all right perfect that's done so what we need then is to create a little um a call to action which is for add button as you saw in here so this is what we're trying to achieve add new breadcrumb okay let's go ahead and add that in here so remove the cons and let's say let's just say text button and it's um unpressed is empty for now and for its child we're just gonna say the const text add new uh how do we spell it bread crumb with a space okay uh add new bread crumb just like that all right and save this go back to our application now we can see that the code is sorry the button is available right there now upon pressing this button we want to send the user to that particular route so we need to develop this basically so let's say in this on press we're going to say navigator of context we're going to say push named and let's just push the slash new route in here okay just like that but pressing this will then send us to the material and unfortunately we don't have yeah actually i can swipe back so that's really good because that material doesn't have any scaffold at the moment so we also need a reset button so let's go ahead and add that and we're gonna do it after this guy so let's i'm just gonna copy this text button the way it is and i'm gonna paste it right after itself and in here i'm just gonna say reset like that okay so what we need in here now this is the first time that we're actually going to use our provider so that we're integrating with our provider up in the context change and chain and the way that is going to happen is with a function on our context called read and um so let's have a look i actually want to see if i need to explain that now or later so not to go too deep right now into how read select and watch working providers not to confuse anyone at the moment but there are various ways of actually communicating with your providers and one is using read and that's usually used uh when you want to actually communicate something to the provider so you want to say provider do this like issue an actual call on your provider for instance call the reset function or call the ad function you usually use read and i'll explain this a lot more later but usually you use read inside the callbacks for instance a callback of a text button this is a perfect example where you want to use read on your provider and we will talk then later about the rest of the property so let's go ahead in here and say context i'm going to say read and let's read our provider type in here so let's just say crumb provider something like that and then in here there is a function you see because this then returns the provider so if i say provider and you can see it says provider now is of type breadcrumb provider so this is how you get access to your provider off the ladder okay and then we're gonna issue the reset function on it because remember we actually developed this reset function in here so this is how we are communicating to the provider okay so we're using reading here um but there are many different ways of communicating with your provider and they actually affect the way that your application works and they affect the way that your widgets get rebuilt and as i say i i really really suggest that you go inside these functions and see how they work okay so if you go into read you can see that it's internal using something called provider off and then a very key parameter called listen is set to false and you may have guessed that since our provider is a change and notifier it can it can have like a stream of changes that happen over time so it doesn't necessarily as soon as one change like as soon as you add one breadcrumb to it it's not just gonna immediately say okay i'm done so it is continuously gonna evolve things are gonna change inside it things are going to mutate inside a provider and by using read you can see that provider library is saying that okay you just want to get a snapshot of that provider at this point in time and you don't want to know about any changes that might happen to it in the future okay so this in turn means that hey i just want to get get a copy of my provider do something with it and i highly suggest that you don't use read if you for instance are expecting immutable value to affect your ui so don't ever just say read something from the provider and display it in a text switch because if that value then changes inside your provider your text widget is not going to change so use read for communication one-way communication usually from your from your callbacks such as the on-press callback or for instance if you have a tap tap detector gesture detector to then communicate with your provider okay okay so um mean now we're actually going to go a little bit deeper into these things so you can see as i've mentioned here we need breadcrumbs widget using a class called consumer and i can't really explain how consumer works without going deeper into provider and this part of the chapter is going to be a lot of me just talking and telling you about how provider needs to be used and various ways of actually communicating with your provider and i i mean to be honest i really i know it's a lot of talk but it's so important it is so important to get these things um like just really down and make sure that you understand them before we continue with the rest of the chapter okay so we're gonna go in deep and talk a little bit about four things select read watch and provider off two of which which you've seen actually two of which you've seen already read and provide are off you've already seen these two so two out of four you've already seen at least and read you kind of know how it works but i'm going to go more into detail about them soon so let's talk about context select so you can see here there is a function called context select and there is really good documentation about it i'm going to actually leave the documentation there as i'm talking about it so context select allows you to watch specific changes inside your provider at the moment the provider that we've created is very simple it just has a list of breadcrumbs and it doesn't have so much logic in it it just adds stuff to it and it can reset the entire list however in a real application and in a real situation you probably have providers that are doing a lot of things they may be doing like api calls holding on to different states and depending on what's inside the breadcrumb sorry what's inside the provider and what you're interested in in specific parts of your widgets you may not want to watch changes to the entire provider you may actually be interested in watching changes to specific things inside the provider so if there are 10 things changing in the provider using select you can actually cherry pick those changes so you can say i'm only interested in aspect 1 or aspect 2. and remember this is very similar to inherited model we talked about an inherited model in one of the chapters i explained inherited model quite extensively in that chapter so if you're interested in that i actually suggest you go and watch a chapter because select is kind of working like inherited model in that case so go and watch that chapter i think it's going to be really helpful for you let's go ahead and have a look at the source code for select so uh let's go here and and you can see in here uh you can see it says first it gets the inherited element and if it can't find it there's gonna say provider null exception and in here let's see if it's not null it goes and says dependent on an inherited element so it is actually using inherited elements and let's see it does a deep collection equality so this is really cool it is really just doing like equality check between the values that were before in the in the provider and the values that it has just uh emitted so then it means that the object that you're watching the object that you're selecting inside your provider has to have proper equality implementation so it means that it's equal equal operator should be implemented properly so that provider package can understand whether the previous object that was emitted by your provider is the same as the new one or not okay so uh yeah as i mentioned context select it actually looks for specific like it looks for specific changes that you say in your in your um we'll look at the code so don't worry about it if it's a little bit abstract so it looks for specific changes that you specify in your provider and then it actually marks your widget as needing to be rebuilt so this is like the power of provider in that inside like the build function of your of your widgets you could literally say hey select this aspect of this provider and then you don't do any set state or anything if that aspect changes then your widget will be rebuilt so it is it is really really powerful um now there are some rules on how to use select and it's only useful inside the build function of your widgets changes to the selected value will mark the widget as needing to be rebuilt and by that i mean as you as you saw in here i said one of the rules for read is that it should ideally be used only inside callbacks for instance the unpressed of a text button for you to communicate with your provider select is however it kind of needs to be used inside build functions such as up here that's how i would usually use select so don't try not to use select inside callbacks like this because that's not the way to do it okay so as we talked about it as we actually looked at the source code it's doing equality check so only if the given aspect that you provide inside your select so actually look at it you may be confused about aspect in here so if we say context select and then here we say bread chrom provider this will actually be your provider in here and you may be asking like aspect one in here and this will actually give you back that aspect one and then if that aspect one changes then it will rebuild your widget and don't worry about it we'll we'll have a look at real examples soon so um when the provider emits an update in this case we have a change notifier meaning that anything that happens to this breadcrumb list when that changes like if if an add function is called or reset function is called if anything happens to this uh change notifier meaning that when we call notify listeners all selectors of the provider will actually be called okay yeah don't worry i mean i i understand and you guys you can see i've written here only if the return back is different from the previously returned value so these selectors that you provide to select are going to be called and if the previous value is different from the new value then you will get that new value and your widget will be rebuilt as you'll soon see so that's for select we've already talked about context read but i'll reiterate uh just quickly so as i've written at the bottom of the screen this is more for you to interact with your provider so whereas select is something for you to grab the values that are changing inside your provider select is more for you to say hey provider um do this or perform this operation okay so we've already looked at the source code for select but we're gonna sorry for read but let's do it one more time in here you can see that it's using provider of and it's saying okay this and then listen false all right so that's simply uh the source code and we've already already talked about it that read shouldn't really be used inside the build function and you may be saying well this read is inside a build function because well higher up there's a build function well yes of course but if you think like that almost everything in flutter is in the build function almost so um that's not the point the point is that this read shouldn't really be for instance here inside your build function so it should usually be where you want to communicate something with your uh provider and that usually is inside a callback such as an api got downloaded and you want to send something then to your provider or a button was pressed or the user tapped on an image etc so that's where you want to use read so and that's yeah you should just mainly use it inside your event handlers and read internally uses provider off as we saw the source code for it and it doesn't listen to any changes that happen to the providers it kind of gets the snapshot of your provider at that point in time now let's talk about my favorite and that is context watch and context watch allows you to watch changes and listen to changes that happens to your provider or your change and notifier basically um and value notifier of course that for that matter and whereas select allowed you to look at change specific changes inside your provider watch allows you to watch any changes that happen inside your provider so let's go ahead and add this tradition kind of let's have a look at the code for watch i'm going to put just like that and you can see inside it's literally just saying watch the provider of the current type so there's no listen or anything in here and if you go to the source code for of let's go in there and you can see that the default value for listen is true that is why i always suggest developers to go and have a look at a source code where it's available and a lot of uh frameworks unfortunately there's the possibility of having a look at a source code is not is not there because the source code may be just inside a library or something but here in flutter especially using like a package of third-party packages provider you have this ability to go into the source and have a look at how it's built so you'll learn a lot by doing that so by doing watch you're implicitly telling provider i'm listening to any changes that are happening inside this a particular provider so context watch will mark your widget as needing to be built if the provider changes whereas context select and marks your widget needing to be rebuilt if that particular change that you're looking for has actually changed since or the value has changed since last time you received that so um context watch allows you to also listen for optional providers of the change so uh that means that you you're allowed to for instance say if this kind of provider exists up the chain i'm interested in its changes so it's not going to cause any crashes in our application if that particular provider doesn't exist for instance so we've looked at the code context watch is the same as provider and and the listen property is true by default inside provider off and that's why context watch doesn't have to provide that value so as you can see uh context watch should only be used inside build functions of stateless widget and the build function of your state object for stateful widgets so it's kind of like select so don't use watch inside your callbacks don't you select inside your callbacks either in callbacks you want to use read and that's how you get a snapshot because a callback usually is kind of like synchronous and then you just want to get a snapshot just use read but in your build functions for instance here we have a stateless widget if you want this stateless widget to be rebuilt then you want to basically provide or use select or watch in those cases if you're outside the build function and you basically don't want um to use a little bit of a hack and like taking advantage of like implementation details inside provider provider developers themselves actually suggest that you use if you're outside the build function then use the provider of the function itself although watch uses provider off but it's recommended that you don't use watch outside the build function if you're doing that if you're outside the build function and you need your provider then just use provider off just to be explicit knowing saying that yeah i understand i shouldn't be using watch outside the build function okay so with all that said um we also need to talk about a little guy here called consumer so a consumer is a type of a provider and that has a build function kind of has a builder so let's have a look at that so in here let's say final consumer blah and let's go into consumer and you can see that let's have a look at the comment or the documentation for this guy because i think it's very important to read documentation as well oh my god so it says obtains provider t from its ancestors and passes its value to builder so the consumer widget doesn't do any fancy work it just calls provider off in a new widget and delegates its build implementation to the builder so that's basically the source code really you it i i advise you to have a look at how consumer really works it's so simple you can see in here as as it was suggested all it does in its uh function like the widgets i think it's a final widget function okay i actually don't understand what that is doing let's have a look um build a widget tree based on the value from provider okay and it shouldn't be null okay and then build with child inside is actually calling that builder okay right here so as you can see as the documentation is using provider off so it's really just wrapping itself around a widget of type widget here called child and making sure that a specific provider is available in that build context kind of so so as you can see consumer creates a new widget and calls the builder with its own build context it also wraps itself around the return widget from the builder so um it's really useful i mean you'll you'll actually see when we're going to use consumer it's really useful when you don't have access to a provider because it's just being created in the current context and that context which then is going to be available down the line won't have the provider so it's kind of like a situation where you're creating the provider but your widgets down the tree don't have it yet so and here's the information and if the widget returned from the builder depends on the provider before the content content context itself has access to it and don't worry i know it's a little bit um strange maybe to just think about it but i'll show you a scenario where it's actually useful okay so child at a consumer a consumer has a child with it that doesn't get rebuilt when the provider changes and this is really really important because you see in here we're giving it a child here and then the builder also returns a widget this builder guy is actually going to be called every time the provider changes its values or something internally changes in the provider however the child that is providing here won't so this is really useful if you are creating a provider that is kind of sitting really high up in the hierarchy and this provider has some very key stuff some key states that your application needs however these state changes don't necessarily have to rebuild the entire widget tree so let's say you have a hole like sidebar you have nav bars you have tab bars at the bottom of the screen you have like um buttons lying around and only like two things in your entire ui may need to change when things change in your provider you could put the entire app hierarchy almost inside the child and have that builder only build those two widgets let's say we're making things up those two widgets that actually do depend on your provider's values changing so as you can see in here inside let's have a look in here you see this builder guy actually gets past the child so you build the child and pass it to your consumer and then the consumer passes it back to you inside the builder and say hey what do you want to do with it so because otherwise if if you don't get access to that child in the builder then you can't actually build your application because the child is completely separate and how are you going to insert your ui components in that child if it's completely separate from the rest of the builder and that's why you get past the child inside the builder okay so i know it was a lot of information it was a lot of abstract information as well but with all of that said we now have enough tools in our toolkit to actually build the functionality of our application and we're going to start doing that by using a consumer if we go back here to our main dart file you'll see that we have our let's see i see actually which components we have right here you can see we have our text button and text button in here but we don't have um in any widgets that represent basically our breadcrumbs and we talked about consumer and what consumer is going to do is to provide you with uh a basically building block that will rebuild your widget whenever your um change notifier notifies the consumer that something has changed and remember the change notifier is our provider in here so we have our let's have a look at in here the breadcrumb provider and we are going to wrap this breadcrumb provider inside a consumer and for every change that happens inside the breadcrumb provider this consumer is going to call the builder function and allow us to create a new instance of our breadcrumbs widget which is stateless so the breadcrumbs widget has no way of redrawing itself at the moment okay so uh we're gonna basically uh create a consumer in here let's go ahead and do that and let's go as the first child of this column in here creates a little our consumer and it consumes our bread crumbs provider breadcrumb provider in here and we're gonna say here's the builder and the builder has a special signature let's see it looks like this and as you can see it says okay here's the builder function it has a context it has a value and the value is in fact your provider and then it has a child so if i type in here value let's see it says okay the value is in fact the breadcrumb provider and the child is this little widget which is optional as you remember or if you remember i mentioned that consumers can be provided with a child widget and this child widget will survive the rebuilds of the consumer meaning that the child widget will in fact be a widget that can withstand changes to your provider and you can use it in your view or in your with widget hierarchy and so that it doesn't get rebuilt whenever the provider changes okay so let's go in here and return our breadcrumbs widget breadth chrome's widget and it says breadcrumbs and in here we're going to say value dot items and that's like our let's see when we define our items on modifiable listview oh it's called item we perhaps have to go and rename that to items so let's go ahead and here just change it to items okay let's see if the rename is going to be successful otherwise we have to do it by hand and it's successful i'm going to put a um little comma in there okay so let's bring our simulator up and see how it actually looks like so this is our application right now i believe yes this product course so this is this is our app at the moment but there's no breadcrumbs displayed on the screen right now and that is simply because we have to develop this screen because at the moment if you remember we're pushing a material so let's go ahead and change it so that we can have a completely new scaffold in here that can push stuff to the breadcrumbs provider okay so we're gonna create it as a stateful widget so i'm gonna get rid of the simulator in there and let's go ahead and create a new stf which is stateful here and we're gonna call it um new breadcrumb widget like this okay so um this this guy what it's gonna do is gonna have a text field in there so if you go back to the completed application it's going to have it's going to look like this it has a text field so it has a tool tip or sorry a tip text in here this is enter a new breadcrumb here and it of course is also going to have a text editing controller which allows us to extract the text of the text field when you press the add button in here so it's very simple by pressing the add button we're also going to get read our provider remember we're going to say context read and then we're going to extract our provider and then we're going to invoke the add function on our provider which we've coded right here after doing the add and the screen is also going to pop back to the previous one which is our home page so that's what we're gonna do in um in this um section of the chapter so um you may be thinking okay but how is this screen how is this screen gonna get our provider since it's a completely new scaffold and it has no access to the pro provider otherwise but what you need to remember is the build context again build context in flutter is so important that i think any developer has to spend a lot of time understanding how build context actually works and why it's so important remember when we created this change notifier provider this change notifier provider at the moment is wrapping itself around the entire application meaning that the creation of this provider will actually be provided the creation of this will cause the provider to be available in all build contexts essentially in the entire application meaning that if i then push a new screen to to the user and i say here's a completely new screen has its own scaffold the build context of that scaffold will also inside the build function will have access to this provider if you just say context read or a context select or watch and so this is why build context is so important is a way for you to do dependency injection basically it's kind of invisible dependency injection in flutter so what we need is to go to our new screen and add a text editing controller because we're gonna need that in order to grab our um the text of our text field so i'm just gonna go and add that so let's say late final next editing controller and let's just call it controller with an underscore okay so inside excuse me inside init state in here we're gonna instantiate this text editing controller so i'm just gonna say init state and let's go ahead and say controller is text editing controller yeah that's that's fine and we also shouldn't forget about disposing of it when the widget gets disposed so let's just say this pose and it's going to overwrite it for me and then i'm going to say controller suppose just like that okay i'm also going to go to my notes to ensure that i haven't really missed anything in here okay so this is this pose just like that but let's go ahead in here in the build function of our new widget create a little scaffold so let's say scaffold and then we say app bar like this and this is a an app bar and it's title we're gonna say const text and in here say add new breadcrumb add new breadcrumb like that okay so i'm gonna save that and let's have a look at our application now and see how it looks like uh add a new breadcrumb oh it still doesn't work because we have to do a hot restart wrap so i'm gonna do a hot restart in here let's see if it works poof how do we do hot restart with the keyboard oh like that um oh yeah because we're still returning material so remember that we're still returning that material on top of the screen so um we we're gonna change that soon so we can't see the screen right now we just have to program it without actually seeing how it looks like okay but since the ui is very simple i don't think we actually have to look at the simulator or emulator or an actual device to see oh yeah it's working fine because it's just so simple so let's go ahead in here we have the app bar what we need is to create a simple column in here in our um in the body of our scaffold and add our text text field and also add a button okay so let's go ahead and add that right after app bar we're going to say the body is a column with children like this let's see the code really but yeah so in here we're going to add our text field in here so let's just say text field its controller is going to be our little controller here and its decoration is going to be a const input decoration okay and the input decorations hint text is we decided to say enter a new bread crumb here like that okay so that's going to be the first child of this column so it's gonna the code is gonna look like this and i'm missing a comma and here i'm gonna add that okay so that's for the text field now let's go ahead and we also need a button which is our call to action or cta as it's sometimes also called so let's go ahead and add that i'm going to add a text button in here okay and this guy needs unpressed which is a parent with a void callback basically and a child the child in here we're gonna add a simple text is gonna say const text add just like that okay so and then inside the on press then we have to actually handle the action so what is really going to happen is that we're going to use read of our context and remember read is doing a provider of and it's not listening and i mentioned that many times that read is perfect for being called inside your uh callbacks or these completion handlers or yeah void callbacks for instance in in these blocks so let's go ahead and actually do that but remember actually no we have imported providers so there's nothing to remember so let's just say read then we're gonna grab a breadcrumb provider okay and then we're just gonna say add so we actually have to create a new breadcrumb so let's say final bread crumb is equal to so let's grab our text in here final text is controller dot text and then we're going to say if text is not empty then we're going to add a breadcrumb okay so let's go in here and then we say we create a new instance of breadcrumb and is active is going to be false by default in here and its name is going to be the text okay like this and then we're adding it and we shouldn't really forget to pop out of the screen once we're done so let's say a navigator of context and then we're just gonna say pop we're not gonna give it any values to pop back okay because our application is using a provider and we don't have to pass values between screens and this is one of the beauties of using a state management system in flutter in that you don't have to pass values between screens okay so that's that's that part and what we need now is to be able to go to that screen instead of actually going to material so let's go to top of the screen in here and in the main function inside run app we are at the moment we've defined this new route in here and we're pushing material and instead what we're going to do is to actually return an instance of our new breadcrumb widget so let's just say new red chrome widget just like that is a constant oh fantastic and that was really it we're done now with this widget so we're kind of done with the entire application to be honest so there's not much more to it we're literally adding and then resetting and let's have a look at the reset actually and see if we program that so reset yes it's calling reset so um it's really time now to have a look at our application and make sure that it's working fine i'm going to do a hot restart as well to make sure that the changes to the main function are taking effect as well remember hot reload doesn't take into consideration changes to the main function so let's go ahead and add a new breadcrumb and i'm going to say one okay and you can see our breadcrumb breadcrumbs widget is rendering that and then i'm going to say two and all of a sudden that one is become active and two is added then let's say three and that's that and if we keep adding stuff in here then it's gonna wrap them to the next line so let's just add them until it goes off the screen and then it wraps to the next and um we can also test the reset and you can see recess also working fine now one of the things that you may want to extend upon in this example which is something that i'm not going to do in here is to go ahead and make those breadcrumb little widgets tappable so the way to do that would be to go to your breadcrumbs widget which you can see here and here where you create a text for every one of these breadcrumbs you would want to wrap this around with a gesture detector so let's just say gesture detector and in here on tap you would then have the ability to grab that breadcrumb which you have in here and perhaps call it a little callback you could actually expect a little call back in here for instance you could say we could say type alias or typedef sorry type f on breadcrumb tab it would be avoid function that takes in a break from just like that and then you would actually expect that and here you would you'd say on taps okay and you'd add it to your constructor add final formal fields in here and then you'd make it required okay and then the rest is history so you're just going to call this callback that you just say untapped breadcrumb and that's it really not much more to it and um so i'm not going to do that in this in this example though i just wanted to give you the idea that we can basically build build on top of this example that we built today and make it more advanced and just experiment a little bit with it experiment with a provider if you can great stuff as we usually do let's go ahead and commit and tag our code so i'm going to say git init and then get add all git commits step one okay and we're also gonna say git tag step one okay and if you look at our tags step one is there and if you look at our logs step one is there fantastic so i think i mean this example was great it showed you how to use read and it showed you how to use consumer however there is so much more into provider than just consumer and read and what we're going to do is to create now a completely new application that is in detail going to demonstrate how to use select read and watch because these are so so powerful especially select and watch in that you don't even have to wrap your objects or wrap your widgets inside any consumer you could literally say this is my normal widget and it's using um and it is for instance just using um select and that would be rebuilt if the that part particular aspect of your provider changes so there's a lot to talk about and i don't think that we can use this current example to demonstrate all of that so what we're going to do is to close this project and go ahead and create a completely new one and use that test bed to have a look at how providers select um watch and read work okay so we're gonna create a little example for this and it's going to be called details of provider so how it's going to work is i'm going to bring it here details a provider as you can see here it kind of looks like this it doesn't look at all interesting but it really demonstrates it demonstrates important concepts of the application sorry of provider so how this application at the moment is working is that it's hooked into a one provider just a provider this provider is exposing two separate properties that change over time one is something that it calls a cheap widget the other one it it's called an expensive widget so what this provider at the moment is holding on to is two date properties as you can see in here one changes every second and the other one changes every minute i believe just to demonstrate that for instance a widget that that is called cheap widget meaning that it is cheap in its creation it doesn't take so many resources it can be updated every second however a more expensive widget which for instance could be your scaffold it could be a very complex ui hierarchy it doesn't need to be updated every second or every time this particular property changes so in this guy we're using in actually both the cheap widget and expensive widget we're going to use select so we have a little provider on top and it's containing two properties one is a cheap timestamp and the other one is an expensive time stamp and these two are hooking themselves into that provider and saying that whenever this property changes using select i'm interested in redrawing myself and the expensive one is also saying yeah i'm also interested in the expensive one expensive timestamp and i'm gonna also redraw myself okay so those are due those two widgets so they're hooking themselves themselves to our provider using context.select however here we have a third widget and what this guy is doing is using watch and this guy is being updated anytime anything changes inside our provider so it's not really using a consumer as such but this these two on top are using select and this thing at the bottom is using watch and then we have two buttons in here stop as you can see the entire provider stops emitting values and then we have another one that is called start so these two buttons since there are text buttons and we talked about text buttons before in the previous example there are then communicating with our provider using read so in this example we're going to use select for those top two for the middle one with this widgets in here we're gonna use watch and for these two buttons we're gonna use read so you're gonna then get acquainted with how to use these three very important aspects of provider package in flutter using this example okay so um yeah i've talked about these already one is a cheap widget and it's using select to render a container that renders itself on a part of the provider changes the other one is more expensive it's also using select however it's watching another aspect of the provider and the third one is using watch okay and then we have the start and stop which are the two buttons so i kind of like ran ahead of myself and explain all this without actually showing the captions so let's go ahead and send this guy to the background and i'm gonna stop deep or stop running this application and close visual studio code in there and let's go ahead and see if we can bring up a terminal window and let's go to a the right project so um cd let's see if i can actually get this to work cd um i believe i have here flutter state management okay so let's go ahead and head in here and just say flutter create details of provider course and i like to add an organization in here s e pixelity okay perfect and that is going to create that project for us and let's go ahead and say cd details of provider course i'm gonna open up visual studio code in here great stuff so let's go to our main application in here main guards okay so what we're gonna do in here is um we are going to use two packages in this application and they're going to be provider of course and then we're also going to use some a package called uuid and this uuid is going to allow us to identify our provider for any widget that is consuming it so that that widget knows that something has happened in this provider okay so let's go ahead and add these one by one so what we're going to do first is to flutter pop out provider i'm going to open up terminal in here and let's just say fluffer pub add provider and then we could also say flutter pub add uuid because we need that as well so let's say flutter of add uuid both these packages are third-party packages so they're nothing that is provided by the flutter community or it's provided by for instance an official google source so just so you know so let's go ahead and create a basic scaffolding here and i have that already prepared with a snippet and i have a actual youtube video about how to create such snippets so search for that online inside my channel and you'll find that so now we have a simple material app in here with a main function and run app and a simple home page with a scaffold so let's go ahead in here and import three things we need uid provider and we also need dart async so let's say import dart async and import package and and this is going to be provider i believe and let's import also package uid just like that so now we have all three imports ready to go okay so as we talked about this before um actually i'm going to open up my details of provider in here as well project so i have it ready so you saw that we have these um cheap and expensive widgets let's go back to this example and these two are hooked into two particular objects and one is called a cheap object and the other one is called an expensive object so these objects will allow us to identify them up to hierarchy so you may be wondering like okay but how is it that we need separate objects couldn't the provider just store strings well it kind of could actually but it is a lot easier to demonstrate how select actually works if you go ahead and say that a provider contains two objects one is of type cheap object and the other one is of type expensive object and when i do select i can expect select uh function to return an instance of cheap object okay rather than having two time stamps and in both cases you're selecting only a timestamp by using its just property name and you'll soon see so it makes it a little bit more explicit in the definition or the writing of the select statement what aspect of your provider you're looking for okay so let's go ahead and we're gonna implement these objects soon actually so let's go create a base class for these two because they're very similar to each other they both have uuids and they both are to contain a um a last updated date so they have i mean up there their goal is the same they just contain a date and time stamp of type string in this case but so they don't have their own logic as such so what we're going to do is to create a base class for both of them and then we're going to extend this base class into the cheap object and the expensive object okay so let's go ahead and create this little base class in here i'm going to call it immutable as well and um actually not going to call it immutable i'm going to mark it as immutable and let's say it's called base object just like that okay so it will have a two properties one is its id just to identify it to the provider that if anything has changed in it although you could use the date and time also as an id but i kind of like as a preference to use uuid for that it's a little bit more scientific and um let's go ahead and add these two properties so one is the id and the other one is the actual timestamp okay so let's add those two properties in here i'm going to say final string and it's going to be its id and then final string last updated okay so let's create a the constructor for this for this guy create constructor like that okay and by default it really doesn't take any parameters so the constructor will create its own id and will grab the current time uh as yeah as now basically so let's go ahead in here and initialize the id and we're going to say const uid like this and v4 like that and we're also going to set the last updated to date time dot now and we're going to get the iso string just like that perfect so this creates our base objects and constructor for us okay so i mean we're going to use select so we need the identity in this object and that's i mean that's what i mentioned you could you could use last update to be honest with you but id is a little bit more like comforting because you're basically identifying this object or do you want to really identify it with last updated what if you add more properties to this object how are you gonna identify that are you gonna then take like some sort of a combination of those properties and like identify with them it's just a lot easier to use one field and that's why we're using id in this example okay since we're using select and we're looking for the id we kind of need this object to be equitable so we need this object to be able to emit true or false whether it's equal to another object or not so for that we need to implement our equal equal operator so i'm just going to go in here and say override bull operator equal equal and covariance of base object other and in here we're just going to say id is equal to other id that's it okay so that was the equality but as you can see we also have to implement hash code i'm going to get help from visual studio code to define that hash code for us at least the skeleton for it and for this i'm going to use the ids hashcode okay so very simple so now that the base object is done let's go ahead and define a class that holds on to our expensive object okay so i'm i'm going to go in here and say immutable and let's say class expensive object extends and base object okay so it's not more complex than that it's just adding a an expensive object in here and while that is going on i'm gonna actually run this application so that we don't have to wait for build later on and let it just do its work now that we've created the expensive object which holds onto an identifier and also it holds on to the last updated timestamp we need a similar one for cheap object so let's go ahead and copy this code that we've written here and instead of expensive object in here we're just going to say cheap object okay just like that okay and now that we've done that let me actually get rid of this widget inspector in here for now and i can see our application running here we have a homepage and a simple scaffold so there's not much more to it so now that we have the cheap object and the expensive object we need to work on our provider and this provider is going to have three main properties really and actually five but three main properties and these three properties are the identifier of the provider and the other two are going to be references to the cheap object and the expensive object but remember we will also have a start and stop on our provider so this start and stop function these stop start and stop functions are gonna create some sort of a stream subscription and and are gonna go into a stream of periodic and for the cheap object we're gonna kick off a stream that every second updates the cheap object and for the expensive one we're gonna kick it off so that it starts basically it kicks every once in a minute or once a minute basically so um and we want uh we want our provider to be a change notifier as i mentioned before and i've actually explained change notifier and value notifier in previous chapters in this course so if you look them up inside the playlist that is linked at the bottom of this description section and you'll know that we've talked about change notifier and value notifier quite a lot before so i'm not going to explain it but in this particular example since our provider is going to have a few properties that are changing over time we are not only holding on to one value meaning that we're not going to be a value notifier but we're also holding on to a set of changes meaning that we're going to use a change notifier so remember a provider can be a value notifier or change to fire anything that's listenable okay so let's go ahead and start writing our provider class and in here let's just go ahead and say class and object provider okay extends change notifier just like that so that's the definition of our provider so we're going to have also two streams as i mentioned one is for the cheap object and the other one is for the expensive object so these streams are going to be started inside the provider itself so we don't actually have to start them when we start the entire application because if you go back to our example that we have finished already and i'm going to kill that application and then go to details of provider you see as soon as the application runs these streams are already started so our provider is going to have these stream subscriptions and hold on to them and also start them as soon as the application starts okay so let's go ahead first and add an identifier to our provider in here so i'm going to say late string id we're going to set this identifier soon okay and we are also going to hold on to a reference to our cheap object in here so i'm just going to say late cheap object achieve object like that and we need also a stream subscription because we're going to kick up a periodic stream that changes the cheap objects so that's going to be a cheap stream sorry a stream subscription that we can close whenever the stop button is tapped so let's say stream subscription subscription cheap object stream subs something like that okay and we also need similar to these but for the expensive object so i'm just gonna copy these and say expensive object okay actually i'm running a little bit ahead of myself i've prepared like titles for these things so let's go ahead so we've created this uh achieve object stream subs in here okay so that's done we need to also hold on to the expensive object so let's go ahead and add that so i'm going to say expensive object in here and then expensive object something like that okay of course we need a stream subscription for the expensive object as well so let's say expensive object stream source okay so um since these are uh let's make this cheap budget underscore so they're private since these are private fields and we're not we don't want the outside world to be able to like really change these and we're going to create some getters for them okay so let's go ahead and say um cheap object uh get and it's called cheap object and we're just gonna expose our cheap object in here using the syntax excuse me similar to the cheap object we're gonna also expose the expensive object so it's going to be expensive expensive object in here get expensive objects and it's going to return our expensive object okay so um oh it's called expensive object like that all right so now we have our fields in here and then we also have two public getters that access those uh fields that are otherwise private okay so we need a little function that kicks off the stream so we need to start implementing this um start function so let's go ahead and do that so i'm gonna create avoid starting here and in the start what we're going to do is to first create two streams okay let's say and the cheap object subscription stream subs is equal to a stream and we're going to say periodic and remember the cheap object needs to change every second so the period is a constant duration of seconds one okay like that so that's the first uh parameter and that's the periodic one so we're not gonna do anything in there but what we're gonna do is as you can see we're getting an error saying that seconds is not defined oh here the value of stream dynamic can't be assigned to the stream subscription because we're not actually subscribing to the stream we're just creating it so let's just subscribe to it let's just say uh i'm gonna put a comma in there and then we're gonna say listen okay and then we get the events in there we're pretty much going to ignore the events let's just ignore the event right there and inside the listener in here we're going to assign a new instance of our cheap object to the cheap object property so every second we'll replacing this cheap object with a new one so this could be similar to you for instance making an api call or something and storing the result inside the property inside your provider so it's not any different i'm just trying to demonstrate how changing things inside a provider will then be able to propagate down to your widget tree or your elementary after we do that we're also it's your responsibility to notify anyone who's listening to your change notifier to notify anybody who's listening to your provider so you have to call notify listeners okay and similar to this we're gonna get the expensive and here we're going to say duration is going to be let's just say every 10 seconds so we don't have to wait a whole minute okay so in here we're gonna replace the expensive object with an instance of expensive object like that all right and of course we're also going to notify our listeners so that's pretty much it that's really it for the start function there's not much more code to it however after doing the start we also need to work on stop so we have the stream subscriptions let's go and create a void stop in here and inside stop all we're going to do is to cancel our stream subscription so let's say stream sucks for the cheap one and we're going to cancel it and for the expensive expensive stream subs to cancel that as well so these are going to be the two functions that our buttons are going to call and interact with our provider in that way okay excuse me so we also need to have a little constructor for our um for our provider because there are a few properties in here that we said that are late as you can see in here like this one we're gonna ignore for now this one we're gonna ignore for now and actually not for now these are gonna be ignored because these are gonna be created inside the start um inside the start function i don't know why stops are so long so let's go ahead and create the constructor for this class so let's go ahead and say object provider this is our constructor the id is going to be a const uid and we're going to get the v4 in here and let's go ahead then and say that our cheap object we initialize it to a cheap object instance in here okay and then we're also going to say the expensive object is an instance of x pin if if i can spell object just like that so now we have the constructor for our object provider as well so perfect so what we need to do is to actually do something tricky in here you see in this example in this particular example let's go ahead and have a look in here in the simulator in here you could see that this guy is using watch is watching the provider okay now how should this guy know that the provider actually has changed how should watch know that this is not the same provider as it was before what we're going to do is anytime this notify listeners function is called we're going to reset this id to a new id so this object provider is actually changing its identifier every time something has to be notified so every time this notify listeners function gets called we're going to reset the id of our provider so that watch later on can know that hey the provider actually changed its identifier has changed okay so let's go ahead and override this notify listeners function in here let's go ahead and see if visual studio code can help us notify listeners and it can't so let's say override avoid notify with spinners like this and in here inside notify listeners we're gonna say say id is const uid v4 just like that and then we're going to call super notify listener so this is a little trick that i like to use in my providers if i need to actually update something fundamental with the provider itself and before before super notify listener is called okay so now that we've created our provider i mean the provider itself is completely done i'm gonna actually do a hot restart in here uh let's see if we can go back to our application hot restart kicked in what we're gonna do is uh to do something basically pretty much the same thing that we did in the beginning of this chapter to change our main function in here so that we can create our provider okay so we're going go and say we have a change notifier provider instead of the material app in here or not instead of actually as a wrapper around it so let's wrap the material up with change notifier provider in here and then we of course have to implement the create function we ignore the context we don't need it and in here we create an instance of our uh object provider so we're gonna say cons actually it's not a cons so let's say object provider like that okay so remember changes to the main functions aren't and main function aren't going to be affected by uh actually hot reload is not going to take changes from your main function into your app bundle so what we have to do is to do a hot restart for these changes to take effect okay all right so what we're going to do now is to go ahead and develop these two widgets one is going to be called a cheap widget and the other one is going to be an expensive widget okay there are actually two separate widgets but they they work exactly like it's just to it's just to have these different colors basically i just want to make it very explicit that these two could be inside your application completely different widgets even though in this particular example they're almost the same widget okay so in our application you could just say yeah you could just pass a background color to that widget i know that but i just want to make sure that we are being very explicit about that these two widgets could potentially be completely different from each other okay so we're gonna go ahead and create this expensive widget first so i'm gonna go at the bottom in here and let's go ahead and let me see if i can also find my notes in here okay so let's go ahead and start creating the extensive widget and this guy is going to be a stateless widget so let's say stl for stateless and let's call it expensive widgets okay so perfect um so you may be thinking okay in this constructor we kind of have to have a provider but we don't um because this extensive widget is going to be inserted inside a widget hierarchy whose build context already has access to that provider so if we just use this build context that provider is going to be able to be looked up the widget hierarchy to be able to be found using select read or watch or just provide or off so oops so you don't have to worry about that so let's go ahead and start implementing this guy so inside of the build function we're gonna get reference to our expensive object okay so let's go ahead and do that in here this is the first time we're actually gonna use select so it's gonna be exciting let's say we get our final and sorry our expensive object sensitive object is equal to context now we're going to use select because you see in this expensive widget we're only interested in changes in the provider that affect the expensive object okay inside select you have to provide two parameters one is the provider type so you we're gonna say object provider and then the aspect of that provider that you're actually selecting okay so we are expecting to select expensive object and then in in this function you will you will have access to your provider so in here let's say then we get a provider and in here you want providers uh expensive object just like that okay i'm gonna put a comma in there so maybe it's a little bit more readable for you as well let me go back to our application so that hot reload works okay so this is the syntax for select if you go to the function definition for the select you'll see that it says t and r and it requires r to be returned you see in here and that's what we're doing we're returning r which is expensive object we're actually returning and it says okay then i will give you t if you say t what is t in this case it is this first parameter object provider says this provider is object provider so if you change something else to say like this is a string then okay it thinks this provider is a string okay but it's not a string in our case of course so so now that we have that we're watching or selecting actually our expensive object and only if it changes we're going to get notified about that and you actually before i go forward and move forward with this i said only if it changes what does that even mean well remember expensive object and cheap object they both come from base object and base object has an equality definition remember this guy every time expensive object gets replaced or cheap object gets replaces id changes and select internally as we saw earlier in this chapter is going to do a comparison it's going to say is the previous object the same as the new one if yes no change happen if it's equal equality is the key in here okay so select depends on this equality so it's very important that you actually implement equality for your objects correctly and with that also the hash code okay so now now that we've done that here is a expensive object we got a hold of that and what we're going to do is to just create a little container here with the height of 100 so let's say the height is 100 okay and it's color is going to be um because we're developing expensive object expensive widget if you remember expensive widget was this one which is blue so let's give it a color and we're going to say colors blue okay and it's children are very simple it's just it's just three text widgets if you look here it says the first one says expensive widget the second one says last updated and the third one is actually the timestamp that comes from this expensive object okay so let's go ahead inside the container say it has a child and with a column and its children are these and the first one is a const text we're going to call it expensive widget the second one is going to be last updated so i'm going to copy this guy and i'm going to say last updated something like this okay and then the third one is going to be a text of our expensive objects last updated okay last updated perfect so that's our expensive widget okay i think i'm missing some commas in here perfect like that so here's the container it's not more difficult than that to be honest okay so that was for our expensive widgets uh it's time to implement the cheap widget and this is the cheap widget to be honest with you is going to be very very similar to um sorry about that i think i went to do not disturb me somehow and disable it i don't know how but this this is going to be very similar to our expensive widget it's actually identical so it's just gonna have some um difference a few differences so let's just develop this by hand so you'll see the differences so stl and we're gonna say cheap widget okay and this guy just like the previous one we have no constructors because yeah we're gonna get grab ahold of our provider using select and we're gonna get a reference to our cheap object in this case so let's let's go ahead and um actually let me go to my cheap widget here let's go ahead and copy this code from expensive widget and bring it in here in the build function of the cheap widgets and in here change this to say we're looking for cheap object in the object provider but the object itself is called cheap object you see how now it's becoming a little bit more explicit we're looking for a specifically cheap object and here the compiler is helping us saying that oh but this is not that so if you'd use string as last updated you could miss things like this so easily because if you just set string in here and you use like instead of the cheap cheap objects last updated you use the expensive objects last updated you wouldn't get any errors because string is a string okay but in here we're explicitly saying that the cheap object should be of type cheap object okay so just to explain a little bit more why we've developed two separate objects for these okay and in here we say we're expecting cheap objects to be returned okay so this is going to be very similar to the expensive widgets container so i'm going to copy that container from expensive widget and just bring it in here okay so instead of expensive widget we're going to say cheap with it last updated it's going to stay the same and in here we're going to say uh cheap uh objects objects last updated okay so in that case i mean in this particular scenario cheap widget and expensive which is they're very similar except for what they're uh probing from the uh provider which in the cheap cheap widgets case is cheap object and inexpensive widgets case of expensive object okay great stuff so um we can't now just go ahead and say we're done because we have a third widget that we have to implement and that is if you go back to this example in here it's this one that gets re-rendered anytime anything changes in our provider and it's mostly interested in its id so it's watching that property okay so we're going to go ahead and implement this widget which we're calling object provider widgets so let's see if i can find that in my notes as well the object provider widgets object provider widgets great okay so let's go ahead and start implementing this object provider widget so it's a stateless widget as well so stl uh object provider widget and remember this is not going to use select this guy is going to use watch it's going to watch the entire uh provider anything that changes inside the provider this guy is going to re-render itself so it's going to re-render itself when the one second stream uh subscription fires and it's gonna render itself whenever the id changes it's gonna re-render itself whenever the 10 second or the expensive uh stream subscription also fires so any changes that happen to the provider are gonna trigger this guy to re-render itself okay so in the build function of this guy we're gonna watch the entire provider so let's go ahead in here and say final a provider is watch okay and you'll see watch has a t in here it says okay what provider do you want me to watch and i'm gonna say in here object provider okay and that's it and now this provider is your entire object provider as you can see in here okay so what we're going to do here is to create the container so let's go ahead and say return container its height is also going to be 100 so height 100 and it's very similar to these expenses and cheap widgets so i'm going to copy that code in here and paste it right there height is 100 the color is going to be purple so let's say colors.purple okay and in here we're going to say object provider provider widgets and it has last updated in this case we're going to say id and we're going to say provider dot id okay so that's how we're going to render this particular component on the screen okay it's time to wrap it up so we have to put all of this together we have now three separate widgets we have the provider and we which is a change notifier we built and we basically hooked it to our material app in the main function we've done a lot but we have to actually put it together and see some stuff on the screen because at the moment our screen is completely white okay so what we're going to do is to render three rows in here as you'll see this is how the application should look like this is the first row this is the second row and it's the third row okay so let's go ahead and create these rows so let's go ahead in our home page i'm going to find the home page in here and i'm going to find also in my notes so that i don't miss giving you some important information let's see home page okay so let's go ahead right after app bar inside body and say the the body of the scaffold is actually a column so that it renders its children vertically on the screen the first one is a row with children again okay and in here we're gonna render our uh cheap i think a cheap widget and our expensive okay so we're gonna just add our um cheap and expensive widgets in here so let's go ahead say children are const in the first row and it's the cheap widget like that and we're also going to have um expensive video but we can't just put them in here because they don't have intrinsic widths and we just added heights for these containers so in this guy inside row for its children what we're going to do is to say this is expanded child is the cheap widget okay because expanded is having a flex of one by default and then make sure that if you have two expanded next to each other in the same row they're gonna take in the entire available width of the screen but they're gonna divide it between themselves equally okay so let's go ahead and then add the expensive widget in here as well okay so if i then save this guy let's go back to our application and you can already see these rendering here i'm going to hot restart the application okay so these are for expanded so maybe i actually remove these for now so that they look a little bit nicer and let's go i can see our both of these guys at the moment have the same um they have the same color okay and they're not updating we will fix that soon they have the same color but we saw that the cheap one has to be yellow so let's go ahead in here say yellow and we also need to now go to our provider and in here when we start the provider okay we also have to kick off the entire process so inside our constructor we're going to start these streams so let's go in here and say start okay i'm going to save this guy go back to our application and do a hot restart and now you'll see that our cheap widget is updating every second and if we wait a little bit in here you'll see that the expensive widget is also going to update once that 10 second has passed as you just saw okay so let's go now to the second row of our home page the first row is done we've added the cheap widget and the expensive widgets so we need to now go ahead and program the rest so in the second row we're just gonna have one expanded widget and that's gonna be our object provider widget so let's go ahead and add that bro children like this it's gonna be a const okay and we're gonna just say expand it expand it if i can spell its child is going to be our object provider widget which provider widget which is going to change any time it's going to be re-rendered anytime anything changes inside the provider as you can see here so what we're going to do now is to go ahead and add our third row in here and the third row is going to be our um buttons okay so we're we're gonna code that third row now so let's go ahead and say this is a row it has children of course that's why we use rows children okay versions of children can't be constants because the text buttons aren't constants okay so let's go in here then and let's say the first one is going to be a text button if you remember i think it was a start button or stop button as you can see in here so let's go ahead and add a text button in here and say text button and the text button needs an unpressed and it also needs a child so it's going to be a cons text stop like that and since we have the text button for stop i'm going to copy that and go actually let's code it entirely and then we're going to copy paste it for stop as well okay so in here we need to communicate to our provider and invoke the stop function on it remember inside callbacks such as this on press callback of a text button the right way of communicating with your provider is not through watch it's not through provider off it's not through um select it's through read okay so you need to say context read object provider and in here then you could just say stop all right and that we have that i'm going to copy paste the code for the stop button and i'm going to say start in here and instead of stop i want to call a start function on our provider so now it's demo time really let's have a look at this demo of our application and see how it's looking i'm going to hot restart the application so we can see in here the object provider widget is watching changes to the entire provider anything that happens in the provider we're going to get notified about that and that's why we're seeing it re-construct itself every time we call notify listeners because the id is changing as well okay here the cheap widget is being updated every second and that's simply because the it's basically selecting the cheap object aspect of our objects provider and the expensive widget is doing something similar but it's only selecting the expensive object aspect of our object provider and it's updating itself every 10 seconds okay and that's all hooked to that stream subscription that we talked about earlier then in the third row we have this stop and start buttons and pressing stop stops the entire provider subscriptions as you saw it's canceling those uh stream subscriptions and pressing start is going to then resume emitting values for our streams okay so great stuff we're done with this example well done let's go ahead as is tradition we're going to commit our code and tag it as well so let's say it init did add all oops gets add a hit commit and we're going to say step one and we're also going to tag it at step one okay it's always good to like commit and tag your codes even if it's local so you can always go back to preview previous steps that you've taken and kind of like to learn from it or understand how the program has really evolved i mean i do it all the time even if i have like local projects that i'm working with i always make a little git repository there the cost is very low it's it's nothing that you have to worry about in terms of bytes consumed on your disk so great stuff we talked a lot about provider up to this point we've talked almost two hours about provider but there is a third type of provider which we need to talk about before we close off this section or this chapter about providers because otherwise it won't be complete so the third type of providers is something called a multi-provider you see at the moment what we've done is that we've gone to the main function of our application and we created a change notifier provider well you'd be like okay but in a big application i don't want to have one provider holding the entire state of the application and you would be right you wouldn't do that in a production application so if you have many things that are happening in the background like api calls being made a button is pressed you're changing the theme of the application or whatever these things need to probably go into their own providers and the way to inject these providers like multiple ones not just single one into the build context is to use something called a multi-provider and that's what we're gonna do in this chapter as you can see it allows you to propagate multiple changes down in the widget hierarchy okay so we need a new project i'm not going to change the project that we've created just so that we can demonstrate how multi-provider works so let's go ahead since creating projects is also very cheap let's go ahead and create a new one so i'm gonna stop this project and close it and i'm gonna send this application to the background let me see if i can bring up our terminal and let's go ahead and cd into that folder again in here and we're going to create a new application so what i'm going to do in here before we do that i'm going to show you actually how this application will look like uh i think it's called multi-provider here i'll open it up for you and as you can see in here let's see if uh it's at the moment not really emitting any values and that's probably because i've like haven't really run the application but let me see if i can grab a hold of our multi-provider app and run it in the simulator so we can have a look at how it really looks like in the simulator okay so it's running the xcode build at the moment i can see but what it's really doing is that we have oh it's running okay so you can see in here it's very similar to what we've done before but what it is doing really is it it's not just a provider that has two properties this in fact is a multi-provider that is holding on to two separate providers of type stream provider so these stream providers are each of which like uh emitting new values the first one is emitting values every one second and this one's in between values every 60 seconds and remember although you'd be like you'd be like oh but this is what we've already done this no we haven't really what we've done in the beginning of this chapter was to create one provider that holds on to two values each of which changes over time in this example what we're going to do is to have two providers oh two providers and those providers are each of which holding on to one value and we're gonna bring them together using something called a multi-provider which is available in the provider package and then we're gonna create the widgets for them okay so similar looking but very differently constructed okay so let's go ahead and create the project in here so i'm gonna and in here just say flutter create a multi-provider example course and i like to set the organization as i mentioned before se pixelity like that this is going to create the project for us so let's say multi course and open up visual studio code right there and since visual studio code has a built-in terminal we don't have to have this terminal window open so i'm just gonna open that up in here okay so let's go to the main guard file in here and i'm gonna delete all of this and just create a simple scaffold as i've mentioned many times before it's a very simple scaffold with a home page and just say scaffold with an app bar in here okay so what we need is just a simple function in here that gets the current time for us okay so let's go ahead and define this little little guy here we're going to say it returns a string it's called now and it says date time now and then we're gonna get the iso string from so this little function is gonna give us the current date and time okay so uh what we need then is to have um what we're gonna do is to have two classes in here one is called seconds the other one's called minutes and they're gonna hold on to this string value okay so let's go ahead and define the seconds class in here so it's an immutable class mutual okay and it's called class seconds and let's go ahead in here and say final string value and it's in its constructor seconds like this here uh we're gonna hold on to that value so we're gonna say seconds and then we're gonna say value is equal to now something like that okay we also need to define another class for minutes so i'm going to copy paste this code right there and that we call this 10 minutes let me see where did i jump i don't even know where i jumped minutes and let's change this constructor also to say it's minutes okay so what we need now is uh because we're using two streams in here what we need is to have a reusable stream that we can just give it a duration and it will just create a periodic stream for us okay because if you remember these two these two and they're consuming a stream they're using something called a stream provider and then we're putting these two two streams i don't know why i'm showing four and mirroring my hand but we're putting these two stream providers inside a multi-provider in order to render this very simple ui okay so let's say a stream of string and we're going to say new stream and then we're going to say duration duration and this guy just returns a stream if i can spell periodic with the duration and um in here when we get the value we're just gonna say we return now from here and it returns a string so you can see it basically creates for that given duration it every time the duration elapses then we're returning the value of now okay so what we need in here is to have a widget that can return that can render the seconds value okay so we're going to call it a seconds widget so let's go ahead and do that so um i mean again this the reason i'm creating separate classes for these things is that because in this in this um multi-provider your multi-provider is going to hold on to both of its providers in this case one is like a minutes provider the other one is a seconds provider and if they both emit strings somehow you need to be able to extract these strings and determine somewhere which one is in minutes which one is a second so it's always better to wrap them inside classes using which you can actually watch those values of those types easily with watch or select inside your provider or inside your build function so let's go ahead and define a seconds widget which is going to render this bad guy here okay so let's go and say stl and we're gonna call it seconds widget just like that and then we're gonna go inside it's build function i'll bring up the note in here we're gonna use watch to watch any changes that happens to seconds value okay so let's say uh final and seconds is context.watch uh context dot watch and let's in here then say we are watching seconds okay the method watch isn't defined for type uh context come oh because we haven't oh yeah well we don't have provider so we have to import uh an ad provider extension so uh i don't know how we missed that let's go into terminal here and say pub flutter hub add provider okay that's very important and then we're gonna go ahead and import it as well so let's see if visual studio code can help us and auto import providers so if i say watch it doesn't let's go in here and say import package uh provider provider and in the build context of our seconds which is we're gonna say watch now we have access to watch and we're gonna say we're watching any any value as of type seconds okay so in here we're gonna just create a very simple uh expanded with a container because if you look how it looks like uh it should expand like to maybe half of the screen or to the available uh portion of the screen and if you put two of them together with a flex of one they're gonna take half of the screen width okay so let's say expanded and this is very similar to what we did in the previous example so not much explanation is needed so for the child we're going to create a container okay and the container for the second widget is going to be yellow and so let's say color color is yellow it has a height of 100 i believe okay and his child is going to be a text of seconds value remember seconds class it had a value here so we're just rendering it inside a text okay so like that and that's perfect and a comma here is to get the formatting correct okay so we're gonna go ahead and define the minutes widget so what i'm gonna do is literally copy this seconds widget and bring it here right after minutes and paste it in here okay so that's that so for the build function of this minutes widget uh let's copy it here we're not gonna watch seconds anymore but we're actually gonna watch minutes so i'm gonna say minutes in here and then minutes in here okay so we're interested in any value of type minutes up the hierarchy in the build context in any provider available to our build contacts okay so we're going to use a multi-provider in here to in inside the build function of our home page so um we're going to go ahead as the body of our scaffold we're going to say multi provider just close it like that you're getting an error but that's okay okay so that's adding multi provider as the body of our home page so um what we're going to do in here then is to create our providers so multi-provider as you can see in here requires a provider's um parameter so it you could it's a list of providers you'll see some here you see so in this providers we're going to actually let me i don't want to jump over this it's quite important let's go to providers you can see it says single child widget it's a list of single child widgets so if i say single child widgets let's go ahead into the source code let's say let me see if i can go into the source code for this single child did i write it correctly single child widget package provider single child widget but we already have that uh late single child with it it doesn't really let me go and have a look at that for some reason single child widget let's go into this multi-providers providers and in here this is this is what i want you can see it's an abstract class called single child widget and you can see that it's inside nested and i mentioned in the beginning of this chapter that nested is a package that a provider brings with itself into your projects and this single child widget is something that um your provider is using quite a lot actually you can see let's see class multi-provider extends nested so provider internally is using nested quite a lot and i think i will talk about nested in this course not in this chapter uh but i think nested is quite an important one to talk about because providers kind of like based on top of nested a little bit so but what we're going to do in here we're just going to ignore all the business about nested and just go ahead and bring our providers into the array of providers mentioned here okay so we're going to create a stream provider so let's say stream provider which is a type of provider available in the provider package and we're going to say value and let's go ahead and put a comma in there and the value in here is going to be that periodic stream for us okay so uh what we're gonna do in here actually maybe we don't need that stream thing that we created up there so yeah i think we probably don't need this new stream guy i don't think i'm using it here either new stream unfortunately so let's remove this guy we don't need it okay so let's just create our streams like normal person so let's go ahead in here and create a little stream in here so this value is your stream okay and let's go ahead and create it in here so we're going to say a stream that provides seconds it's periodic it's a duration it's a constant duration of um seconds one and every time it gets a value it just returns the value of now okay which is a function just like that all right i think i really think that's that's it actually no we're not returning now we're creating seconds like that okay but that's that's the creation of our stream so let's see how it looks like the value is that string it provides a seconds instance every second and its initial value is just going to be seconds so a new instance of seconds so we have something to start with okay so that's that um and then what we're going to do in here is to create something similar to the stream provider but we're going to do it for minutes so let's go ahead and do that i'm going to copy this code here and i'm going to go and paste it right after that and in here same minutes and and in here we're just saying minutes one and we emit minutes and we emit minutes in here as well okay so now you'd be wondering okay so now that this thing is in place actually to me um let me do select and run the application as well while we're waiting we could implement the rest of this you may be wondering now okay now we have the providers in this multi-provider but where are the widgets no none of these is like actually emitting any widget and the way to do that is to is to go to your multi-provider it has a property in here it's called child okay so this child is then going to have access to the various providers that you create inside your multi provider okay i can see our applications running now i'm going to close the widget inspector so we have some more space like that and um builder yeah you can see we don't have a child we're getting an error so right after the array of providers we're gonna go and add a column and a row for our multi-provider in here so let's go ahead and say the child has a column with children and the first child and the only child is actually a row with children of const npra for now okay just like that so in here we're then going to create our widgets so very simple we're going to say seconds widget and we're going to say minutes i mean it's widgets like that i'm gonna save the app let's go here i think both are yellow so the second one should be yellow and the minutes one should be blue so that's a problem with copy pasting so let's say blue here and i mean we probably are not going to wait like a whole minute for that one to fire what we could do though is to go to our minutes widget and kind of like fake that in the stream itself inside seconds instead so let's say every five seconds it changes itself so let's see let's see now if this changes every five second there we go so it works it's just one minute it's quite a long time to wait for it to fire itself okay so that was a lot of information i know we talked a lot about provider i think this video is now more than two hours and it's like two hours and maybe 20 minutes is going to be but i think it's worth it it's a provider such an important thing in flutter that is such an important package in florida i think it's worth spending time learning how it actually works so we talked about uh change notifier value notifier we've talked about uh providers and we've talked about stream providers we've talked about multiple uh like multi as you can see in here we talked about multi-provider we've talked about select watch provider of we've also talked about and read how to interact with your provider so this is all great stuff but we shouldn't forget that we let's just save so no errors we shouldn't forget that we always commit our code so let's say git init and i'm going to say git at all and then let's say git commit step one in here okay and we're gonna say then git tag step one as well so that's for tagging and committing our code sometimes i kind of run ahead of myself and start explaining things before i brought up the caption for it and so sorry about that so as i mentioned we've learned a lot about providers we put them into practice we created two applications that kind of like very simple applications but they explain the behavior of provider package and um i mean i wouldn't be able to write three complete applications otherwise this um this video will be more than 20 hours long so i know that because doing one application in my free flight of course entire application took about 36 hours so by the way you're more welcome to go and watch the free flight of course which is available freely also on youtube in my channel so i hope you enjoyed this video and i hope actually to see you in the next one

Channel: Vandad Nahavandipoor

Views: 19,959

Keywords:

Id: MIbctCfdgRQ

Length: 135min 58sec (8158 seconds)

Published: Thu Feb 17 2022