Flutter Riverpod 2 Tutorial for Beginners | Riverpod Generator

In this tutorial, you're going to learn about ProviderScope, different types of Providers- Provider, StateProvider, StateNotifierProvider, ChangeNotifierProvider, FutureProvider, StreamProvider and modifiers like family and autoDispose; reading providers using Consumer, ConsumerWidget and ConsumerStatefulWidget; different types of Ref's - WidgetRef, ProviderRef, Ref and the methods on them like onDispose, onCancel, keepAlive and onResume; logging with ProviderObserver with the 3 override methods; drawbacks/limitations of using Riverpod, solutions to them and finally generating providers automatically with Riverpod Code Generator.
📌 Discord Server: / discord
Special Thanks: ‪@aadhiarun2230‬
Timestamps:
(00:00:00) Introduction
(00:00:16) Why should we use Riverpod?
(00:00:52) Getting Started with Riverpod
(00:01:21) ProviderScope
(00:03:07) Provider
(00:06:55) Reading Providers using ConsumerWidget
(00:09:17) Reading Providers using Consumer
(00:10:46) ConsumerWidget vs Consumer
(00:13:41) ref.watch vs ref.read
(00:15:58) StatefulConsumerWidget
(00:18:20) StateProvider
(00:25:25) StateNotifier & StateNotifierProvider
(00:43:41) Select Property
(00:47:47) ChangeNotifier & ChangeNotifierProvider
(00:53:41) FutureProvider
(00:59:23) AsyncValue
(01:07:28) ProviderRef
(01:13:52) StreamProvider
(01:18:50) Modifiers
(01:19:15) .family
(01:26:11) .autoDispose
(01:29:42) Recap of all Providers
(01:31:54) Ref
(01:33:54) Useful Methods on ProviderRef
(01:37:18) ProviderObserver
(01:42:24) Limitations of Riverpod
(01:44:07) Flutter Riverpod Snippets (VS Code Extension)
(01:45:25) Riverpod Generator + Annotation
(01:52:55) Limitations of Riverpod Generator (till now)
(01:54:22) Conclusion
Helpful Resources:
riverpod.dev
docs-v2.riverpod.dev
codewithandrea.com/articles/f...
codewithandrea.com/articles/f...
codewithandrea.com/articles/f...
github.com/rrousselGit/riverp...
Connect With Me Here:
Instagram: / optimalcoding
GitHub: github.com/rivaanranawat
Linkedin: / rivaan-ranawat
Facebook: / rivaan.ranawat
Mail: [e-mail]
Medium: / namanrivaan
Twitter: / ranawatrivaan

[@RandalLSchwartz]

In your StreamProvider example, you're not returning 10 items in a stream, you're returning a single item that is a List of 10 elements. In other words, had you showed the type of the StreamProvider, it would have been StreamProvider. It would have made more sense to show a StreamProvider, and for that you would need to change your yield to a for-in loop, possibly with a delay to see the stream slowly being dribbled out.

[@RivaanRanawat]

Some more inaccuracies in this tutorial mentioned by Randal on Reddit. Please take a look at it.
> Doesn't show generated classes, but that would have taken another 20 minutes. :)
> Incorrectly describes some of the legacy providers as not redone yet, when in fact AsyncNotifier and Notifier can replace pretty much everything except StreamProvider, and I understand that's on the way.
Thanks for taking the time and pointing it out Randal, really appreciate it!

[@anshumansharma2251]

here is that example
final streamProvider = StreamProvider((ref) async* {
for (var i = 0; i < 20; i++) {
yield (i);
await Future.delayed(Duration(seconds: 2));
}
});

[@RivaanRanawat]

@@anshumansharma2251 Thanks Anshuman!

[@codewithihsan2182]

In Simple words if someone want to become Pro in flutter then i think Rivaan is best Option.
Thank you so much Rivaan .

[@RivaanRanawat]

Thanks for the kind words!!

[@MaheshwaranVelusamy]

no bla bla... meticulously planned and executed teaching approach. Thank you so much for your valuable time Rivaan

[@DanielTubul]

Wow, such a clean tutorial and very helpful + straight to the point. I'm 20 mins in with my ADHD and didn't stop because of curiosity and enjoyment. Although I already know many of the concepts of Riverpod.
Good job!!!

[@thomasmakrodimos1997]

Best Riverpod tutorial !!!! The thing that makes the difference is the clarity in explanation! Thank you so much Rivaan!

[@RivaanRanawat]

Glad it helped Thomas!!

[@sachinbasnet8258]

i have came across this video for like 100 times. whenever i need a recap about riverpod im here 😅😅 great video❤❤

[@_DiftaFitrahulQihaj]

sir you're the best teacher of riverpod, i've watched many riverpod tutorial and just from you i deeply understand the riverpod is

[@RivaanRanawat]

Thanks a ton! Happy it was helpful

[@willystain9870]

Rivann Thank you so much for your videos.... I dont know why but every time you explain it makes perfect sense for me and its really easy to understand. Good Job!

[@RivaanRanawat]

Thanks a ton 🔥
Happy it helps🙂

[@ZoMbiE4CoBRA]

i've been watching videos of provider for exactly a week, this one is the best, it considers the viewer a complete begginer which is really appretiate.
Thank you!

[@RivaanRanawat]

Glad it was helpful Moha! Thanks for the tutorial review, appreciated 🙂

[@AkhmadKhanifZyen]

thanks for explaining stateNotifierProvider so well. It took me an hour to practice and learn every detail you explained...

[@RivaanRanawat]

So happy it helped!

[@thatsepic371]

Thanks rivaan you always make everything easy great tutorial I was confused and didn't know where to start and you showed up you are one of the best teachers for flutter community

[@RivaanRanawat]

That's epic! Happy you found it helpful 🙂

[@aleksanderwieland6668]

Thanks Rivaan, this video is great! There are very few people that can explain flutter topics as simply as you!

[@RivaanRanawat]

Glad it was helpful Aleksander!

[@sunjowilliammburli3847]

Man! Thanks a lot, Rivaan! All your tutorials have helped me a lot. Looking forward to seeing you make a finance app with Flutter.

[@RivaanRanawat]

Happy to hear that Sunjo! Will get to finance app as soon as possible.

[@nk17x]

most underrated video for Riverpod,cheers mate

[@RivaanRanawat]

Glad you think so!

[@leleemagnu6831]

Truly a fantastic video! Thank you!

[@RivaanRanawat]

Pleasure is mine!

[@elifyucel8261]

you are doing amazing things for your age, more power to your elbow 👏👏👏👏👏

[@RivaanRanawat]

Haha, thanks a lot Elif, appreciate it:)

[@RivaanRanawat]

Riverpod Project Tutorials:
9.5 Hour Reddit Clone: th-cam.com/video/B8Sx7wGiY-s/w-d-xo.html
5 Hour Google Docs Clone: th-cam.com/video/W6vAQdzLcu4/w-d-xo.html
10 Hour WhatsApp Clone: th-cam.com/video/yqwfP2vXWJQ/w-d-xo.html

[@MohitMarfatia]

Can you please pin this comment, or add it in the description?

[@abhinandanraj5660]

Your videos and explanations are awesome.

[@RivaanRanawat]

Glad you like them!

[@matthiasimegi8211]

Once again, a beautiful tutorial

[@RivaanRanawat]

Thank you!

[@mattiasnkonjo940]

Thanks a lot, Ranawat. That's all I needed for my next project

[@RivaanRanawat]

Pleasure is mine!

[@its_suresh_v]

One of the best video to learn riverpod, you have so much clarity in explanation, i love watching your videos superb channel great work🥰

[@RivaanRanawat]

Thank you very much Suresh, glad you like them!!

[@roninspect4357]

I was searching for riverpod for beginner and you uploaded it 🙌

[@RivaanRanawat]

Hope it helps!

[@justworkfine321]

Is it lso.also begginer strat with this or do i need to learn one of them of block getx or provider?

[@RivaanRanawat]

@@justworkfine321 No prior experience with any state management tool is required.

[@sidafra86]

The best tutorial!! Thank you so much

[@RivaanRanawat]

Glad you liked it!

[@satdevlpr]

Excellent Explanation of Rivopod in detail... keep it up

[@RivaanRanawat]

Thanks a lot

[@cromuelbarut9859]

excellent riverpod tutorial
watching this tutorial in your Udemy course

[@seamensclubltd7603]

Thank you, Bro! You are the best!!

[@RivaanRanawat]

Thank you for your support 💪

[@harysuryanto]

Thank you so much for this tutorial!

[@RivaanRanawat]

Most welcome!

[@mahmoudtokura]

I'm convinced to switch from Getx to RiverPod. This was a very nice video. Thanks

[@RivaanRanawat]

Mission Accomplished! Thanks a lot for sharing, glad it helped🙂

[@napo5730]

Great video on riverpod. Thanks bro 👍

[@RivaanRanawat]

No problem!

[@RandalLSchwartz]

You can make the part file with a snippet from the riverpod snippets... it even picks up the filename properly.

[@fabsync]

one of the best videos on riverpod topic.. I am ready for the next one with practical examples..
-> best folder structures for riverpod when
- building a web crawler
- newsfeed...
- simple real time chat (any open source database but firebase or amplify --> love appwrite and serverpod..)

[@RivaanRanawat]

Noted! Project with Riverpod + Appwrite is already in work!

[@SwarajSingh-xs6dy]

@@RivaanRanawat Please note another product udemy clone with flutter and nodejs

[@RivaanRanawat]

@@SwarajSingh-xs6dy Yep, got multiple requests for it.

[@Aboelnasrmo]

Best explanation for riverpod

[@RivaanRanawat]

Glad you think so!

[@vishwajeetpatil9381]

Thanks for the excellent tutorial.
In the StreamProvider example (01:13:52), you are returning a constant list. Adding for loop and delay will be more helpful in understanding the change in the stream.
final streamProvider = StreamProvider((ref) async* {
const int max = 20;
List list = [];
for (int i = 0; i < max; i++) {
await Future.delayed(const Duration(seconds: 1));
list = [...list, i];
yield list;
}
});

[@RivaanRanawat]

Yup, that's right! I made this mistake while explaining StreamProvider. Hope this comments help someone so that they can understand better

[@mohitsaini6642]

Thanks vishwajeet patil

[@nullcodeer]

Thanks Vai . badly needed this ❤❤❤❤❤❤ love from Bangladesh 🇧🇩

[@Anwar.Kabir.]

hey i am also form bangladesh.

[@RivaanRanawat]

Thank you!!

[@crisantus_ik]

Best riverpod video ever thanks

[@RivaanRanawat]

Thanks Ikechukwu, glad it was helpful!

[@hashankannangara8723]

Thanks for the video ❤️

[@RivaanRanawat]

Most Welcome!

[@RivaanRanawat]

20 Hours Dart & Flutter Full Course - th-cam.com/video/CzRQ9mnmh44/w-d-xo.html

[@SyedAhmad-wn2sv]

Thanks , it helped a lot.

[@RivaanRanawat]

Happy it helped!

[@shivaagrahari5525]

wow love this

[@RivaanRanawat]

Glad you like it

[@ortayilberli]

I watched many riverpod tutorials and this guy knows what he is teaching. Thanks

[@RivaanRanawat]

Thanks Ortay! Glad it was helpful🙂

[@azhyabdalqadir4293]

Thanks

[@trickswithandro749]

Bro let me tell u something......
U r Awooosoommeeeee Mannnnnnnn
I learn a lot from u
U are One Man Army
Love from Pakistan❤

[@RivaanRanawat]

Thanks a ton 🔥

[@jashwanthg3680]

Thank you, Rivaan Ranawat

[@RivaanRanawat]

Most Welcome Jashwanth!

[@dolbysoundsofficial9323]

Great 😄

[@RivaanRanawat]

Thank you!

[@asafgoldman8172]

Thanks Rivaan for this tutorial. I would like to ask why your have not mentioned NotifierProvider, AsyncNotifierProvider and AutoDisposeNotifier as NotifierProvider is suppose to replace StateProvider and StateNotifierProvider as far as I understand?

[@faridahmadov5991]

Hey bro thank you so much.Please make a tutorial for bloc also

[@vikashtiwari8360]

thank you brother

[@RivaanRanawat]

Pleasure!

[@sarathrkrishnan6610]

Superb bro

[@RivaanRanawat]

Thanks Sarath!

[@The.SniperTrader]

Please bring Nodejs and Flutter series

[@RivaanRanawat]

Noted! Working on a big series as of now, will get Flutter + Node soon!

[@The.SniperTrader]

@@RivaanRanawat also make a broker app , i have mentioned and explained you on your discord have a look :)

[@bashiruibrahim8443]

Thank you sir

[@RivaanRanawat]

Most Welcome!

[@Omesh7]

thats a great video, would love to see move riverpod stuffs and as for code generation please give some solution for statenotifier too.. thanks

[@wraith3108]

Lovely video.
Can you bring some more new projects with firebase or using ai ml

[@behnamjafari2731]

Thanks Rivaan for this amazing tutorial . Would you make a video about Riverpod with Hooks and explain the differences ?

[@RivaanRanawat]

Sure thing!

[@rr2r2r2ra]

What is the difference between these two, they work the same
//1
ref.read(nameProvider.notifier).state = val;
//2
ref.read(nameProvider.notifier).update((state) => val);
both of these does the job for me which is change the name with whatever I type in my textfield

[@user-be7ui2vs8y]

Great tutorial 🔥 My question is timestamp: 1:49:41, if you look at the method fetchUser using the @riverpod annotation, is this supposed to be async? Or not needed because riverpod will take care of it? Thanks

[@RivaanRanawat]

Thanks!
There's no point putting async because ultimately we will be returning Future. Marking a function as async makes it of the type Future

[@user-be7ui2vs8y]

@@RivaanRanawat Awesome! Thank you for replying

[@sumitmishra3864]

Hey Rivaan first of all thanks a lot for making such kind of informative video. Can you make a video on post an API and taking the user credentials and tokens from the ui screen and using it for making a post request and then use the response to change the ui like after login we can show the user name and his personal details on the ui.

[@sumitmishra3864]

Also make a get request for which also take some inputs from a different screen and when we get the response update the data also tell how to replace all setState that used for filtering or sorting or updating the data and also please tell how to handle different kinds of errors like for different errors we can do different things like 401,403 and or other errors. Like in .when method we are getting data, loading and error but how to handle different errors how I can check I am getting this status code or different code so that I can perform different operation. Please Rivaan make a video in all these concepts so it will be better for us because it's a real time project problem. Thankyou in advance. Hope you will consider my request. I had liked your videos and also subscribed your channel.

[@moeezminhas]

hi rivaan could you please share the extension link for dart data class genrator which you are using as mine give only toMap and fromMap

[@amitjajoo9510]

please create same video on bloc also . Thx for creating this video

[@RivaanRanawat]

Next video of the State Management Series will be Bloc! Currently working on a big series so it might take some time ;)

[@uglypieceofcrap5428]

I not watch it but this will be gret

[@RivaanRanawat]

Thank you!

[@gunan7365]

I need meta programming with dart if you do that well 👍

[@MPRGyanStudio888]

Bro im using windows instaling virtual box and how to yous flutter and vs code androide studio all instaling virtual box or not

[@vishaldas2241]

can you please tell which plugin is used in VS Code that gave instant error description. TIA

[@wog4299]

error lens

[@rajenderkatkuri7642]

This video is a gem.

[@RivaanRanawat]

Thank you Rajender, happy it was helpful🙂

[@isactv590]

how do i create AgoraRtcEngine() provider using flutter riverpod ?

[@moonnight9474]

thank sir ,i hope next video you can make tutorial payment with paypal and stripe 😃

[@RivaanRanawat]

Not the next one. Currently working on a big series, will get to Payments in Flutter while completing it.

[@cyborg_fps]

Which is better to use consumer or ConsumerWidget in the counter example if I only want to update a single text widget in the centre of the screen ?

[@RivaanRanawat]

Consumer. You can wrap the Text widget with Consumer. Because if we use ConsumerWidget, Appbar will rebuild as well. But this is probably over optimisation, doesn't matter that much

[@cyborg_fps]

@@RivaanRanawat Thanks ❤

[@vforcek]

Could be great to show Notifier and Async Notifier as both State and State notifier are obsolete

[@RivaanRanawat]

Yup! Saved it for a seperate tutorial :)

[@emaanuelenan8548]

Hello, can you make a video about undo/redo implementation by using Riverpod?

[@RivaanRanawat]

Noted!

[@DaveJosh-qc5xn]

Can I get the link to the part 1 of this video

[@CodeWithJeet1204]

I couldnt use the data class generator extension even after downloading it
PLS HELP!

[@shashanksingh4708]

Hey can you please make some tutorials on blockchain and flutter, a web3 project using flutter would be awesome

[@RivaanRanawat]

Noted! Working on a big series as of now, will get to projects with Web3!

[@shashanksingh4708]

@@RivaanRanawat thanks. There much content on flutter and web 3 . It would be very helpful

[@maazafridi2090]

do we need to learn provider first before entering into the riverpod?

[@RivaanRanawat]

Nope, you can follow this tutorial without the knowledge of Provider.

[@bilalbilu1661]

bro create a video about api with riverpod

[@richardgideon4959]

Rivaan Ranawat great video but bro you promised the family portfolio bro where's it. But nice keep up am still watching all you lectures to get better bro
One Love ❤️🤝

[@bhabhayt398]

full app banao flutter and node js Like any real time change ui reactive ui game app like ludo
And
I I love your voice ek bar hindi main shunni hai please

[@RivaanRanawat]

Hahaha, noted!!

[@vinodh9492]

Hi Rivaan, have you ever tried get state management , if you did please give us a tutorial on getx

[@MuhammadVaid]

Avoid GetX

[@vinodh9492]

@@MuhammadVaidwhy what's the problem with GetX

[@MuhammadVaid]

@@vinodh9492 search for the video titled "How to Evaluate Flutter Dependencies (or, why I won't use GetX)"

[@RivaanRanawat]

I too would prefer not promoting projects using GetX.

[@MPRGetProfit]

How to add music in Instagram stories and videos one tutorial

[@herbertpimentel]

This is definitely an amazing explanation overall, but it feels like overwhelming. Someone was smoking weed when wrote all this stuff. Flutter it soo out of the regular dev stuff that looks incredible more complicated than should be. thanks anyway 😅

[@RivaanRanawat]

I agree this seems very overwhelming. But once you get used to it, there's definitely no looking back! It decreases the time taken to code things by a big margin as compared to other state management tools. If you get a good idea of when to use what type of provider, Riverpod has many many advantages. I'd recommend getting started with a project. You'll definitely understand by doing.

[@techdistribution168]

could I get source code?

[@urstruelyshanmukha6079]

Why Iam not getting option like “Generate copywith” on quick fix (00:30:28) ? Do I need to install any extension?

[@RivaanRanawat]

Dart Data Class Generator

[@okeyshourovroy2769]

Please ak refresh token implementation flutter ka leke aow, graphql ka 🙏❤️

[@RivaanRanawat]

In line!

[@dhillonj75]

26:40

[@saie8186]

Sir Can you please Provide Source code.

[@RivaanRanawat]

I didn't save it in any GitHub repository 😅
You can find all code on Riverpod website, link mentioned in description!

[@helpersblasters6089]

Same video you upload on udemy 😂 whats going on bro

[@maazafridi2090]

sorry Rivaan i like your videos but this was quite difficult 😒

[@dypisey5666]

Hi Build Full Stack Telegram Clone

[@RivaanRanawat]

Full Stack WhatsApp Clone is already released!

[@l_0666]

myru

[@l_0666]

succesfully wasted 1:54:32 minutes