Flutter Provider - Advanced Firebase Data Management

Learn how to use the Provider package to simplify data flow in your #flutter app and react to #firebase realtime streams across the entire widget tree. fireship.io/lessons/advanced-...
Provider pub.dev/packages/provider
FlutterFire github.com/flutter/plugins/bl...
Enroll in Flutter Firebase - The Full Course
fireship.io/courses/flutter-f...
Take $10 💸 off a PRO membership with code: b9uf1v4U

[@vtitsboti9815]

Can you pretty please make an updated version of this video? :)

[@samuelnihoul3159]

Yes, it's unclear how to setup the StreamProvider now :( It requires a value and an initial data but what do we put in initial data?

[@NickFehlinger]

@@samuelnihoul3159 You can put null in the initial data if there isn't cached data you want to load on init. Especially for authentication you want it to return null unless there is a logged in user.

[@degonar3528]

This way of teaching (presenting a problem and solution) about something like a third-party package is SO good. I hate it when tutorials just throw stuff and say "use it" and don't explain why can't I just use built-in stuff, which is often much easier to understand as a beginner. Thank you!

[@iamfirdous]

Please make an updated version of this video. BTW, I love all your videos, they are crisp and clear, and you are always straight to the point.

[@ManOnTheMoon2131]

This was a great tutorial! Given its success, I think you should definitely come out with an updated version! Almost everything is outdated and/or deprecated.

[@philippdice9483]

Thank you so much! You have such a nice way to write clean code eventhough some things getting quite complex! You helped me alot and I was able to save a lot of boiler plate code!

[@joshuanovak919]

"Beer. Temporary solution." - If i wasn't already subscribed that would make me subscribe right there lol

[@JohnEGledhill]

Excellent timing with suggesting Provider ... since at Google IO 2019 that is what was recommended. You got skillz.

[@TwistedDestroyer99]

Does provider work with BLOC, or is that an alternative approach?

[@Lensbreak]

@@TwistedDestroyer99 good question, anyone has answers?

[@luisponce3580]

Im in the 7:07 minute mark and i stopped the video just to say that this video is very awesome!! I didnt know that there was the spread operator, good stuff!! Amazing video so far

[@blessingchelinje9317]

So far the best tutorial to learn the provider. 1000Likes from me

[@seunghwanjeong5348]

so amazing !! this is what I was waiting for thank you !! :)

[@ssokurenko]

Top quality content! thanks Jeff

[@Fireship]

Thank you Sergey

[@ShashankMSuresh]

Ma name a jeff! 🤣🤣🤣 #22jumpstreet

[@akhan2501]

I promise to buy the advance course, as the basic intros have helped me land jobs in flutter

[@SilasSWF]

Excellent tutorial. Thank you!

[@storylineteam]

As a game development company, trying to get to the app dev zone for our clients, we find your channel great! Coming from a .Net background angdbeing a small company, we decided to use Dart and flutter, mainly for the great merging of Composition ant OOP. .. Please Conceder on doing a video about end 2 end encryption on firestore data, as this is the most important not covered topic out there... and apis like Virgil are too expensive for small companies and individual devs and using user password as a encryption key prevents the data to persiston password changes. Here in Europe, with new personal data laws, firestore is useless without the ability to encrypt data. Continue your great job!All the best from Greece!

[@motta021]

Thank you Jeff. I love your videos.

[@crossmetz1372]

I was just watching google I/O about provider and boom , you post this

[@MultiTelefono]

I love the last tip!!

[@basheeral-momani2032]

That's awesome thanks for sharing this part,

[@JayPerf]

holy crap this is a good one hahah you are the best Firebase resource on the web dude, and the flutter stuff is also the best out there

[@Fireship]

Thank you Jason!

[@JayPerf]

@@Fireship Seriously, I was about to head down the nested widget stream road you talk about, and this video was a revelation for solving that issue. I worked through your Firestore/Angular series before discovering your stuff on Flutter and started to try to teach myself that, and this is by *far* the most comprehensive "advanced concepts" channel out there

[@fawazjoseph878]

Thank you for this video. It really helped me solved a big problem with my app

[@Fireship]

Glad to hear that, provider solved many of my problems

[@Anstroy95]

Thanks a lot for the explanation, I want to be like you one day 💪

[@braindongle]

This knowledge share is pretty incredible. Getting started with Flutter is easy, but the "ok, I'm going to build a real app" part is still evolving to say the least. Choosing a state mgt and dependency injection solution is coming along (Thank you Remi Rousselet!). But how does one approach client-server communication in a real-world app that uses Firebase? Where is your source of truth for the data model? Where do you keep global state? ...and on and on. So many questions. Great answers here.

[@jaydanu]

Hey can you share which VS Code Theme are you using? I can't seem to find the exact same one and I like the color scheme, it's easy on the eyes and the contrast is good.

[@newtonmunene]

Wow, that factory Class.fromMap trick is totally awesome. I can't believe I've been struggling to create classes from maps All this time

[@oztech]

I know we need this, but is there any way we can automatically deserialize from map to object?

[@anderslovbrand]

I enjoy and use many of your patterns! However when abstracting with Collection , how can I pass arguments that makes me apply where- or orderBy-rules?

[@danhemingway5780]

Great video. Quick question, is it possible to run calculations using a StreamBuilder as a class and then access the output of those calculations as Provider? Rather than run the repeat calculations at each required part of the app.

[@mawulijo]

The gif in the intro keeps distracting me. hahahahahaha. Now I can write less code for the same results. Very grateful Sir Jeff.

[@drdDavi]

You are a fast talker and alway paste the code instead of typing. But your videos are absolutely informative and clear! This one was especially helpful to me! Keep up the good work man! Flutter && VueJS && Firebase all the way.

[@leofonseca8144]

you can slow down the video to 25%. then watch it at 50% then at full speed. typing wastes time. Im just grateful his english is crystal clear, as the subject matter already demands your full attention. a lot of other fluffer channels fail miserably at this.

[@RobertBrunhage]

Great video, will have to check out Provider soon 🤔

[@Fireship]

It's really underrated, I've been enjoying it!

[@RobertBrunhage]

@@Fireship Using BLoC right now so that I can call a function from the BLoC to update other UI when data is updated in Firestore. Is this something that is possible with Provider? Edit: Using provider now and replaced the way I provide my BLoCs. Really cleans up the code!

[@AR4U303]

@Robert Brunhage , what you mean? Using provider with bloc pattern??

[@Lensbreak]

@@RobertBrunhage can you please elaborate a bit?

[@eduardogthiesen]

Great video! I was wondering though, if, let's say I have 1000 documents in a collection, for each time I call Provider.of in a new screen Firebase will count it as 1000 reads?

[@emmanuelogbewe2334]

Great vid!!

[@fpsColton]

When you setup your StreamProvider with the onAuthStateChanged, I notice that for a brief moment during the app's startup, that the value provided is null. How can you implement a loading page to appear when you only have null or not null to test with in the child widgets?

[@danchatka8613]

Thank you for your great tutorials. It would be nice if you had a simpler introduction to Flutter Provider. It would be very similar to this tutorial, except: a) Don't base the tutorial needing a server-side resources. Maybe reading a local config file would be a simpler way to get params that are needed by different widgets in the app; b) skip discussion of other Flutter state management techniques or their history. That topic is better suited for an update to your Flutter state management Grand Tour tutorial.

[@saifhakeam8599]

YOU SIR..... are a legend

[@user-fh4xo2pc2d]

Would you cover using other backend like node.js with flutter? Thank you for all the flutter tutorial. I'm buying your course!

[@Fireship]

Yes I would consider that. Dart has a good HTTP package and I've also been thinking about a graphql vid for other backends.

[@aislanarislou]

@@Fireship Graphql would be awesome!

[@raul286162]

Node plz also would like golang

[@derrickawuah9477]

Great video Jeff! I definitely like this better than Bloc for my use cases. Do you plan on covering Flutter testing in the future?

[@Fireship]

Yes, testing in one my video list, but no exact timeline yet...

[@kevinbenhoff3560]

Would you say that StreamProvider is a resource expensive way to manage state as compare to say ChangeNotifierProvider? In your example you listen to a User stream which is cool because if anything is changed in Firestore it is immediately updated in the app. However, this seems to me like it would be a fairly resource intensive (battery, wifi, data xfer) way listening to the database for changes that may not really be all the frequent. Should StreamProvider with regards to data in Firestore be reserved for things that require instant updates (like notifications for example) while data that doesn't change too often be handled by ChangeNotifierProvider. Thoughts?

[@storylineteam]

I have a question about listening to firebase changes via streams... Is it possible this approach to be more expensive than implementing some time based or manual refresh method? Especially on apps with a large userbase? I mean, if a user remains for a long time to the same page that makes the dispose method useless..

[@lyseihakh]

Wow so good content. thank you

[@Blues_unicat]

You are hero of flutter-er

[@YuppinYanni]

Are you coming out with a Flutter for beginners course soon or just the Flutter Firebase course for now?

[@lukaszs9648]

Love it!

[@vidy1983]

can you explain the difference between the streamprovider and streamprovider.value constructors? its hard to find anywhere.

[@kiranjisac4745]

Hi What to do when stream provider is called on null when The. Collection is not created yet

[@quirky_hehe]

Is there an option to buy the flutter course alone without a subscription?

[@shashankrewankar2838]

stream provider asks for 'initialData', when I hot restart, the child widgets take the 'initialData' instead of the most recent data from the stream. I want it to take the most recent data instead of the value given in InitialData. Anyone knows how I can do that?

[@tirupatirao7521]

Peak Video tutorial for flutter

[@muhammadchhota4463]

Is multi provider share data between multiple pages?

[@rutayisirewilly1217]

Hello could you tell me if possible how to handle errors in stream provider. thnks

[@immathiasyde]

How can you use the Realtime Database instead of Firestore?

[@kameshvadivel9459]

Sir,I am using grid view builder to load images from friestore, when I scroll down images are again loading, I also tried cached network image but it not worked,how to solve this problem?? Can you help me??

[@Hell2Night]

I learn about this package in the Pragmatic state management session of the Google IO. This is great, now, I don't see the point to use such things as BloC for state management. Provider make it easier, and reduce boilerplate.

[@Fireship]

That was a good talk. I like the flexibility of Provider and you can even use it to roll out your own Bloc-style solutions.

[@josehmoller2059]

que buena chamba compañero. good

[@SafdarAliShah_TimeTraveler]

i will be the luckiest guy to work with you on flutter and i m Sure that will be everything to learn everything...

[@lwasinamdilli]

please make an updated version...... A must watch for flutter developers

[@parwandaha3091]

I still cant make the connection between the user, superhero and weapons. where did the users come in the picture?

[@antonivanov5751]

Thank you very much for your videos. Could you answer - what's the font in your VS Code that you use?

[@deneb6139]

I think it is "Fira Code".

[@feutioclide7345]

How can i Provide 2 streams in the MultiProvider array with one dependent on the other?

[@rajdave9862]

Please tell, from where you are learning all of these because I am not able to learn from docs. So please tell us your sources to learn?!

[@JochemToolenaar]

Awesomeness!

[@aislanarislou]

Hey @Fireship, Do you think Cloud Firebase is capable of replace an database architecture composed with some tables (I'm using Postgres) that have many-to-many relationships? Those relationships frequently have many-to-many between 3 tables.

[@Fireship]

It's probably possible, but might not be practical. Sometimes it's better to duplicate or partially migrate the data you want in Firebase. Every case is different.

[@maximilianystalloyd6610]

How can you update the data from a widget that uses Provider.of?

[@ddean3732]

Great vid. I have a question... Can I contact you directly?

[@nested9301]

why we using the factory consturctor why not a simple function?

[@ethanzhang8932]

just curious what plugins are you using in the VS code editor, they are looks awesome, could you share the plugins?

[@Fireship]

I will make a video that reveals all this stuff very soon :)

[@doodies1234]

hey! any thoughts on fish redux?

[@RoughSubset]

Hey Jeff, how do you get those emojies in your IDE and in Firestore?

[@Fireship]

They are actually just strings so you can simply copy/paste them emojipedia.org/

[@politicallynotcorrect2968]

Can you talk about more in depth on all the providers options like providers stream ect...

[@VishalDesai711]

what is factory return type in SuperHero?

[@chinmayagarnaik6458]

Please can you make a video on how to retrieve double value or geo point from firebase

[@happynewyearw]

But isn’t provider still highly tied business logic with widget tree? For example, when we have to put widget in the child of Multiprovider? When the app scale up or we have to move widget and functionally around, there’s still a lot of refactoring to do, unless we put the multiprovider at the very top of the widget tree?

[@Fireship]

That is true, but you need some way to tell the framework where its data dependencies are located. I think Provider does this in a way the fits the ergonomics of Flutter well.

[@ixGeneralz]

can we have a vidoe for many-to-many relationships using this logic?? thanks

[@0x4ym4n]

Great!

[@bhanukaisuru2618]

Great..But StreamProvider.value( change on Provider 3.0.0. Please change it in your doc.

[@oliverbytes]

What if the Firebase User changes it's display name suddenly.. will it be updated automatically by the Stream or you'll have to manually refresh the FirebaseUser?

[@Lensbreak]

good question. did you figure out?

[@oliverbytes]

@@Lensbreak yes I did :)

[@tarunblaze]

How do I Implement my isEmailVerified using provider

[@flutterkhouse7498]

What's the intro song's name?

[@peekpt]

I've been playing with provider, seems to be the next thing

[@BeastinlosersHD]

When putting your StreamBuilders inside of providers: [] in MyApp, change it from stuff(lazy to type it).value(stream: FirebaseAuth.instance.onAuthStateChange) to stuff(lazy to type it).value(value: FirebaseAuth.instance.onAuthStateChange) This is because when provider moved to v3 they broke a bunch of stuff from the previous version. You can look into it in more detail on their Github repo's readme

[@maelstromgames5832]

you are a god, was trying to figure out what the deal was

[@jonathankumar2052]

Can you update this or the blog post to v3 of provider, there are some subtle differences such as different parameter names and etc.

[@ChristianJosephs]

@fireship this is a real thing. The syntax changed with the update and the blogpost isn't up-to-date anymore. I think that can be fixed within 10min work?

[@jonathankumar2052]

@@ChristianJosephs agreed, its completely different, although the readme does guide you through the transition, it could be a bit confusing for flutter/dart beginners @fireship please try to fix this.

[@yvesboutellier336]

please do this video again but with riverpod

[@RudeboyJackson]

I'm trying to implement this, but getting the following error at this line: StreamProvider.value Error: "The class 'StreamProvider' doesn't have a constructor named 'value'." Could someone possibly explain what I'm doing wrong? Will really appreciate it!

[@RudeboyJackson]

Ah, had to update the Provider package

[@E-Hub_01]

simple but implementation is very complex.

[@Lensbreak]

BLOC or PROVIDER ? what is better in 2021?

[@AbdulMunim-kx6np]

For me it's provider

[@AbdulMunim-kx6np]

Because i only.know that not the bloc pattern

[@fuser312]

Provider is definitely better and easier but a lot of recruiters are looking for developers with BLOC experience

[@Juliapak]

Hmm I just created some classes to feed the data from firebase firestore to my widgets

[@Mohamedhassan-if8ww]

Can i ask you something . how does the WeaponList find the weapons weapons = Provider.of(context); and you didnt evil put that stream in the multi provider

[@gmmkkgmmkk6168]

I am confused also did you find solution?

[@Mohamedhassan-if8ww]

@@gmmkkgmmkk6168 No just waiting for his answer maybe he can explain how the cycle goes or we are missing something

[@gmmkkgmmkk6168]

What is your email?

[@pubgkillers4537]

The method 'map' was called on null. Receiver: null Tried calling: map(Closure: (Weapon) => Card) This is the error that i am getting when trying to use your tutorial. Please helpp.

[@vinceramcesoliveros6739]

Timestamp from this video?

[@kotivideos7140]

what you prefer to use? provider or rxdart ?

[@Fireship]

They serve different purposes, I actually use provider in combination with RxDart. Rx is useful when you need specialized control flow over the stream itself.

[@adebajooluwaseyi2124]

one year and still here

[@edbienes]

Please cover svelte and firestore :)

[@jaigohil4963]

@Fireship can you make a video flutter app deployment both on ios and android? And other lisencing stuff that goes with it!

[@Fireship]

I may do that in the future, but I cover the deploy process in the full course for both google play and apple.

[@carlospedroza7114]

Awesome tips and tricks! Keep the good work! There is a new version of the library (now 3.0.0) at pub.dev/packages/provider, and Provider now throws if used with a Listenable or a Stream. We can disable it with Provider.debugCheckInvalidValueType = null;

[@abhishekbutola8294]

What if streamHero returns null? I am getting error on model file. The methos '[ ]' was called on null

[@abhishekbutola8294]

nvm figured it out

[@abhishekbutola8294]

What i did was return the .forMap() with default values Map but the problem is that first I am getting the error screen showing null then its rerendering the default values instantly.

[@darkchoclate]

wow... it's interesting to see how dart has changed dramatically in last Frew years... Now it always Buggs me to add const modifier and null check...

[@erperejildo]

3:42 what's that extension called?

[@beloArgentina]

For enable that ide menu? It's just VS Code with Flutter and Dart extensions

[@TimeoutMegagameplays]

I still don't get all those state management providers, why not only use a StreamBuilder? You have to write lots more to code to achieve the same result with the other solutions.

[@Fireship]

Provider does not require extra boilerplate. It's actually less code than StreamBuilder (in fact, its syntactic sugar for it) because it manages the subscriptions for you, so you can treat the emitted value as if it were synchronous

[@TimeoutMegagameplays]

​ Fireship ​Oh I didn't catch that synchronous thing, that is actually pretty useful stuff.

[@oztech]

I refactored my code from using Redux to BlocProvider and now I need to refactor again with Provider :-) ha.. but the Provider seems better than my current solution,,, only if it scales well.

[@oztech]

wait.. how do you change the value (state)?

[@felixo9234]

Flutterfire 🦄

[@andreafeletto]

You never know the knowledge you will need in the future... For example I could have never thought than knowing the channel milleaccendini would have helped me with flutter development.

[@willielassiter]

In your "Flutter" playlist, videos 8, 9 and 10 look to all be the same: "Flutter Provider - Advanced Firebase Data Management". you might want to take a look at that and clean it up if i'm right... or not....