Exploring Riverpod and building a Todo App | Flutter

Riverpod: Provider, but different. A new state management technique brought to you by the person who made Provider. Riverpod is meant to solve some of the common problems of Provider and also give some other neat benefits. It's legit awesome, you should check it out.
In this video we explore Riverpod and its usage while building a Todo App.
Relevant links:
Riverpod: riverpod.dev/
Todo List example from the Riverpod documentation:
github.com/rrousselGit/river_...

[@Salehalanazi-7]

The more you learn online for years, the less you watch videos. But I'm so hooked on your style, I don't watch long videos usually but damn you understand things so deeply and know how to explain them. I have a lot of respect for you and your work. Just incredible

[@FunwithFlutter]

Thanks so much for this comment. I really appreciate all of the feedback you give me. I'm honestly just learning as I make these videos (I kinda make them for myself tbh), but it's fantastic to hear when other people also find them useful. Cheers man :)

[@Salehalanazi-7]

​@@FunwithFlutter This such a cool thing for you to share with us. I honestly think your method is wonderful and I also like explaining stuff to other people hence it allows you to know all areas to perfectly explain it. Thanks for sharing honestly, Your work is much appreciated, and I'm so humble and glad to hear that feedback motivates you, Do your own thing! Learn more! Definitely use this for your own stuff. I'm cheering for you Mate!

[@flutterdev8703]

Great to see that you made a vid about Riverpod!! It really is the next Provider, solving Providers issues that prohibits us from using it in Prod (therefor having to use Bloc...Meh). Keep up with the great work man! Cheers from New Zealand

[@FunwithFlutter]

I used to dislike bloc, but it's growing on me - definitely check out Cubit (lightweight bloc). But yeah, Riverpod might have stolen my heart.

[@tadaspetra]

After watching this, I might have to use it for a bigger application 😉

[@FunwithFlutter]

Wink wink

[@innovationsapps5601]

Congratulations on your channel and we are waiting for a video about GetX!

[@johnjamesflashman6856]

I will be using it so please make more. By the way I like your rambling because it made it easy to understood everything you explained.

[@FunwithFlutter]

Nice! I'll ramble more then :)

[@hojdog]

This is so nice. It's more like how state is done in vue.js with vuex. Coming from vue to flutter i've been a little confused / disappointed with how different the state management works. Even with Provider, there's so much boiler plate. This makes things much better!

[@mattfrowe7697]

Great video, thanks for taking the time to put it together. New subscriber here!

[@FunwithFlutter]

You're welcome, thanks for joining!

[@FernandoLucaDeTenaSmith]

Tremendous value men. Great video! Already subscribe. Keep up the good work ;)

[@FunwithFlutter]

Thanks for the sub!

[@michaelmboya5085]

So this is how it feels like to be early. Great video as always

[@FunwithFlutter]

Thanks!

[@f00kwhiteblackracismwarsh07]

How did you feel

[@mehmetaltinsoy525]

Very nice video

[@pol12ris]

great work

[@FunwithFlutter]

Thanks!

[@johnjamesflashman6856]

I added your Lit Package to an app I am writing to try Riverpod. Lit worked fine, it saved me time and is easy to use. I look forward to trying phone authentication. In the meantime back to Riverpod.

[@FunwithFlutter]

Thanks John! You didn't happen to test out the Apple Sign in functionality? I also need to get back to Riverpod

[@johnjamesflashman6856]

@@FunwithFlutter No I didn't, I have been a little busy and I must admit my spare time is spent on Riverpod.

[@narayanpoudel434]

Please do make a nupdated video including freezed riverpod and hooks. These are the must know topics in flutter nowadays.

[@h3w45]

Damn this is much better than Provider.

[@FunwithFlutter]

I really like it!

[@chetannager9246]

Amazing Tutorial 👌👌👌👌. Please Make Response Design for flutter UI

[@FunwithFlutter]

Thanks man. I will at some point.. But in the meantime there are some great examples by Rody Davis that you should check out - kzbin.info/door/qc2elhr0N52GVsyNaWtLvA

[@alvechy]

Great video, thanks. I wonder how it scales, if you have only one provider for all states you may create in your app

[@FunwithFlutter]

Nope, you don't only have one provider. In the video I make multiple different ones. They're just "inserted" at the same point.

[@masdzulfikar6201]

@@FunwithFlutter can you please make videos about multiple screen app with riverpod? I have difficulties grasping this public provider concept (coming from native kotlin mvvm). I can create a simple 4 screen app with login, dashboard, list, and create item with provider, but I can't see how I can manage the providers (especially using riverpod) when I have around 50 screens. I wanted to convert my native app with around 50 screens to flutter. Forgive me if you already make that kind of videos.

[@sameerkashyap4620]

A starter project with todos to implement would have been a great addition to follow along

[@FunwithFlutter]

The only reason I didn't was because this is not my example. It's an example taken from the Riverpod repo. But I'll keep this in mind for my future tutorials.

[@sameerkashyap4620]

@@FunwithFlutter Yeah makes sense. Thanks! the tutorial was clear though

[@darkcaster3619]

Hi! Thank you so much for the course it was really informative! I have a problem in which when I use this package with device_preview it gives an error. Can you please check that out? Thanks again.

[@FunwithFlutter]

What is the error you're getting?

[@bohdanlashko875]

👍👍👍

[@EmmanuelEgomson]

Nice tutorial, I tried using the Compute() and it seems it is no longer supported, any suggestions?

[@FunwithFlutter]

All of the Providers now function as compute🤗. So it's easier. Check the documentation for examples!

[@chrisodonnell86]

Awesome video! If using hooks_riverpod, does this replace all stateful widgets with HookWidgets going forward? Is useMemoized/useEffect a substitute for initState? Is there a downside not be able to call setState? Say if I have a function that runs when i click on a button, how would I update the state to reflect the new value of a text widget in the build for example?

[@FunwithFlutter]

To answer your last question, Riverpod is your state management. So you can create StateProviders to handle the state, instead of using StatefulWidget. But you don't have to use HookWidget (only if you want to use hooks). You can instead use a ConsumerWidget. Or use a Consumer() widget. There are a couple of ways to read the providers. Suggest you take a look at the docs. But I'm making an updated video on this. Should hopefully release tomorrow

[@chrisodonnell86]

Fun with Flutter Awesome thanks! What do you prefer, using hooks or the traditional consumer way for riverpod?

[@chrisodonnell86]

Looking forward to the next riverpod video! 🎉🎉

[@FunwithFlutter]

I use the normal Consumer one, unless I plan on using hooks as well. Using wach(provider) is nicer to read, than useProvider(provider)

[@rubenruiz3888]

thannks for the video. just a question, why do we have to create a new entire list on the methods add, toggle,edit and remove ? can't we just simply use the List methods of dart(add, removeat and so on ) ? thanks

[@FunwithFlutter]

'Tis a good question. If you're coming from ChangeNotifier, then sure, you can modify the current list and then call notifyListeners(). But here you are triggering the "notifyListeners" (although it's something different with StateNotifer) by setting the state to a new value. Take a look at the setter for the state variable in the package's code. Also, if you modify the list directly then it will still be the same instance. Basically the StateNotifier will only trigger an update for it's listeners when the state is reassigned. Could also have used an Immutable list in this example, with something like pub.dev/packages/kt_dart. There are benefits to using immutable collections in general.

[@rubenruiz3888]

Fun with Flutter thank you so much for the explination. It’s really kind you took your time .

[@rubenruiz3888]

@@FunwithFlutter I m still wondering how can be more performance the StateNotifier way of creating a new entire state. For example on toggle method my logic says doing this void toggle(String id){ state.forEach((element) { if(element.id == id) element.done = !element.done; }); } would be more performance. however, I have to hot reload each time the app to see a change. I just see it more counter-intuitive. Thank you

[@caballero75RS]

Hi. I'm already on Master channel, flutter upgraded to 1.20, what else i need to be able to compile to desktop on windows? I don't have folders windows or web when creating a project. Thanks

[@FunwithFlutter]

> flutter config --enable-windows-desktop > flutter config --enable-web And then run this in the project directory. This should create the web and windows builds > flutter create .

[@caballero75RS]

@@FunwithFlutter Thanks man. You are awesome.

[@minimerceloki]

does computed still exists? couldnt find anything in the docs and i cant call it on the code

[@FunwithFlutter]

Nope. Now every Provider works as a Computed. So it's better

[@narayanpoudel434]

is Computed() not supported now? I got a red warning where it says undefined name.

[@FunwithFlutter]

This is a really old video. There has been big changes. Compute is now in every provider. So just create a new provider and that will only update if the value changes

[@thomasmabika7291]

amazing video! Cubit next please?

[@FunwithFlutter]

Get out of my head. I was actually planning to do Cubit first and then last minute decided to make a video on Riverpod instead.

[@istealpetvideos]

@@FunwithFlutter also please give your thoughts on which is objectively better/which one feels better.

[@andrewparris5372]

How did you get "Windows desktop(windows-X64)" as an emulator device in VS Code?

[@FunwithFlutter]

Check on the Flutter website for desktop support.

[@pradeep422]

15:18 if its a null then its empty list(just improvising)

[@RaymondAtivie]

what font do you use please?

[@FunwithFlutter]

Cascadia Code, I love it

[@tsbaurzhan]

Why we need Providerscope, if all providers are global and available to all widgets directly?

[@FunwithFlutter]

It's the point where these providers are exposed into the widget tree. The providers are accessed from the ProviderScope, not from their global initialisation.

[@sanketsingh794]

computed is no more available?

[@FunwithFlutter]

Nope! Normal providers now act like computed

[@chinmaysarupria]

Hi, You used todoListProvider.read(context).remove(todos[i]); but this doesn't work at all, it says read isn't defined for StateNotifierProvider so I am not sure how it worked for you. I looked up Remi's code and he used context.read(todoListProvider).remove(todos[i]); which worked for me too.

[@GianMarcosAguilar]

I think there was an update to Riverpod between this video and now. Computed() was also replaced and merged with Provider()

[@FunwithFlutter]

Very correct

[@FunwithFlutter]

I'm making updated videos on Riverpod that goes into greater detail and cover all of the updates. The first two vids are out and the third is coming soon.

[@GianMarcosAguilar]

@@FunwithFlutter very very much appreciated!! 🙏🙏🥳

[@GoodLife-ru8di]

Use this: context.read(todoListProvider).remove(todos[i]);

[@banglafactsteller6780]

plz make a full video api calling with river_pod package or explain river_pod/examples/marvel/ app

[@FunwithFlutter]

For sure, I think I'll be making a lot more vids about Riverpod

[@scottstoll-dn2yx]

Computed no longer works, Remi got rid of it in 0.6.0. Now, all providers are computed: github.com/rrousselGit/river_pod/issues/80#issuecomment-674173471

[@FunwithFlutter]

Thanks! Do you know of any good examples (repos) showcasing Riverpod?

[@mfundo3361]

Is that a South African accent I hear?

[@FunwithFlutter]

None other 🇿🇦

[@mfundo3361]

@@FunwithFlutter sick boet! Well done!