Flutter Riverpod 2.0 2024 Ultimate Beginners Tutorial

hello guys and welcome back to my video so in this video we're going to be learning about Riverport this is a Riverport master class uh this is for absolute beginners so Riverport is a state management package it's not only a state management package it can also do other things like catching but in this instance we are going to be learning about State Management right so Riverport is built on is built using uh providers so everything you do in in in in Riverport is going to revolve around providers so find that a provider is just a piece an object that encapsulates a piece of state and allows us to listen to that state in case if there are changes right so the first provider that we are going to to look at is the basic provider but before we do that let's first um set up brief report so the first thing that you need to do is you need to have the latest version of flatter rer Port after that you go into the ppml file in your project go into the dependencies and make sure that you paste it below you make sure that you paste it in your dependencies and you make sure that uh flatter PP gate is working right so make sure that you say flatter PP get and let's wait for it to run so just wait a little for flatter P get uh to finish getting uh the reer port package right okay so now that is done uh we need to wrap this my up with what we call the F scope so what happens in flatter is that if we have like let's say a piece of state that we want into another widget so what happens is uh we can pass that state from the parent widget to the children's widget to the other children's widget to the Trion widget down the widget tree right but let's say if we have 1,000 widgets how are we going to do that it's going to be it's going to slow down our application passing uh the state from the parent wiget to the last last widget if we have thousands of widget so what we do is we WRA this my up which is a parent widget with the provider scope what the provider scope does is that it allows us to listen to any piece of State anywhere in our widget with without even passing it from the parent wiget to the child widget it allows us to access that piece of State directly into the widget that we need that piece of state so what we are going to do is um let's just read this with a widget and then the widget that we are going to use is going to called provider provider scope so what this provider scope is more of like it's a global variable for providers it allows us to it allows us to access any provider anywhere in our widget right so let's just put the constant okay let's remove this constant here okay so now let's go into I've created this homepage so what this homepage is is um a couple of buttons we have the provider for the provider basic provider the state provider the stream provider the future provider the change notify provider State notify provider right like that so now what we are going to do is uh let's go into the this button will lead us to the provider widget right so let's go into the provider widget and then let's create a basic provider right so to create a basic Pro a provider the first thing is to declare final and then let's say we say my provider is equal to provider let's import flatter River P okay this is a mistake um yeah so what we need to do is uh we need to create uh a provider I'm going to create a we to create a provider we first need to use the final keyword and then say provider is equals to provider provider in this case we need a provider of type string and then this provider is going to just rain my name is going to just return return my name and then let's import flatter Riverport right so let's import flatter Riverport so this basic provider is often used to is often used to access like service classes or repository classes we will talk about that in the more later in the video but in this case I I just wanted to show you this basic provider so how are we going to access this basic provider inside our widgets what we need to do is we change this stateless widget into what we call the consumer widget so what this consumer widget does it allows us to consume providers into our widgets right and then inside the build method what we need to do is we need to pass in a parameter called widget reference so this widget reference it allows us to it allows us to refer it allows us to watch providers or to get a reference of where the provider is located for example I'm going to say final final my name is goes to refat ref doat and then provider it's going to watch this provider so let's remove this so what is going to do is going to watch this provider right so if there are any changes to this state this watch method will allow us to update those changes right so let's just say body uh Center and then let's say text so inside this text what we are just going to do is um so what we can do is uh body uh my name name dot what we can just do we can just Center text and then we're just going to give it uh my name do two string we just converting that to a string so we forgot the child which is a text okay now like this it's not okay so let's just give it an up bar okay so let's just what reload our application now as you can see if I go to the provider uh and I think we have an error okay let's okay let's restart the debugging process so if I click on the provider as you can see now my name is now displayed shown as Temple so this is the basic provider so the next provider that we are going to take a look at is the state provider so now the second provider that we are going to be talk looking at is the state provider so unlike the basic provider the state provider is aate is a provider that expose that uh gives us a way to modify it state so as you can see from the documentation it says that the state provider exists primarily to allow the modification of simple variables by the user interface okay so they've given us example for example let's just uh do an example on how we can modify the state using an inter user interface so what I'm going to do is I'm just going to create um I'm just going to create a provider called State provider which is going to be State provider and of type integer and then we need this integer is going to start from zero okay so now what we need to do is we need to we need to import uh the flatter report package okay so now in our so now let's create the user interface so we need to create a floting action button Floating Action button on press let's just give it an empty function then let's the child let's give it an icon and then let's say um icons doed and then uh let's a body and then let's give it a center child the child is going to be text and then we are yeah let's leave it like this for the moment let's leave it empty like this then what we are going to do is uh let's change this stateless widget like we did in the previous uh example we are going to use a consumer widget which allows us to consume Riverport providers and then we have the widget reference that is going to allow us to access a provider right so we are just going to say final counter is equals to we are just going to say final counter is C to reference doat so we have to watch if there are any changes to the state provider State provider okay like this so into our floting action button on the onpressed method what we are going to do is uh we are just going to say um reference do read so we have two methods in river we have the watch meod so this watch method usually is usually used in user interfaces is it allows us to monitor the state in a provider so if that state changes it will automatically update the user interface that's why you use watch but if you are reading providers from let's say buttons like say elevated buttons Floating Action buttons we use the read method and then we're say State provider dot Notifier and then do state Plus+ so this notify this this not do notify will just check will just be not will allow the floting action button will just allow the notific The Floating Action pattern to be notified if there is any state change and then in that state we want to increment in that state as you can see in our initial as you can see in our initial in our initial State provider the we have the in our initial State provider it starts from zero our our integer start from zero so in this case if we use this state Plus+ we will be incrementing this state from zero allowing it to change let's say one two going on right and then in our in our in our Center widget where we want to display the changes in the state we'll just say um we just say uh counter counter to two string something like this and then style text style color saying colors do black and then the font size on font size is equal to 25 right so now that we are so another we have an ER I don't know why okay now that we are done let's uh reload our application and let's see e so let's go into State provider then let's try to increment the state as you can see our state is increasing right so let's just go into our scafold and let's just put an up bar okay something like this okay it's supposed to be uh C to letter B let's what reload the application okay so if we go back and then if we come back as you can see our state is still um is still 26 but if we go if we go in onto the onto our initial provider and then we use what we call Auto dispose use to call Auto dispose right let's watch reload our application okay let's let's just restart the again no okay let's go State provider and then let's increment the counter okay so now if we go back if we go back to the main page and we come back you can see our counter is restarted so what this Auto dispose does is that it allows us to dispose any piece of state that we are no longer listening to it so let's say for example in this case if I increase this counter let's say like this and then if I go back to the main page we are no longer listening to that state provider and if I go back you'll see that it has restarted the state so if we remove this Auto dispose like this and then let's restart the debug the debugging session and then if I go to the state provider and then I if I increment the counter and then I go back to the main page we return to the state provider you see that our state remains 10 as it's not longer it's not disposed because we did not use the auto dispose method right so that's it about the state provider in the next next video we're going to be looking about about two providers we're going to look at two providers that are used to F data we're going to look at the future provider and the stream provider so the next provider that we are going to be taking a look at is the stream provider so the stream provider is usually used for to listening to Firebase and also reuting another provider every few seconds okay so let's say if we are retrieving data from an API Source in the form of a stream and you want to expose into your UI is the stream provider right so let's just create another folder inside our liap code repository repository and then let's create um a file called [Music] stream stream repository provider provider do do then let's just say class stream repository okay so what we are going to do is we are going to just create a stream of integers or this this must be a capulator is when duration for so what this function is going to do is it's just going to generate a stream of numbers every second from uh 1 up to 30 so that will be from 0 up to 29 right so what we need to do then is uh we are going to to access to access this in our um user interface what we are going to do is we just going to say stream repository stream repository provider is called to provider of type stream repository of type stream repository reference and then um just going to return uh stream repository okay so let's just put a semicolon and then let's just import flatter River P so if you remember from uh from the first part when you talked about basic provider we said that the basic provider we use basic provider to expose repository or service classes uh so that they can be read uh by other providers as you can see now we are using this basic provider to expose this stream repository that we are going to retrieve in our stream provider class right so in our stream provider widget you our stream provid wiget what we are just going to do is going to say final stream value provider is equals to [Music] stream provider let's import this from rpod stream provider then um going check in a reference as a parameter then what's going to do is first to access our repository class what we have to do is we have to say that we have to first read we have to read this we have to to read this uh stream repository provider I know let's just say stream repository stream reposit reposit goes to reference watch uh stream Repository stream repository provider provider like this let's import it so let's just import it and then what we are going to do is uh we just going to return this uh [Music] stream repository Dot and then we are just going to get the stream okay so that's how we do it so now let's go into our user interface let's just give it an upar remember we say that if you want to consume providers inside our user interface we have to use what we call the consumer widget consumer widget uh then we also need the widget reference parameter and then here we need to read final stream this goes to reference doat reference to watch um want to watch the changes in the Stream value provider so if there are any changes in the state in the Stream value provider value provider then uh we need a body since this body what we are just going to do is we're just going stream dot so when so this one we're just going to say uh so this when if there is any data from our provider and then if there's an error we just say error it will take in two parameters the error and the St Trace okay and then we'll just return a text uh that need to Center that text let's grab it with the okay we we just show a text with error a text with error to two string and then uh if somehow our data is still loading that's that's what I like about Riv point so it gives you options let's say if our data is still loading we just show a cirular progress progress indicate okay forgot to add okay let's give it a constant okay so now what we are just going to do here we are going to return a center wiget Center reget the child is going to be a text text and in the text we're just going to display the data or two string let's compare two string okay so this data is the the streams that are generated in our in our stream repository here then let's also give it a style let's style it uh text style color color to like I give it a font size turn five like this okay so that's it for the stream provider let's just restart our debugger then let's see uh let's go into a stream provider as you can see our streams are being generated and then let's wait for it to finish as you can see we have generated the streams from 0 up to 30 so if I go back also then if I come back you'll see with that we still have 29 but what if we use um the auto dispose method okay let's restart our debaca then let's go to stream provider so um the other thing is we need to make sure that the we need to make sure that the cirular progress indicator is centered let's rep it with the center wiget and also the text let's the error text let's also rep it with the center wiget Center wiet uh let's perform reload okay let's go back then let's go back to the stream provider with it again as you can see it restarts as you can see it was loading also as you can see um this time when we went back you saw that uh the the stream the the stream provider state has been had been reset to zero because we use Auto disposal remember said that the auto dispos method we use it when we want to dispose the state that we are no longer listening to it for example if we go back to another if you go back to another page and then come back that state will be reset it will be disposed as as that widget as that page will no longer be listening to that state okay so the next uh provider that we are going to be looking at is the future provider which is also used when uh retrieving data from API calls guys and welcome back to my video in this video we going to talk about the future provider so the future provider is almost the same as the basic provider that we talked about in our first video but uh the difference is that the feature provider is for a synchronous code right so the future provider is typically used for performing and catching a synchronous operations such as such as Network requests and also it is also used for handling errors or loading states of asynchronous operations we can also use it to combine multiple asynchronous values into into another value Okay so one of the main benefits of using the future provider is that if we use it with the reference. watch uh this combination allows automatic refreshing of some data when some variables change right ensuring that our data is always up to date but uh the only draw down of the future provider is that it does not offer us a direct way of modifying the computation after uh a user interface so it is just designed for using uh simple use cases so in the case that you want to you want a user to modify the comp the computation using the user interface then we have to check um the state notify the state uh Notifier provider or then which is now called the Notifier provider in rip right so let's uh move into our code and then let's just uh take a look at this example so here I have this fake data here uh that I've created which is just a simple list that is going to display products and then inside our repository folder I have the I have the product repository so this product repository is uh we have to Cle this final variable which is a future pro products provider uh which is a future provider which is going to be a list of our products uh so these products in our already in our application so they are not an asynchronous activity so to make it an asynchronous activity what I've done is I've just uh used this uh future. delay which is going to just delay uh our which is just going to delay by 5 Seconds right so making it more of like it's coming from a server right and then I have made this function as synchronous since uh it's a future so this is the future provider right so if we move into our I have this uh into our user interface I have this uh future provider widget so inside our future provider widget what we simply have to do is um instead of extending it as a stess widget we just extend it as a consumer widget so this consumer widget what would what it does it allows us to just um consume rort providers right inside our build method I have uh introduced this parameter the widget reference so what the widget reference does it allows us to listen and read to Providers right if you still remember from our first rer video if you have not watched that video make sure you watch it so this example is almost similar to the one when you use the state Notifier so if you've not watched the state Notifier video make sure you watch it so this now to access uh the products from our product repository this is our product repository we have a future products provider uh what we simply have to do is we declare this final variable which is products it's go to reference watch so what we are doing is we are just watching this uh future products provider right we are just watching this uh future products provider and then what we then do inside the board we just saying uh products do when the nice thing about rer it allows us when and then access the data from the products repository and the nice thing about um river is that it has method such as the error for example if we are getting data from our server and then it happens that there's an error this error method will simply display this error text when there's an error from our server and then if it happens that there's a delay in getting our data from the server the nice thing about uh River pod is we have this loading method which will display a cirular progress indicator to show that uh to show the user that our data is still loading from the server right so if we just go into into our um into our emulator and then we go into click this future provider as you can see as you can see there's a delay you can see that it's still loading uh for 5 seconds and then you can see that uh now it displays uh the products in our user interface as you can see so that was it on uh the future provider if you like this video please make sure like this video subscribe to the YouTube channel and make sure please you share this video with your friends and uh make sure you also check the playlist on reort uh for State Management thanks for watching cheers hello guys and welcome back to my video in this video we talk about state for a state Prov that is to listen a state Notifier it's also reer ports recommended solution for managing state which may change in reaction to user interface so what is the state Notifier provider basically used for it's used for exposing an immutable state which can change over time after to custom event it's also used centralizing the logic for modifying some state for example let's say business logic in a single in a single place right so let's take a look at this diagram in this diagram we have or in flat what call widgets then we have the state notify and then we have the repos repository or service which is in communication with our database which might be a local database or a remote database right so what happens is that let's say a user triggers a button so a user press a button then triggers an event this event then um this event then causes the state Notifier provider request updates from the hostory or service so and then the the repositor service then publishes these updates to the state Notifier then when it publishes this update to the state Notifier State Notifier then uh notifies uh the views of the UI of the UI State change which then causes the user interface to change so now without wasting much time let's dive into the code so in this video we going to be creating of like an e-commerce application and we are going to be managing the cut using the state notifi so if you go under the assets and then just go assets and then assets and then the products folder inside the products folder I have image I have these images that I have added so you can just go to the myub repository and then just copy these images and then paste them assets and then products and make sure that this asset folder is outside the lip folder right as you can see it's outside the lib folder it's in the root of the project right so let's go into our lib folder inside the model let's create the that file product do so let's create a class which we are going to call product and then in this class we need a which is going to be a product ID we also need a name we also need a description and uh we also need a double going to call new price then double hold price and we also so now what we need to do is uh we need to generate a construct so we need to generate a Constructor so what I'm just going to Simply do is a generate Constructor like this so now we have this um we have this uh product class now we done with this product class uh so what now we are going to do is um we can annotate this with the IM table okay just little bit and then uh we want to create another folder inside the lip I'm just going to call that data and then this data folder what we going to create let's create another file called fake data that so here we need to create an array so we need to create a class hold fake data and then we need to create an artic by now a list which is of type product products equals to empty like this so let's import the product let's put that for my pce is kind of slow must uh pent must pop up or yeah so let's import that okay so let's create the first one we're going say product then the product ID goes to one and then uh we need the name so the name is going to be uh let's check into our assets folder let's say iPhone 14 Max 14 and then we also need a description so for the description let's go to Google so we just need some dummy text then let's just type lorm ipsam so let's type lsam then let's go to this uh first website and then let's generate um let's just generate maybe 25 words then let's generate Lor lium then let's uh copy this go back and paste it in uh for the description okay we kind of have uh an error name I don't know okay made a mistake okay right so now that we're done with the description let's move uh on to the price so your price let's say is going to be 1,200 then the old price uh let's say it was 1,500 then image also need so image is going to be assets assets slash products slash Max PJ okay so now that we have got this let's just um let's just copy this and let's paste it below so let's paste it below so let's change a few things um here what I'm going to do is the name must change the product ID also the name so the name we going to say make bookbook for 16 uh let's leave the then let's change the price 2,000 the old price was 200 then also let's change the image from iPhone 14 Max Apple m2p iBook okay it's supposed to be Pro here okay so let's also paste if we have four products I okay uh if you want to add more you can just add more let's change the product ID to three then um let's change the name to laser is a BL 15 to ROR late 15 okay then let's change this one the last one protect then um say amung Galaxy Also let's change the image samung 23 PG Samsung [Music] Galaxy yes okay now that we are done with uh let's move into our providers and then let's create um let's create a uh State Fire uh let's give it a that okay so here we need to create um a cut a class notify which is going to extend uh the state Notifier which is going to extend the state Notifier State going to be of products going to be a list of products so here let's um import a flatter r p flatter and then also let's import the the product then we are going to initialize uh that Notifier as an empty state right there an empty list going toize it right so now that we are done need to added the product Right add product cut produ go to state which is equal to okay so what are we doing here so if we go to the documentation for the state nety provider you remember we talked about the state being immutable so if the state is immutable um if the state is IM mutable what we have to do is um we are not allowed to do state doed as you can see here we have the state but we are not allowed to do the state doed since our state is immutable right so what we should do is we create a list of to of of products which contains the previous products right so as you can see we create this state of products which contains um previous products and then on those previous products we then add a new product okay so as you can see here as you can see according to the documentation here as you can see instead we create a a list of products which contain previous products and then we use that spread operator so we then on top of that we then add uh a product onto previous products so that's how we add if there are existing products in the cut we now add a new product to that cut right so let's also do create a method for also REM moving the product product ID State I'll explain later I forgot uh the brackets so for removing the product if we also go back to the the documentation here you can see that since our state is mutable so we are making a new list uh we are making a new list instead of changing the ex existing list so what we just doing is we are just making here we just creating a new list without the product that we have uh removed right the product that we just create a new list and then we are going to in that new list the product that we just removed will not exist in that list so now that we're done with um with the cut Notifier the next thing that we need to do is um we need to create the we need to create the cut Notifier provider just going I know but go [Music] to state dat Auto auto dispose but least then um reference uh the card okay we are done with this part so in this part we have created a cut Notifier which extends the state Notifier provider as you can seeing us an observable class that stores a s a single mutable class then in this case we are going to add a product to cut and then we are going to remove a product to cut and then the next thing that we need to do is we need to create a user interface so what we need to do is um let's just create a interace just going to call it that state so make it stateless widget this wiget going yeah let's import the material do since we are going to consume uh providers let's change consum then inside the build context it's um the widget reference reference then let's import the flat report package I've imported the flort package [Music] so what we going to do is we just going to say um final go to reference watch so we are just going to watch uh the cut we just going to watch this provider here you're just going to watch the cut Notifier provider let's import let's import the file okay to go so what we just let's we just going to scold then we need a body is a safe area let good uh the child for the single child's coffee is going to be a grid view just going view builder then we need a great daily delegate constant going to be a constant delate with fixed cost XIs count so the cost XIs count going to be two then we also need the aspect ratio going to be 2/3 and then we [Music] also the main X SP is going to be then um so after this we are going to have a shrimp shrink [Music] rep going to be two then also need an item account we need an item account we are going to fake data if you remember that fake data so let's import it let's import Big Data dot products length then also need an item and item Builder provide context and also the index okay so what we are going to do is we're just going to say final products goes to Big Data data okay so now what we're going to do is we are just going to return pinging sets all then we need to child then we need an elevation then St widget Che wiet the children we need a container need a container a coner with a height0 also a width of 18 180 then we need uh we need to decorate it decoration workx decoration then um the color colors White this thing is a border radius whatever we do which is going to be water yes secular then the container what we going just we need to provide a child out going to be a column going to be okay okay I take then play need a flexible widget then the going to be any asset so it's going to say um this um products we just going products variable we going to just say products prod. image then we just going to height of 150 then the next thing that we are going to do is we need to just create a text below that then for the text we're just going to say product good name just give it a style fixt size engine and color the color of black so here supposed to be product so let's do the same for the so let's do let's create below let's create a row then then we're going to have a text inside this text just screen give it down what's go just going to say product new price let's give it a so supposed to be products it's sty da and let's just copy just paste it Bel low paste it P then let's change this to O price let's just change the color to Blue the const then let's just um give this this a p Just P it so the next thing that we need we need an elevated button below the Ping then um the child is going to be aex it to cut then uh what we are going to do is um we just going to say so if you remember I said in when we are using um if you're using Riverport inside patterns we use the read method right so as you can see read provides a provider without listening so just going read going to say Cut State Fire put that St notifi what name youtify so let's just go and change it supposed to be cut notify so let just order to cut we just add products okay go like this so now what we are going to just do um [Music] after what we are just going to do is um since this is we inside the STI what we're going to is going to create a position then uh from the top Z from the top then also need to write through PP for top then um the child is going to be a child detector going to be a guor yep then what we are just going to do is um just going to say navigator push then context page page out the Builder can look on text then it's going to take us to our Fire part page we have not created this now that we done with this let's just also need a child for the guest detector so the child is going to be a row children is going to be icons it and the color going to be a blue then we also have also have text is going to for the cut two string okay so this cut will do l two string it's going to show the number of um items in our cut going to show the number of items cut yes um go so now that we are done with the with the state Notifier widget so let's move into our cut page that's why you want to delay it display um cut items so in our UI let's just create uh a file cut what page going to be a stess wiet it okay so we need to change this since we are going to consume we need refence which is going to locate provid us this so let's import okay so now what we are going to do we are going to say fin now but eight CL but but provider let's import okay so we need to return a scaffold scaffold and then the body area the sing SC SC we also a child now we just and it expanded widget then the child going to be a column this children list of you then we use S dat FES youal also need an item count item count each fire length then item Builder taking a context also inex then uh left uh physics a constant just going to now goes to then we're just going to pretend hting Conant it's then out but evation is going to be five then we shape which is rounded hold up AG rounded supposed to be rounded rectangle rectangular rectangular order whatever it is yeah read secular qu the child is does in blacket weight of one 12 say um going to be book decoration then we have the Border ready oh go inside this all a it just give it a height then just screen expand [Music] it is going to be a Colum hold just going to box then that we are going to have text then we also need yes this below SI box the size box this side box past it Blow give Conant now what we need ex space this so let's just copy this text it let's change this then let's just delete the text still it's just this PR okay so need just P between them let's also copy this and L below this say decoration uh which is um lant the color blue now we are done let's move on part let move one to the next part the Gest detector right 16 get Che I inside our own TP what we product that's tou prot that okay what we are going to do is um we're just going to give a pinging going to be [Music] CH going to be it text that's going to show the total so what you're going to do is um but good double okay let's see what we empty we need the cut Cut State notifi supposed to cut state so this is just going to say the total sum then uh what we do the on press PR going to okay you know state for go to you forgot to what the state now that we're done let's move into our main do that when do that Notifier provider button we need toor fix 3 10 h all let's import it it okay now that we're done let's what loading let's go to the state Notifier provider as you can see we now have our products Samsung Galaxy if we add to cut let's add them to cut as you can see now have products now cut let's add this one to cut let's add all of them to cut okay so if we click the shopping B let's see what will happen you can see now we are now at to our cut page right as you can see if we delete this iPhone 14 you can see even it updates the amount can see updates the amount as you can see the it's uh it's it's updating the state according to uh to according to the changes by the user interface as you can see as as I'm deleting it and then it's updating the user interface so that was that on the notify provider you find this video this video useful pleas click on the Thumbs Up Button subscribe yes hello guys and welcome back to my YouTube channel so in this video we are going to be uh talking about the state provider and uh we are going to be using it to change the future type using a drop down button so as you can see a future provider is a provider that exposes a way to modify each state and as you can see also it says that state provider exist primarily to allow the modification of simple variables by the user interface and then they gave us an example inam such as a filter type okay so what we are going to do here is uh I have this um application that's going to display products in our let's say an e-commerce PL uh application and then we want to filter by name to sort by name and also to sort by price right so if we go into our code first of all we need to go into the pop pop. file in the P.O file make sure that you have we have the refer Port package and also that you have um under the assets make sure that you have the assets SL Images slash uh that is going to contain our images right and then inside our data I've created this fake data class which is going to just have a list of uh a list of products right so you can also find this uh this project also on the kab I have the kab repositor so also and then we have the model uh in the model we have the name image description and also the price right and then we also have um the product S type right so the product S type is going to be an enam so the enam is going to have two options we have the name and then we have the price right and then we also have a a future provider we also have a future provider so this future provider is going to allow us to imitate getting data from a server so to imitate getting data from a server I've used this a do delay that is just going to delay our data by almost like 8 seconds all right so now let's move into into creating our sort to make our our sort type work we want that you click this buttons we want to sort the products right so now what we need to do is uh what we need to do is let's go into inside the inside the product so type in right so what we are just going to say is what we're just going to do is we're going to do final uh product sort type provider product sort type provider is equal to State provider is going to be State provider of type product S type and then we just need to pass in the reference and then we want to by by default we want you to the product s type. name okay so let just save it so that you to just organize our code okay so we have this provider uh which is going to expose the enams uh and then by default it's going just to show the product so type. name right so if we move into our home into our into our user interface with have this uh drop down button as you can see the default value the value is going to be product s. name and then unchanged we just put this uh empty function which we are going to change right now so what we need to do is um we need to change this value to watch our we need to change this value so that it watches our our product S Type reference. watch uh it's going to watch uh the product sort type provider okay it's going to watch the product S Type provider and then on the unchanged what we want to do is um want to also watch the product so type provider do notify do state which is equal to value okay like this so I'm just going to I'm just going to explain this okay I made a mistake it's supposed to be we need to take in a a value okay like this okay okay so what's happening here what's happening here is that we have this value and then what we going to do is we are going to just monitor the product so type uh do notif fire the state of the product type in this case we are just going to monitor the state of the product so type and then we check if that product is equal to this uh to this value so when it changes let's say for example if the user Clicks in clicks on the the price the price sort icon it's going to check at the product S type and then update the value the state of that value right so as you can see here in the in our user interface I've ex changed the from stateless widget to Consumer widget so that we'll be able to consume reer P providers and also I have also put this widget reference inside our build function right so if we want reload our application so if we want to reload our application and then let's try to to sort our product you can see that nothing is um nothing is changing right so what we need to do is we need to modify our future our future provider right where we are getting our data from from the future provider so that it updates our our UI okay so what we need to do is um we need to say that um final sort type is goes to reference watch uh product sort type provider okay let give it a semicolon and then let's import it so what this going to do is uh we're just going to monitor if there are any changes in our product S type and then we need to update our our products according to the changes in the product type right and then after this what we need is a switch switch statement right so we need a switch statement switch um statement which is going to be a sort type and then I'm going to say in case uh the product sort type do name in case it's product sort type. name F data to products do sort and check a then we are simply going to compare B do name compare to a name and then um if this if the it's the case that it's um it's a product S Type do name then we break the statement otherwise uh we're going to say k product sub type price and say fake fake data do products do sort okay what's going on here so what we doing here is that uh we are simply watching our product S Type provider and then we are using a switch statement and then we make sure that if it's the product s type. name what we are doing is we are just comparing uh the name of uh one product to the other name of the of the other product and then we sort them and then we are also doing the same by the by the price right and then we then return the fake data so if we watch reload our application so now if I click uh the price okay let's try again let's try to water reload okay let's try to conso and then rerun the application e e okay guys so now the that the application finished loading as you can see if I go to the drop down Main and then want to sort by Price you can see that um our application is sorted by price so let's just water load uh B so as you can see you can see we can also sort it by name as you can see we our product are sorted by name i m m okay and we can also sort it by Price uh okay so I made a mistake on the on the price it's supposed to be a do price not name it's supposed to be price not name okay so let's s reload our application okay so let's click on the price section okay so we need to run the we need to run the application again e e for e so is it you can see uh we have these products if you want to sub them by price if I click on the drop down button and then I click on the price drop down menu item you can now see that our products are now sorted by price and then we can also go to we can sort them by name and you can see now up prodcts and all SED by name okay so that was it guys on state provider uh f t if you find this video useful please make sure you subscribe share the video cheers

Channel: Isheunesu Tembo

Views: 1,953

Keywords: #flutter, #flutterriverpod, #riverpod, #riverpod for beginners, #firebase riverpod

Id: p9ep2-2Q9nY

Length: 141min 5sec (8465 seconds)

Published: Sat Jan 06 2024