Flutter Riverpod EASY Tutorial

in this video you will learn how to use River pod with flutter once and for all let's start first we will set up River pod next we will do an easy level with River pod and after we will do an hard level with River pod this one will use a model because this is probably what you want to use River PUD for after this we have two practical exercise to make sure that you really understand how to use River PUD you can find these practical exercise in the description of this video have fun let's start with the easy level first thing first we need to set up River pood for this you will need to go inside the pspec Doyal and you will need to add the flutter River pod after this we will need to wrap the entire application with the provider scope you can go inside the main Dart now we just need to wrap the entire my app with the provider scope so I will paste my app and now we have access to River pod inside our entire application the next step if you go back inside the cheat sheet you will see that it's to start the easy LEL to start the easy LEL you need to create a state provider to handle the data and for this you will need to create for example inside river pod. Dart you will need to create a final called River pod for this one we will call it the river pod easy level and we will use the state provider the state provider will be the type INT in this case we will just return zero let's go back inside the cheat sheet and now we need to use the consumer widget inside our application in order to see the data and edit the data so I will go inside one file that I've created called the easy page. Dart this one is very basic we have a center widget we have a text to-do and two elevated button one that will be used to add and one that will be used to remove numbers great so at this point how do we really use River pod for this you will need to change the stateless widget for the consumer widget now you can see that you have a problem with the build and the reason is we need to use the widget reference and this is required because we have the consumer widget so I will just say widget ref and now we will call it just ref we can now access the information from the river pod data now that we have the reference we can use it and get the data from the river pod information so I will go inside the text and I will replace the to-do with the reference and then I will say dot and you have two option you can either read the reference or you can either watch the reference but what is the difference if you go right there you see that we have a little note the goal of the watch is to listen to the change for example if the text change behind the scene and instead of being one it's now two we want to update this and show it visually so this will listen to the change but the read will be different it don't listen to the changes instead it's used to edit the value example when the user click the button add we want to edit the value to put + one or minus one so this will be when you use the read this is to edit the value so let's go back inside the E page and now we wonder do we need to put the watch or the read again the watch is to listen to the change and the read is to edit the change right now we are inside a text widget and we want to listen the change so we will use the watch and if you don't know what to put after that you can go inside the cheat sheet and you will see that we need to write something like this we need to use refat input the river pod data that we have created so we will say River pod easy data River pod easy data if you remember the river pod easy data was a state provider with a int and the default value was zero so we can't put the int inside the text so we need to say dot to string so now you can see that we have the default value zero but how do we add numbers or remove numbers for this we will go inside the elevated button we will again use the reference and then we will say do read because this time we want to edit the data instead of just watching for the data to change in this case we will put the river pod easy data again but because we want to change the data we need to say Notifier do state and if you're not sure you can just go back inside the cheat sheet and you see reference. read Rod Notifier and state now what do we do with the state we want to go and add a number so say plus one and that's about it if we save you will see that when I click on ADD we see the changes but the remove button doesn't work yet so we will do the same thing and will copy and paste this inside and instead we will remove one and you will see that the counter Now work on both buttons okay so this was the easy level pretty basic stuff but most often you will need to use models inside your application and this is what I will show you we will do the r level right now so first we need to use the change native fire provider for this what we will do is we will go inside the river pod. Dart and instead of using the river pod easy level data we will use the river pod hard level data and this one will be the change Notifier provider with the type instead of using the int we will use a model so the river pod model and it will return instead of zero it will return the model that we want so we will go inside the model just to show you we have the class River P model that extend the change Notifier if you go back inside the cheat sheet you will see that the next step was to use the change Notifier great so we use it with our class with our model inside we will just put a int counter because this will be pretty much the same thing and we can create a Constructor The Constructor will require a counter so a default value when we use it after this we create two function one called the add counter and one called the remove counter each of them will change the number of counter so this one will be plus one and this one minus one after this you need to make sure to use the Notifier listener in order to make sure that the application understand that we have changed the value and we want to update the value visually if you go back inside the cheat sheet you see that the next step was to add the Notifier listener now we need to use the consumer widget like we did with the easy level so we will go inside the main and we will replace the easy level with the art page like this we can now go inside the art page and we can set up the stuff instead of using the stateless widget we will use the consumer widget and in the build if you remember you need to add the widget reference this one will just be called ref next we need to go inside the text and we need to use the ref dot if you remember in this case we will need to use the watch because we want to watch the value update visually so we'll say watch and we will put the river pod hard level this time and you can see that inside we have the change Notifier with the river pod model inside so we need to use this as a model so we can just use the value counter because this is a int we'll need to say also do to string great so if we save you will see that this is the default value zero next we need to edit this information so we will go inside the CH cheet and instead of using the watch this time we will use the read so we will put the river inside and we will change the data this is just an example to change a name but in this case we will change the counter so we can go back inside the art page and we will use the reference dot read inside we will put the river pod Art Level and we will say do add counter and we put the semicolon we will do the same thing for the remove but we will say remove counter and if you save you will see that if you add or remove this will work but in this case we use River pod with a model which is way better okay so now if you want to practice by yourself I have two practical exercise that you can find in the description of this video an easy and a hard level you can like or dislike the video have fun bye

Channel: Flutter Mapp

Views: 5,392

Keywords: Flutter, riverpod, flutter riverpod, riverpod flutter, flutter riverpod easy tutorial

Id: 7Cp1GlmHTGE

Length: 8min 16sec (496 seconds)

Published: Sun Feb 11 2024