State Management Like A Pro - Flutter Riverpod
Vložit
- čas přidán 9. 07. 2024
- A complete introduction to Riverpod as a State Management solution for Flutter. We will cover the different providers and how we can use them!
Course to build a production-ready app 👉 robertbrunhage.com/course
👉 Have additional questions, join Discord: / discord
Want to support me?
♥ Patreon: / robertbrunhage
♥ BuyMeACoffee: buymeacoffee.com/robertbrunhage
♥ Paypal: paypal.me/robertbrunhage
····················································································
You can find me on:
● Website: robertbrunhage.com
● Twitter: / robertbrunhage
● Discord: / discord
····················································································
😎 Subscribe: bit.ly/2SUyRhx
00:00 What is Riverpod
00:34 Installation
00:45 ProviderScope
00:54 Provider
01:49 ConsumerWidget
02:30 StateProvider
03:28 StateNotifierProvider
04:43 ChangeNotifierProvider
06:07 Stream & FutureProvider
07:59 ScopedProvider
09:23 autoDispose
09:34 family
Someone is currently learning 🤓 Thanks Robert 👏
bro you're literally him
Best Riverpod tutorial by far!! And the quality of this video is off the charts 🚀
Thanks Tadas, keep up the great work yourself!
Agree! Great videos from you as well Tadas!
This is like watching a fireship video!
Spent all day trying to pass a file to Riverpod so I can retrieve it and update state. Your vid got me there. Thanks!!
After reading the documentation, came here and I have to say it, This is the easiest explanation about Riverpod, great work!!
Awesome to hear so glad it is helpful! 😊
Love the new format. Keep doing it. Good job.
Thanks! Glad you like it and it's a lot more fun to do so expect more videos like this for sure!
Thank you. Great Video. Now I started using Riverpod.
Thank you so much for this. It was so clear and easy to follow up.
And yes on the StateNotifierProvider video. This provider looks like the one most apps would use.
Glad it was helpful!
Bro as a beginner, trying to understand provider, you saved me man. Good job. Subscribe earned.🙏🙏🙏🙏🙏
Awesome, glad I could be of help!
Thanks. this is what I'm looking for
Great overview of the classes provided by riverpod. i'm excited to see what i can do with it when i work it into one of my client arechitectures. i'd like to give it a try as well. also, welcome to the voiceover editing club haha. Now you'll spend many more hours making a video :D
Haha thanks man!
Looking forward to see what you do with it! It's insanly fun to edit but damn it takes a lot of time 😅
@Filledstacks what's your view on getX package?
@@SumitBhanushali16 I don't have any views. i think the author is trying to do something that will make applications development easier so I'm in 100% support of that.
Nice, straightforward and clean. Good work sir!
Thanks, glad you like it!
Wow. This is amazing. Learnt a lot from a 10 min video. Waiting for more amazing videos. ❤️
Awesome, super happy to hear you liked it and learned something! More videos coming!
Once again a great tutorial. Thanks a lot.
Thanks Luis, glad you enjoyed the video!
Good intro and surface level explanation of riverpod
Thanks man, super appreciated!
P.s. Good work on the videos and keep it up!
great explanation. well done.
Flutter Riverpod looks so clean!
Really powerful tutorial, highly recommend
Thanks, super happy that you enjoyed it!
Really nice video, thank you!
Glad you liked it!
Watched at 2x Speed great video and great info! Keep the great content coming :)
Your video edits are sick! My fav flutter guy
Thanks a ton!
wow nice!!
Please, make more videos with real projects with Riverpod
It will get you tons of views because of how new it is and also because not a lot of CZcamsrs are covering it
good job mate! also wld love to see a separate state notifier video
Man you made it so simple even I understand it ....
Nice tutorial.
Great tut! This feels so much like React now.
Best of the Best
Nice tutorial ! Bro, please make more video like this 🚀
Thanks, more coming!
Waiting for your provider complete explanation videos.
btw great video!
Hmm maybe I should do that as well, thanks for the idea!
Glad you enjoyed it!
Awesome tutorial.
I can see that many methods are interchangeable. Would love to see more practical examples to illustrate when to use which.
Keep up the good work!
Thanks!
That is the good part, depending on what your application needs it has the solution for it (most likely at least).
So if you are using streams a lot, you can use the StreamProvider and if you are using ChangeNotifiers you can use ChangeNotifierProvider. A lot of these decisions are up to the developer depending on what they want to use. Personally I use StateNotifiers a lot but they are a bit more complex, hence why I said that in the video!
I would really recommend people to use ChangeNotifiers as that is a lot easier to start out with and scales increadibly well together with Riverpod!
A video about statenotifier video will be great..
Will put it higher on my todo list!
Awesome tutorial! Question, why streamProvider and futureProvider both don’t have autoDispose by default? I mean is there a case that we don’t need to dispose them?
Great
My heart always "flutters" when I see another vid from Robert 💪🏼🦾
😊 😊 😊
Give us more tutorial on Riverpod, We need you!
Have more planned for sure!
@@RobertBrunhage soon!
@@RobertBrunhage Is that still true? If so, when will it happen?
Great tutorial.. right to the point! I wonder if you know of Momentum.. Do you think is better than Riverpod? I would love to see a tutorial on that.. there is nothing in CZcams on that
Hello. Thank you for the easy-to-understand explanation of stateManager. Is the icon model the Fallout series Vault Boy?😃
Much cleaner than provider
1K Like!!!!!
Great video
🎉
When using the ConsumerWidget the entire widget is rebuilding is their a fix other than using a stateless widget and consumer, or am I doing it wrong
Clear tutorial
Thanks!
Great intro to RiverPod. Can you do more complex real world state management with flutter?
I have some more videos demostrating different cases with riverpod. Check out my movie app video and the pagination app video!
At 0:46 How do you wrap the widget by right clicking? Is this an extension?
It's a great overview about Riverpod, congrats Robert!
How do you use DI with Riverpode? With get_it, separed class or in main with providers?
Thanks.
he just showed you in the video how to use DI.
the providers are the mechanisms that inject the services, as soon as you read/watch them in a widget.
Is this all that there is in riverpod? if not what percentage does this video cover about riverpod? TIA for the response!
Loved this tutorial. Also liked those VS code thing you used for signs like => and != as a slash in =. How do i enable these feature in my VS code?
Font Ligatures. Fira Code font for example supports that. Google it to find out more. Other fonts also support ligatures.
Waiting for something like this for a long time. Great video. Can you tell the configuration that you use in vscode. Theme and font....
Awesome, glad you enjoyed it!
Theme: One Dark Pro
Font: JetBrains Mono
Which theme do you use?
I read you 😀
Using the ScopedProvider, how do I access it in a method e.g. onPressed?
The context.read does not work with ScopedProvider.
damn that's good
What is difference b/w StateNotifierProvider & ChangeNotifierProvider?
StateNotifier is an improved ValueNotifier. So in the case of a StateNotifier you can only change the state within the StateNotifier compared to a ChangeNotifier you can change outside if you don't make getters and private setters as well as you have to call NotifyListeners.
So the providers is just different providers to provide one of these two :)
please do a separate statenotifuer vdo with riverpod 1.0.0 although its in pre release/dev/beta
how to set bool value in statenotifier provider
Can you please explain how to use the Change Notifier Provider in a stateful widget? Coz i can't extend a consumer widget there
You can't extend a StatefulWidget with ConsumerWidget if I remember correctly.
If you want to use the StatefulWidget you need to use a build i.e: 01:09
First thanks for the tutorial.
I tried the ChangeNotifierProvider you explained but it rebuild the hole class when I use the increment method.
is there something like selector in Riverpod ?
If you want to rebuild a part of a class you need to use the Consumer widget instead of making the whole Class extend ConsumerWidget!
This way you will just rebuild everything inside the Consumer widget!
thanks dude.
Thanks u Sir for this tutorial!
Please do riverpod + firebase auth Sir!:)
Very good job but I’d like more reasons to move from Provider to Riverpod. I’m waiting for a realworld example video 💪
Having plans for that!
Epic intro 🤣🤣 stay cool
Hey Girish!
Glad you enjoyed it, so much fun to create videos this way!
@@RobertBrunhage 👍
What’s the benefit for testing?
Nobody does an article about it.
Looks cool, but in testing is where people should focus, in my case, at the company I am working with, they required testing (bdd) and some of these state management packages are missing that point.
Luckily to me, I decided to go with redux for flutter/dart + flutter hooks + MVVM pattern to test ephemeral state (I am not fan of putting al the state of a screen into the global state, classes does that very well).
i need to watch on 0.75 speed because of how fast you explain lol but at least you explain it good
What is the difference between FutureProvider and StreamProvider?
I recommend reading up about the difference between a Future and a Stream stackoverflow.com/questions/50844519/flutter-streambuilder-vs-futurebuilder.
Regarding the providers, it's just to provide either one of them!
I'm going to update my android app state management with Riverpod. I played with it but it was in beta
Do iiiiit (Said in a Palpatine voice)
Hi! Do you use riverpod in your projects?
Yep 😊
tried to follow along but couldn't extends NumberNotifier with StateNotifier.
VS Code Intellisense can generate StateNotifierProvider for me when I import the flutter_riverpod in the class, but it won't accept the list of int type. and I couldn't get the state property.
solved: I need to import state_notifier package
Sorry, forgot to say that about stateNotifier, glad you found it!
@@RobertBrunhage thanks for the video, very good explanation. I hope you can create more example on small app like login and fetch data from network.
After changing my state with StateProvider example
from
context.read(userAuthProvider).state['loaded'] = false;
to
context.read(userAuthProvider).state['loaded'] = true;
How can I make my app reload or use the new state? Consider that I'm using a HookWidget and not a Stateful widget
First if you are using StateNotifiers you should not change the state like that but instead use methods. So you can do context.read(myStateProvider).setLoaded(true);
To listen on state with hookWidget you use
Final myState = useProvider(myStateProvider.state)
@@RobertBrunhage Thanks
Hello. I started watching tutorials yesterday. Can I skip learning Provider and other things and jump to what Riverpod offers instead? Is it okay?
Yep, nothing wrong with that :)
@@RobertBrunhage Thank you for answering my question. :)
I get @Fireship vibes from this channel
Me: Mom I want fireship
Mom:We have fireship at home
fireship at home:
Is Riverpod safe to use in production or is it still in experimental state?
Yes it is, he outlines this in the readme of the package!
When you extend the ConsumerWidget, is it possible to send numberStateProvider as a parameter? I am trying that but my list isn't updating, prob because it's not mutable or something.
In the documentation of ConsumerWidget it says:
A StatelessWidget that can listen to providers. So it's not possible to send int he numberStateProvider as an argument there.
I do not think I follow. What is the reason for sending the provider as an argument to another widget when you can just listen to it there?
@@RobertBrunhage Let's say I have file A where I define my numberStateProvider. It's a global variable and is easily accessible inside file A. In file B, I have defined a class that extends consumerWidget and this file needs to reach the numberStateProvider. How would the consumerWidget be able to access the numberStateProvider? Is there a easy way of handling this?
Maybe one solution is to add the numberStateProvider to another file C, which I then import to File A and File B?
And it's not possible to send the provider through the constructor and listen to it in file B?
@@RobertBrunhage I have tried doing that but it doesn't render the newly added items to the list. I am still debugging why it's not working.
So you watch it in file B?
Have not seen the actual implementation of what you are doing but consider opening an issue towards riverpod. Seems like a bug and Remi is really quick to answer!
Please post the source code for your next tutorials, they're insanely helpful. Thank you for this tutorial.
Have done it for the future tutorials as this one's code wasn't structured in a good way to show source code. But will try to upload it this week anyway!
@@RobertBrunhage Thanks, mate. I've actually copied off the code by pausing the video.
What IDE is this and why is your context menu black?
This VSCode and is not an IDE
I know this video is a bit older, but i hope somebody sees this comment and can help me anyways.
Currently I'm a big fan of BloC. However i thought i give Riverpod a try, as it is one of the mostly used State Managements within flutter.
I actually always try to split my projects in a structure like "Clean Architecture" of Uncle Bob defines. (Data, Domain, Presentation)
BloC fits perfectly inside that concept, as it kind of implements my complete Domain Layer.
I tried badly to force Riverpod into that structure. So that my Presentation Layer doesn't hold any logic, however i have the feeling i can't do this with riverpod, when i try, riverpod ends up in beeing just nothing more than a dependency injection, i guess this is not the way it is implemented for.
Do anyone know some helping Videos/Blogs how to use Riverpod in a structured way, without inserting too much of logic into the UI? It dosn't have to be a Clean Architecture approach, but some sturcture ideas would be cool.
Most Riverpod stuff i saw so far was just scratching the surface :/ I would love to see/read about projects with more technical depth :)
Greetings
Mikro
don't know if you still want this resource, but this video will help you a lot with that czcams.com/video/XnxZLhtkFeg/video.html let me know
Why use "Provider" when you can just simply put the value there as a const ?
I don't understand why u create an UnmodifiableListView 5:15 and trying to .add(value).. :/ What's the benefit ? And on top of that, the documentations says : "This operation is not supported by an unmodifiable list.
"
The UnmodifiableList is just a getter, the list we are actually modifying is a List.
We we are doing .add on the normal list but in the UI we can only access the UnmodifiableList which means you can not change the list in the UI section of your app.
This is super important because in a ChangeNotifier wehen we make changes, to actually rebuild the UI we MUST call NotifyListeners() which we can not do from the widgets but only the ChangeNotifier.
Hope this makes some sense, and a super good question!
@@RobertBrunhage Thank you really much for this explaination, was tired yesterday and did not noticed the unmodifiable list was a getter of the _numbers list...
Thank you again 💪 Subscribed
I want the source code
This seemed to me way more complex than using cubits to manage state
But a great tutorial nonetheless
Reddit got me here
Hmm who could have made that post on Reddit? Hmmmmm 😄
Glad you are here and hope you enjoyed it!
00:28 Replay button.. You're welcome..
uauu too much informations... i cannot understand when is best to use StreamProvider (for example) instead use ChangeNotifyProvider in real life (always for example)! can you made some video about one singolar Providers with example? iam very greatfull and i think is very usefull for who is not expert (not yet) about Flutter (me :) )
GreatWork!!!!! Thank!
Here is a simple real life example on when to use StreamProvider and ChangeNotifier:
StreamProvider: displaying a social media feed; a stream of data. The app will listen to the stream for new post.
ChangeNotifier: changing the state of Like Button. If you press the button it will change the color state to blue instead of grey.
Hope these examples will help you visualize when to use these functions on your app.
StateNotifier :(
Why we need define providers as global functions? I think it's a bad practice.
riverpod doesn't depend of flutter, great!, what is the name? .... flutter_riverpod .... x.x
kinda confusing.
Thanks for the feedback! Something special you thought that could be improved?
import 'package:flutter_riverpod/flutter_riverpod.dart';
class NumbersNotifier extends StateNotifier {
NumbersNotifier() : super([]);
void add(int number) {
state = [...state, number];
}
void delete(int number) {
state = [
for (final loopNumber in state)
if(number != loopNumber) loopNumber
];
}
}
final numbersNotifierProvider = StateNotifierProvider((ref) {
return NumbersNotifier();
});
The type 'StateNotifierProvider' is declared with 2 type parameters, but 1 type arguments were given.
Try adjusting the number of type arguments to match the number of type parameters.dartwrong_number_of_type_arguments