State Management Like A Pro - Flutter Riverpod
ฝัง
- เผยแพร่เมื่อ 5 ส.ค. 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
This is like watching a fireship video!
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!
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! 😊
Someone is currently learning 🤓 Thanks Robert 👏
bro you're literally him
Spent all day trying to pass a file to Riverpod so I can retrieve it and update state. Your vid got me there. Thanks!!
Thank you. Great Video. Now I started using Riverpod.
Bro as a beginner, trying to understand provider, you saved me man. Good job. Subscribe earned.🙏🙏🙏🙏🙏
Awesome, glad I could be of help!
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!
Good intro and surface level explanation of riverpod
Thanks man, super appreciated!
P.s. Good work on the videos and keep it up!
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!
Nice, straightforward and clean. Good work sir!
Thanks, glad you like it!
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!
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.
Flutter Riverpod looks so clean!
Thanks. this is what I'm looking for
Really powerful tutorial, highly recommend
Thanks, super happy that you enjoyed it!
Watched at 2x Speed great video and great info! Keep the great content coming :)
Once again a great tutorial. Thanks a lot.
Thanks Luis, glad you enjoyed the video!
good job mate! also wld love to see a separate state notifier video
great explanation. well done.
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 TH-camrs are covering 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!
Your video edits are sick! My fav flutter guy
Thanks a ton!
Really nice video, thank you!
Glad you liked it!
My heart always "flutters" when I see another vid from Robert 💪🏼🦾
😊 😊 😊
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!
Nice tutorial ! Bro, please make more video like this 🚀
Thanks, more coming!
Great tut! This feels so much like React now.
Man you made it so simple even I understand it ....
wow nice!!
Nice tutorial.
A video about statenotifier video will be great..
Will put it higher on my todo list!
Best of the Best
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?
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
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
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 TH-cam on that
1K Like!!!!!
Great video
🎉
Much cleaner than provider
Clear tutorial
Thanks!
Using the ScopedProvider, how do I access it in a method e.g. onPressed?
The context.read does not work with ScopedProvider.
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?
Hello. Thank you for the easy-to-understand explanation of stateManager. Is the icon model the Fallout series Vault Boy?😃
I read you 😀
Thanks u Sir for this tutorial!
Please do riverpod + firebase auth Sir!:)
Which theme do you use?
please do a separate statenotifuer vdo with riverpod 1.0.0 although its in pre release/dev/beta
Epic intro 🤣🤣 stay cool
Hey Girish!
Glad you enjoyed it, so much fun to create videos this way!
@@RobertBrunhage 👍
Is this all that there is in riverpod? if not what percentage does this video cover about riverpod? TIA for the response!
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.
damn that's good
Me: Mom I want fireship
Mom:We have fireship at home
fireship at home:
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!
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 :)
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.
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
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
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.
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).
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.
i need to watch on 0.75 speed because of how fast you explain lol but at least you explain it good
how to set bool value in statenotifier provider
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. :)
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!
I get @Fireship vibes from this channel
Hi! Do you use riverpod in your projects?
Yep 😊
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!
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)
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!
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
What IDE is this and why is your context menu black?
This VSCode and is not an IDE
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.
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 th-cam.com/video/XnxZLhtkFeg/w-d-xo.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
Reddit got me here
Hmm who could have made that post on Reddit? Hmmmmm 😄
Glad you are here and hope you enjoyed it!
This seemed to me way more complex than using cubits to manage state
But a great tutorial nonetheless
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.
00:28 Replay button.. You're welcome..
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
StateNotifier :(
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