Flutter Riverpod State Management | Simplest Explanation

hello everyone assalamualaikum here we'll see how  to use flutter riverboat state management to build   a simple counter app to do that first we need to  inject provider scope at the root so here you need   to go ahead and install riverport flutter river  pot and then come to your main file main.dart   over here at the top i have imported this file the  package and then over here you can see provider   scope now provider scope has a child which is my  app this is a classic maya which every flutter app   has so with this our provider scope sits at the  root of your app before your app starts it's there   now provider scope is there for maintaining the  state of your app or buffering the state of your   app then we need to create provider using state  provider well to create a strict provider right   below this class we'll have this function while  over here using this simple function we create a   state provider for that we have used the keyword  state provider and it will return us an integer   type variable and we'll state we'll store it over  here and as you store it actually we'll store the   state of this integer over here or this variable  now whatever you wrap around using state provider   that thing or that object becomes stateful now  counter state provider would become stateful   which means we can get value retrieved value  and reset value things like that we can do   many operations on it and then we need to create a  consumer class that will extend a consumer widget   as you can see over here so over here i have  created a new class which is called my home page   and this class extends consumer widget as we  said early now inside this over here i have this   widget ref and i have an object which is called  ref now because of this ref object i can access   the property of watch and inside this watch i can  send my state or state variable which is we have   declared over here or created using state provider  now because of this rafted watch whatever changes   happens here we'll be able to read them and show  it over here now it's time to go ahead and use it   so we'll call this my home page from here so  here we call this my home page using this home   property now we can go ahead and run our app  and here we see that our app has a value 0   which is our initial value and this value has been  shown from here now we can access the value once   again using this ref.watch and it gets the value  from counter state provider now we'll use ref.read   to change the state of this app to do that over  here i'll create a floating action button now   this floating action button has actually in a row  two floating action buttons one is for increasing   the state value of this variable and other is for  decreasing the state value you see that counter   state provider has a state and from that we can  get a state object and state object value could be   increased or decreased as you increase or decrease  the value of this variable over here which is   inside this right now zero would change let's run  our app one more time you see we have two buttons   and with this we can increase the value and with  this we can decrease the value so this is how   using four simple step you can go ahead and build  your first river pod app so the steps are over   here you have to have a provider scope which would  sit at the root of your app and then you have   to create a state provider or a provider using  state provider and this would make this variable   reactive or stateful and after that whatever class  you have that class should extend this consumer   widget and if it does the build method will have  widget ref and from it we can create a ref object   and from this ref object ref.watch we can get  the value whatever the value is there currently   we can get that and if we can get that we'd be  able to display it now to be able to change the   value later down the road you can just go ahead  and use ref.read on any kind of unpressed value   or whatever you want and from your provider  which is this one over here you can access   the state object and state object eventually  increases or decreases the value of this integer   or this provider so that's how you build your  first river part state management app thank you

Channel: dbestech

Views: 54,743

Keywords: flutter riverpod tutorial, flutter riverpod example, flutter riverbod counter app, flutter state management, flutter, riverpod

Id: U_9yhp0aSaQ

Length: 4min 56sec (296 seconds)

Published: Wed Apr 06 2022