Flutter Provider Package In Depth - StreamProvider

The provider package offers incredibly flexible and powerful state management solutions for Flutter. In this series we take a look at the different kind of providers available in the provider package as well as different ways to import them into our widgets.
The second part of the series covers StreamProvider which provides a great way to link your widgets to streams from Firestore, BLoCs and other reactive sources. This part will build on the app started in the first video in the series on ChangeNotifierProvider. You don't need to have seen the first video to join in. You can get the base application for this video at :
Starter Repo:
Github: github.com/nhandrew/WaxApplic...
End of Video Repo (Minus firebase files):
github.com/nhandrew/WaxApplic...
Social Media:
Twitter: @andyjulow
Patreon:
/ andyjulow

[@hokcheunghung7769]

There is a few changes due to the firebase upgrade: 1. need to add the following to the main.dart WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp(); 2. Need to change Firestore to FirebaseFirestore. 3. As (document) is depreciate, I changed the codes as your other youtube: Stream getReports(){ return _db .collection('reports') .orderBy('timeStamp',descending: true) .snapshots() .map((snapshot) => snapshot.docs .map((doc) => Report.fromJson(doc.data())) .toList()); } It seemed to be working properly after the changes, please kindly comment if it is correct.

[@lukaszglowacz8578]

I love your relaxed yet very informative style! Much appreciated!

[@Ali-hu8jr]

I've just watched. It helps me a lot. I do like the way you explain it. Thanks for your simple and meaningful explanation, Andy. Now, I understand what I should do.

[@basudevnayak8762]

I just love your videos , they are so easy to understand , I especially love your intros they take the stress out of me :)

[@mateogalic7128]

I've learned so much just by watching your videos and trying to implement this stuff to my apps. Brilliant work sir! Greetings from Croatia!

Your videos are outstanding, really great stuff, now I will be able to use Provider in my apps with firebase. I have seen a lot of provider videos and you are nailing it. You make the complex simple. Thanks!

[@EnigmaticRealms1]

Another excellent vid from my favourite youtuber.

[@rohanskoshti]

Loved the scenery behind you...

[@flcpacheco]

Wow! I wish I have know this feature before! Thank you for sharing Andy.

[@sergiochumacero2998]

Truly great content! Learning so much with your vids.

[@hajajmaor]

your videos are awesome!!!! the intros and the dogs makes it even better

[@singhaman092]

Yours Intros are Lit .Excellent Work.

[@hilmanramdhani1323]

love the way you explain

[@heavysoccer7862]

It is a nice tutorial. Awesome. Make more complex content in a simple way like this. Thank you.

[@ripattan7385]

your video is very helpful for my project, thank you sir

[@Surimi888]

Elegant code and structure for abstracting services and data stuff :)

[@JoseDavidCortes]

Landing here! thanks for share well! appreciate the effort!!

[@claudedaiga5897]

Excellent tutorial. @ 44:15 it seems the filter is executed on the client. That's even when the settings is empty and say there are 10 items in the database we still get those 10 items being read irrespective of the filter. I think the filter should be placed before getting the stream.

[@user-vo7lq1jt5v]

Thanks for your turorial, its was very helpful for me. I have question about null exception which I get in first moment of loading app. I mean that in first moment of loading app in Home page Provider.of(context) is null, so there exceptions: The method 'where' was called on null. and The getter 'length' (ListView) was called on null. What is best way to prevent it?

[@Grovermol]

Same question.. I could't figured out the first null error, help please. For the second null error on the lenght, i wrote this itemCount: reports != null ? reports.length : 0;

[@abdulrehmananwar6990]

I want a listview using provider and one add row button(on button tap blank row will add to listview). each row contain two textfield widgets (qty and rate) when user input qty and rate its multiply and display sum in bottom. Please help in this regards thanks

[@PgAzD3licious]

Same problem for me. Would be awesome if we could get a solution for this.

[@abdulrehmananwar6990]

@@PgAzD3licious which problem

[@petkopavlovski8535]

Love you man!

[@JaySharma-ob8nw]

Damn u really know how to start a video i thought it was an apple iphone advertisement

[@azemzejnilovic2893]

sick tutorials

[@basudevnayak4753]

love your videos , I really appreciate what you are doing for the community... just increase the font size a bit.

[@nghiepnguyen641]

the dogs are so cute :D

[@djanogly]

Try hitting command + . in vscode to bring up the autoimport menu on the selected Object! (make sure your cursor isn't also hovering over the object text)

[@josephanthonchungtuyco4720]

Very helpful tutorial! Everything is clear and precise. Thank you very much! Is anyone getting the below error when run coming from Home? The method 'where' was called on null Receiver: null

[@Grovermol]

Great video, thanks. There are some errors i got with nulll values from the reports class, which would be the best way to handle them? and as Claude Daiga says, it would be optimized applying the filter from the begining so not all the items are shown.

[@wearecode9199]

I dont know you , but i feel like you would be a perfect Friend !

[@wearecode9199]

what's wrong about using StreamBuilder though ? it's not much more code and easier to see what stream you are using.

[@andyjulow4388]

I don't mind streambuilders either for a simple interface. If I find myself embedding streambuilders inside of other streambuilders that's usually when I switch to stream provider.

[@9642arvind]

Greetings! Thank you for this tutorial. Your content is on point and your delivery style is very easy to understand. Does stream provider really give us lazy loading functionality without any further set-up? Seems too good to be true!

[@andyjulow4388]

Thanks very much. Actually it is the listview builder that is doing the lazy loading. If we were displaying the data another way it would probably make sense to add a take() to the service or a where clause on the timestamp

[@9642arvind]

@@andyjulow4388 Aah that's what I was thinking too. Will surely try it out!

[@ReshaudAlly]

@@andyjulow4388 So if the listview builder is doing the lazy loading does that mean the initial data pull from firestore is still reading all the documents ? If so then only the ui is lazy loaded

[@Surimi888]

Do you have any advice on reconciling a StreamProvider for a nested collection which is dependent on a user input? For example, user sees list A, B, C, D of documents, and we want to display the StreamProvider for the subcollection corresponding to the user's choice?

[@thomasmabika7291]

wow! this is truly amazing, could you also do states_rebuilder, another state management solution, and maybe focus on how it is different from Provider, I find the two to be somewhat similar.

[@andyjulow4388]

Thanks. I actually haven't heard of that one yet but I will check it out. I am also playing a little with redux on the side.

[@thomasmabika7291]

@@andyjulow4388 how does it compare to Provider? if it's good and simple to grasp, a future video maybe...please.

[@andyjulow4388]

It is still a little foreign to me but I would like to do a future video when I have a better handle on it

[@sadam_khan]

go to 8:20 if you already know firebase connection.

[@akarshs9552]

Wow, you live in heaven

[@andyjulow4388]

I like it.

[@vivek.tiwary]

Hi Andy, thanks for the awesome provider series. Why can't we use factory constructor in report model? factory Report.fromDoc(DocumentSnapshot doc {})

[@sdiony]

I've been working with Stream provider is there a way to add a null check in the stream provider ? Because if we use firebase auth data in order to get stream we get a null check.....

[@Cherupakstmt]

Hi great video. Would like to ask a question. How would i listen to different streamproviders of same type in provider

[@andyjulow4388]

I would suggest putting them in a class and using just Provider to get the class and then specify the Stream from there.

[@Cherupakstmt]

@@andyjulow4388 thanks for suggestion

[@Cherupakstmt]

Hi. When I used where method of provider it initially thrown error saying where is call on null then it build the UI. I guess because it takes some time to fetch data from firestore. How to handle such situation?

[@Grovermol]

Same question.. i couldn't figured it out yet, help please

[@habeebmurtala7318]

Very nice video, but I have two different streams mapping to the same data model, since we need to specify the type of data we want when we want to get data from the provider, how can I tell which of the stream data I want cause they’re both mapping to the same data model or would I need to make different data models for the two streams

[@andyjulow4388]

Hi Habeeb. When I get to that point I put the streams in a class and use plain Provider to inject it into the widget tree. You can then call it with class name.stream1 and class name.stream2. In that case it often works best to use a streambuilder rather trying to work in extra wraps for provider.of or consumer

[@ehsanansari9973]

I followed everything step by step and I get reports.length null :( . idont know why

[@ben_swain]

I have a StreamProvider that formats the data within the stream function before returning it. Later I realized I will need to apply a filter that inputs the unformatted data and outputs new formatted data. I think I need to return the unformatted data from the StreamProvider and filter it outside of the stream somewhere, then make this data available through a different provider.. but not sure. Maybe bloc will solve this

[@andyjulow4388]

Hi Ben. I would look at Stream Transformer and RxDart. You can chain events on to an existing string using StreamTransformer and there also is an opportunity to format data before you add it to your stream.

[@raasankar]

While recording please keep in your mind that .. Will it visible for mobile screen . Unable to view .. Hence i am left out from this video

[@ryansampson7221]

For firebase user auth state would you use change notifier or stream provider?

[@ryansampson7221]

Forget I asked, you have another great video on this. You are awesome.

[@rajvaya9826]

Make videos on streams and stream builders

[@tinoutech5016]

How to use two streamProviders ?

[@senor7857]

Can I do the same with a http.get call to my own API? I mean, use StreamProvider with a Future List of items getting them with a call to http.get

[@andyjulow4388]

Use Future provider instead of stream provider for an API call, but yes you can use it with your API

[@senor7857]

@@andyjulow4388 I am doing it, but the problem is that I need to add items to that list later on, and my list do not update on the screen with the new items... I am just trying everything...

[@scottatkinson6339]

My reports don't appear on the screen when I've launched the app. I added roughly ten by pressing the FAB. But they fail to appear... could you give me some pointers into what might be the issue?

[@scottatkinson6339]

I think i have an async issue, any suggestions on how to fix? Also I have well over 50 records in the firestore db, yet when I scroll it doesn't fetch the next lot?

[@andyjulow4388]

Are there any messages in the terminal?

[@scottatkinson6339]

Andy Julow when I use the list view builder and where it says reports.length for the item count it throws an error due to reports being null. Then it displays the records.. when I tap the FAB button data is added to fire base however it’s not reflected on the app

[@andyjulow4388]

Try updating the var reports at the top of home.dart to this: var reports = Provider.of(context).where((report) => settings.waxLines.contains(report.line)).toList() ?? List();

[@andyjulow4388]

On the FAB part, make sure you have both wax brands activated on your settings page or else they might get filtered out as you add them.

[@TheSoporte]

Where do I have to close the Stream?

[@_archivum]

I second this question. Do we dispose of this stream?

[@blueice1364]

34:05 I get the following red screen error: [core/no-app] No Firebase App '[Default]' has been created - call Firebase.initializeApp()

[@user-nw9ug7bv4e]

void main() async{ WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp(); runApp(MyApp()); } try this

[@blueice1364]

​@@user-nw9ug7bv4e Thank you for reply. I tried your code and it says => Undefined name 'FIrebase'

[@user-nw9ug7bv4e]

@@blueice1364 I think it's because you don't have the firebase_core package. Add to pubspec.yami and run. pub.dev/packages/firebase_core

[@mudso]

@@user-nw9ug7bv4e thank you!!! You saved my day!!!