Flutter Provider State Management App | Step by Step for Beginners Shopping Cart

hello everyone assalamualaikum here  we'll take a look how to build an   app using flutter provider we'll  use a provider for state management   and this is what you'd be doing so here i have  this beautiful page here you can add stuff   and you also get notification like this it's  all happening because of state management you   can go to next page and you can see the data  and you can reduce more then you can go to the   previous page and you can add more again then go  to the next page and try to reduce more this time   okay and you will see you also get a notification  like this okay so this is what we'd be building uh   using flutter provider which is used for state  management okay well before we go ahead and   start doing it uh let's understand some basic  concept okay and don't forget to download the   code from the below in the video description  okay all right so you will have all this ui   for free anyway so let's understand some  basic concept well so here first we have to   understand some basic concept we'll start with  change notifier over here now change notifier   is a data holder class okay so we'll create  a class and that class will extend the change   notifier so that particular class it be holding  our data like if you see xyz things like that okay   like counter app we see a lot of time so that kind  of class would extend exchange notifier and it   would hold our data okay all right then we'll also  have a special keyword which is called consumer   now consumer is the user so user means that  it's going to use the data so this class is   the data holder and consumer is going to use the  data so that's why we call it more like a user   now here then we'll have provided an  off which is interaction which does   interaction with the user which means  it does interaction from ui to the user   or from the user actually and it interacts with  the data holder okay which is with this one so   once again this would be our data holder and  this would be the user of this data holder and   then using this one we can interact with change  notifier with this class okay now to be able to   make it up and running at the entry point of our  app we should use change notifier provider okay well so this is the basic idea and after that  now we'll go ahead and see that we also need to   make sure that we have the provider package now  come over here in this popspec.yml file and here   make sure that you have provider now i'll be also  using get for routing but you can skip that if you   don't want to do routing using get x because  over here we are just using provider to learn   um our state management okay and once you  are done with this you should be good to go so the app looks like this if we go ahead  and run it well we can go to next page we   can go to previous page and things like  that okay all right so once again i will   run it so here we are and we don't have any  error now as i said earlier that we need uh   we need to change notifier which is more like  a data holder so first we'll go ahead and work   with change notifier we'll have a class where it  extends change notifier and so that class would   be our data holder okay this would be our data  holder class and this class would extend the   change notifier like as we said earlier okay now  as i said it is a data holder class so we need   to declare some data in that case we'll declare a  variable which is an x and this is the value that   we'll manipulate every time we click on this plus  button or this minus button okay all right so now   we'll also create a property to get it so here we  do x because we want to access this value from ui   now here we'll create a method and we'll  call it increment x and here we do x   x plus plus and over here we will use a notified  listener a listener need in your class which   extends change notifier so this is more like set  state if you use the original uh flutter state   management function which is called set state  okay so or it's more like the update function in   get x okay or set state so hopefully it makes  sense so they are similar all right so with this   when x value is changed we'll be able to know  it okay great so this is the first step we we   are done with this so next we'll see how to create  a consumer and consumer would be a user and this   would use the data that's in the data holder or  the class that is extends change notifier okay   well to be able to use this in our ui all we need  to do we need to come over here you can find the   ui where you want to consume this data once again  consume means use this data and show the result   so over here i do have a section where it  says total and this is the one where i want   to consume the data so i would use the keyword  which is called consumer and consumer takes   a type it's a provider type or data holder type  in our clay in our case it is data class okay   all right and then it takes a parameter  which is called builder and builder takes   an anonymous function and which takes three uh  parameters the first one is context second one is   an object of this class so we'll call it data  class and then we'll use another property which   is called child so this three and after that  you need to return okay return the widget that   is being consumed okay see so we need to remove  this one const over here okay all right so now   this consumer will consume this widget so over  here we need to access the data to be able to   use it right okay because if we can access uh  this x value then would be able to consume it   so we need to access it but just now we created  this one data class so we can use this data class   to access the data but now for this one first  we'll use dollar sign and then this curly braces   and then this one and then x okay so with this we  are able to consume the data which data x so to   to be able to consume you need to wrap your widget  using consumer and that's all okay so that's what   here we are consuming okay well next  we'll see how to use this provider.off   to do interaction okay all right so we  want to interact on this button okay so   i'll collapse this and the button is  here okay now inside this i do have   another button which is called gesture detector  which is this add this one okay now over here   inside this gesture detector i do have this on tap  function okay so on on the click of this button i   want to interact so this one first i would do here  provider dot off now here once again it takes the   provider type or data holder type in our case  it's a data class okay and then it takes a context and then it takes another property  which is called listen in general it is   default true we need to set it to  false and after that here you can   call the method from your data holder so we have a  method which is called increment x okay all right   okay well for now i'll comment this out so next  i'll go ahead and do the entry point where i have   to use this change notifier provider for our entry  point let's go ahead and do it well to do that we   have to come to our main.dart class and over here  this is the entry point of our class so over here   we will wrap it around change notifier  provider okay so i will cut this one   now here i would do change notifier provider okay  and it takes a parameter which is called create   and instead create you need to pass a context  and this is the global context that is used for   provider okay and then you need to send your  data holder class in our case it is data class   that means that whatever happens in this class  we'll be able to access that using the context   so that's what it says and then you need to use  a child okay now we'll use child and then we'll   use the one we had early by the way here i'm using  get material app for routing if you don't want to   use get material app just to remove get and go  ahead with material app so it doesn't conflict   with provider package okay all right so with this  we are done okay now we'll go ahead and restart   our app and we'll see if we have error or not  so it looks like everything is okay no problem   now over here i want to click on this  one and we see that it changes okay   now it changes because we are on home page now  on home page uh let's see why it's changing so over here we do have this consumer and consumer  is getting data from data holder class and   using this one we are interacting with our  data holder class which is this one over   here so once we call this method from here okay  so the value of x gets changed and if it does   then consumer over here consumer over here is  able to consume it okay so that's how it works   so that's as simple as this so now we know how  change notifier consumer provider dot off and   change notify provider works would be able to go  ahead and scale our app well to be able to do that   i will come over here and i will copy  this one and i will create another method and i'll call it decrement okay so this  case instead of plus plus we do minus   before we go ahead and scale our app let's take  a look now here we have this value too i can   increase it more and i can go to next page but  on next page i don't see the value previous page   i still have the value but on next page we don't  have it now next page is our second page over here   we are not consuming the value okay because on  second page we are not doing anything that's   related to provider now over here we do have this  detail and text over here so over here we need to   wrap this around consumer so once again whatever  happens here would be able to consume it okay so so here i'll use the consumer wizard  we go do consumer and then data class then it takes a builder and builder takes three  parameters context and an object of our data class   and a child now after that we'll return okay  return the text and we need to remove the const   keyword now over here let's see so this is the  same place where we want to make a change so here   we do this one uh data class dot x okay now let's  save it and let's see what's happening over here   uh we need to return okay now we  see the value is here immediately   uh well now of course uh we can go back now we  see the value we increase we go to next page and   we see the value again okay so the value is being  persisted why because we are consuming the value   from here okay this x value great now on page  second we also want to be interactive so as i said   for being interactive you need to use provider.off  so here we have this button which is gesture   detector and over here we have this method so over  here we do provider dot off now here data class   and then we'll pass the context and listen  false okay and then we'll go ahead and   call the method which is decrement  x now after that i'll save it   now here you'll see that i can decrease it  okay now for now we can ignore this message   okay okay let's go ahead and decrease it now  we can go to previous page and we see this is   minus four okay go to next page we'll see minus  one so our state is being persistent and it's   working perfect okay now here speaking of uh  this provider.off there is another way to do it   so if you don't want to use provided.off you  can use it using context so we do context dot   read okay now over here you need to provide  the data class so in our case it's this one i   mean type of the provider and after that you can  just call decrement okay it would work the same   so if you don't want provider dot off you can  use context dot read okay now let's save it   you decrease it and it works you go to previous  page it works as well do remember in previous page   we have provider.off okay great now we also want  to do some conditional check on this okay so we'll   only increase and decrease if we meet certain  conditions so this is where we'll also go and   do it so now over here uh for this one i'll cut  this one okay and then i'll do a conditional check   first so here i'll do if okay now we'll get the  value x okay we are on home page if value is uh less than or greater than five then we  do this one okay we can increment it   otherwise we'll show this message over here okay  so i'll cut this one and over here we do else   okay all right now i'll uncomment it so  what will happen over here if the value is   equal or less than five we can go ahead and  increment otherwise would say a message that you   cannot do it and that's what basically you do in  a shopping cart right anyway so i'll go ahead and   save it okay now this is in our home page so i'll  go to uh well over here yes we need to increase   it because we are in home page now  let's go ahead and check so four five okay yes so while it is working we need to  work on this condition a little bit okay   all right now we'll go to the next page okay  now over here we do the same next page so so next page instead of  using provider off we'd use   context.read okay so i'll cut  this one and i would do if if context.off but we want to get the x  property into x is greater than zero then you can go ahead and decrement  otherwise you will show this one okay and now i'll uncomment it okay now let's restart our app okay  oops we might have that we need this one okay right so we can increase go ahead and do this   now we can't do it more than five we can go to  next page okay now let's go ahead and decrease   you can't decrease it so you can you need to go  to previous page increase go to next page you   can decrease okay so that's how it works okay now  regarding context.read or whether you're going to   use off well that's a debate but as long as it  works and you don't have any bug i think we are   pretty good at the beginning okay all right so  hopefully you learned something and if you did   don't forget to smash that  like button thank you so much

Channel: dbestech

Views: 28,228

Keywords: flutter state management tutorial, flutter state management provider, flutter state management bloc, flutter state management getx, flutter provider for beginners, flutter providers, flutter state management, flutter tutorial

Id: _my1IHfn0xk

Length: 18min 1sec (1081 seconds)

Published: Wed Mar 16 2022