Simple Beginners Guide to Streams | Flutter and Dart Stream Basics
Вставка
- Опубліковано 10 лип 2024
- This video covers the most basic functionality around streams. I have a bonus tip in there in streams and a thank you to the community.
00:00 - Intro & Setup
01:03 - Stream Creation
01:30 - Listen to stream
02:16 - Add value onto stream
03:12 - Stream Management
04:42 - Multiple subscribers & Bad State
05:10 - Single Subscription Stream
06:06 - Broadcast Stream
07:25 - Manual Streams
📚 Written 📗: www.filledstacks.com/post/a-c... - Наука та технологія
Excellent work. Clear structure, well-paced, no overhead or useless information.
Thank you. Exactly what I was going for
You are the master of Flutter. Thank you!!!!! I never find a channel like FilledStacks that is incredibly clear and simple for understanding the concept of dart/flutter!!!😎
Thank you Venom 👻 I appreciate your very kind words. I'm happy you found the channel, welcome 😁
Thanks from Brazil. Great video. Very very clear and direct to the point. Can wait for the next videos !!
Thank you for the feedback ❤️ much love from South Africa 🇿🇦🇿🇦
You know a video is awesome when you wish you could've watched it when you were starting out. Thanks, Dane, for another great vid!
That's a great compliment! Thank you man. I really appreciate it. I'm happy to hear it helped, Streams are a large topic but I think this basis is a good place to start.
Great content, clear and concise. Really appreciated!
I'm very happy to hear that. Thanks for leaving a comment.
Your videos are different my good Sir. You have been nothing but an absolute help in my development as Flutter/Dart developer.
Thanks for the great feedback Katlego. I really appreciate it :) I'm happy to help
Excellent, thanks for making this!
Thank you. you're very welcome 😊
Awesome Dane . This has given me good clarity on streams in flutter
That's good to hear! Thank you your watching :)
Wow!... Straight to the point!... I learned so much in such a short time. Thanks!
Awesome!! I'm happy to hear that
Wow! What an amazing explanation of stream.
Thank you. Much appreciated 🤗
wow, great explanations. thankss
It's my pleasure! Thanks for watching
Loved it. I have slowed down speed to 0.5 and followed every step and done :-) .
haha! Awesome :) I like to keep the videos dense with information so slowing it down is a good idea :) Can you believe some people watch my videos on 1.5x
Thank you from Nigeria.
I always look forward to your videos
Thank you ❤️ and thanks for watching.
Thank you, this was helpful
Very happy to hear that. Thanks for watching!
This was really helpful thanks!
Very happy to hear that. Thanks for leaving a comment about it.
It's perfect!Thanks!
I'm happy to hear that. And it's my pleasure making the video.
Thank you for taking the time Dane.
You're welcome :D
Awesome tutorial, was great help, thank you!
I'm very happy to hear that, thanks for letting me know.
Awesome video!!!
Thank you! :)
This is a great way of explaining stream logic in a very simple way!
Thank you! I'm happy to hear that you think so 😊
Thanks, amazing video as always
❤️ Thank you kind sir
Great man
❤️
big heart for u
Thanks a lot! I appreciate you watching
This helped me a lot most especially when I had a problem manually creating streams and the other kind of stream from the StreamController.
I'm happy to hear that. Thanks for letting me know.
VERY good, subscribed.
Thank you Theo! I appreciate it.
very straightforward, thank you!
Exactly what I'm going for. Thank you
thanks for this tutorial, this is really clear and helps me a lot to understand how to work with streams.
That's awesome man! Thanks for watching
really helpful..Thankyou
I'm happy to help. Thanks for leaving a comment.
I have watched 4 tutorials about streams and yours was the last and best one! Now I understand what stream actually is. Thank you!
That's awesome! I'm happy to hear that. Thank you for leaving a comment and letting me know.
Stream was something I was afraid of, now I love it, thanks to you man
Awesome! I'm happy to hear that.
This is an absolute sorcery D:
What a clear tutorial !
Thank you ❤️
Haha I am the code magician 🧞♂️😊😎🧚🏻♂️ Thanks for letting me know.
Finally, I understood how streams work and how to create them, Thanks a lot buddy👍👍
That's awesome man! I'm happy to have helped.
awesome explanation, well done.
Thank you. You're very welcome :)
Nicely done
Thank you! I hope I covered everything you needed :)
For some reason streams are quite confusing for a beginner but thank you so much, your explanation is priceless.✨✨✨❤
It is, this is the reason I wanted to make this video. It's not that difficult if you break down the smaller concepts behind it.
Been struggling for days in the articles until found this !
Wooohooo! That's great. Thanks for letting me know. I'm happy you found it useful
Great work
Thank you
always clean
I try my best :)
Thanks @FilledStacks for this.. I really needed to understand streams properly... You rock!
Can you give real cases of when would using streams is advisable for real life projects please?... Other than receiving results from Firestore.
When you have functionality that requires continuous updates to be handled the same way. Messages coming through, input events from the user, key inputs, anything really. Streams are another tool that you can use to reduce boiler plate code. If you want to sync data across your app you can have a stream that 10 UI elements suibscribe to and as new data comes in they can all update at the same time. There's lots of use cases for it. But like everything else it's just another tool to use when required.
Thank You.
You're very welcome
Thank you brother this is so helpful tutorial can you make stream builder tutorial ?
You're very welcome. I don't think I will because I don't use that in production. I only make videos about code I use in production.
Best explanation! Google should hire you to do tutorials!
haha, well I am a GDE so they hired me without paying me lol
Great tutorial! I would love to see a tutorial of sending video in packets using streams
Thanks Everman, that would be a cool tutorial. I guess in the concept it would be the same as reading chunks of a file from disk and emitting the values over a stream. Not likely that I would do that in a video, since it's an implementation details of a specific use case. There's more broader topics I'd like to cover first. It would be a normal file read in a loop while file.hasData() and you'll yield a List that you'll send up or you can use file sending functionality from the http package and you don't have to do that 😅
My first subscription to a fellow South African. What city you from? And big ups for answering every comment.
Firstly, Thanks very much man. Secondly, how crazy is it that I'm your first SA sub. There should be more South African youtubers out there (outside of vlogs). I live in Paarl, Western Cape. Moved back here a few months ago from East London, before that Durban ✈️
Also. Gotta reply man, if people are willing to give me their time the least I can do is answer questions or concerns they have.
thanks
You're welcome :)
This is good Dane. Could you provide an example of a real world implementation of streams
Thanks. I've done that in this video :) ua-cam.com/video/qa6A2TOqY0A/v-deo.html
What is vscode extension used in the video to get widgets in the tree model?
It's called dart code. Search in preferences for flutter ui and enable both check boxes that come up.
Thank you sir for this knowledgeable video,
But i have a query , what is the benefit of this stream which uses " While " clause. please enlighten me is it takes less data(internet) then Future which uses "while" for this kinds of stuff .
You're welcome. There's no benefit to it. I was showing how you can create a manual stream out of a function without using a controller. If you don't need it you shouldn't use it.
I am listening to a stream which emits the Sms whenever a new sms is received, could you please tell me how the same can be achieved even when the app is running in the background? Thanks in advance
The same can't be achieved through those same patterns. The sms will be handled by a background handler. You'll have I think 30 seconds to do any background work without the app launching into the foreground. Read about background services in Android and ios
When do you know to use 'stateless' widgets (MyApp), vs state widget (_MyAppState)? BTW, a second after the 1m22s mark, the code appears "_MyAppState createState() => _MyAppState()" was this auto-generated when you replaced the "stateless" widget, or did you enter that manually?
Regarding canceling the subscription when your app disposes.. What does the '?' do in 'streamSubscription?.cancel()' (4m18s mark). I would have assumed it's a typo, but Dart didn't seem to complain!
Whether calling the default single-listener Controller constructor.. or using the .broadcast version, can a class from another file get a handle to the controller.stream and listen for events.. or only functions within _MyAppState. Similarly, can any function, either within the class or outside of it, push things into the pipe (controller.add(12))?
Does the 'async' keyword in onPressed means that the GUI will still be responsive while 'await'ing the data? i.e. what happens if you just call the Future getDelayedRandomValue() async; Similarly must Stream/async*/yield always go together?
Yes, that code was auto generated. Please keep in mind that my videos is not for beginners in programming. It's for beginners in Flutter that already know how to program. The null operator ? is to check something is null before calling to ensure you don't try to call something on an object that's null.
Scope works the same in dart as any other object oriented programming language so outside of scope variables are outside of scope.
Async is required if you want to use await within a function. If you just call the function it will fire and forget
Sir awesome video..i wanted to know how can we cancel the subscription from our getdelayedRandomValue() stream
Thank you. You store the stream subscribption and then call cancel on that when you're ready to cancel.
I'm new to this stuff. Can you choose between future asyncs and streams just like you can choose between iteration and recursion?
Kind of. The example at the end should cover that question. Futures are for performing an asynchronous task and getting the results when done. Streams are when you have a task that won't finish in one action but instead will emit results over time that you have to handle.
for your emulator, it's this avd with android studio or what is it from?
It's just a basic AVD, I cloned the Pixel2 as my image and I launch it through Visual Studio code. I don't use Android Studio for development but you have to use it to open the AVD manager (I wish they could change that).
10 minutes went like a flash, easily explained
Awesome!! And thanks for watching and leaving a comment. I appreciate it
Nice one! Stream basic, then BLOC?
Haha, there are so many BLoC videos out there. I also don't like BLoC, which is why I'm not making any videos about it. I'd recommend ResoCoder's video and Robert Brunhage, they have a series on BLoC development that's very well done.
How can we use this in different widgets, not in the same widget ? I tried it, it doesnt listen :/ . What I want to do is that I want to send some values from widget, and listen that in another widget and take some actions according to sent values. Thank you.
Add it into a class that's accessible by both widget. (www.filledstacks.com/snippet/use-rx-dart-in-flutter-to-synchronize-ui/)www.filledstacks.com/snippet/use-rx-dart-in-flutter-to-synchronize-ui/ ) that uses rxdart but you can replace it with streams, it's the same interface.
i think i can use stream to sync my firebase with my local sql.
am i rigth? D:
Yep, you are right :D
I have an error caused by this line -> StreamController controller = StreamController();
Error -> Close instances of `dart.core.Sink`.
That should be a warning and not an error? To get it away add a dispose function and close your controller in there.
Thank you
You're very welcome. Thank you for watching.
Please make a video on integrating rest api (not firebase 😅) with complex JSON . Which have CRUD operations in it .
In my architecture video I show how I setup my API. The video is not about that or how to do it, but you can see the code. It's 4 lines per function so it's easy to understand. ua-cam.com/video/kDEflMYTFlk/v-deo.html Look at the api class in the source code for that tutorial. I don't do much more than that, sometimes I'll keep a login token locally if needed, but that should cover the basics of an api integration.
Hi Dane, Thanks for your tutorials, I just have one question I would really appreciate if you could spare a minute to help me here, I followed your tutorial - "Easy Flutter Location Service for Realtime Updates in Provider" but need to listen/subscribe to the stream that is continuously emitting location updates using the method you illustrate in this tutorial, I am importing the "location_service.dart" file and trying to listen to it on button press using Stream stream = _locationController.stream;
stream.listen((value){print('coordinates')}); The reason I can't follow the rest of your tutorial showing how to do it using provider is that in my main.dart file I am already wrapping my app in another StreamProvider to handle authentication. Dankie:-)/Thank you!
My current main.dart: would it be easier adding both streams at this level and if so how can one have two streams at the same time? class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return StreamProvider.value(
value: AuthService().user,
child: MaterialApp(
//home: Wrapper(),
routes: {
'/': (context) => Wrapper(),
'/home': (context) => Home(),
'/splash': (context) => Splash(),
'/events': (context) => Events(),
'/profile': (context) => Profile(),
},
),
);
}
}
Hello :) You can place the stream providers as one of the providers in a MultiProvider. So instead of wrapping your app with a StreamProvider wrap it with a MultiProvider and provide as many things as you want in the childrens list ;)
@@FilledStacks many thanks, Dane!
can you please make a tutorial on .map() related with Stream
A full tutorial on that will definitely not happen because it'll be a 1 minute video lol.
Good good good, double good.
Haha, thanks thanks thanks
Do some Tutorials on RxDart, btw Thanks.
I don't use it in production so I probably won't be making any in the near Future. And you're welcome :)
So..how to add to the stream from another class?
Same way you would get any other value from another class. YourClass().value
I hear a South African accent and I up vote.
Haha, I'll take it!! :)
Is stream will affect the performance of our app ?
No
@@FilledStacks sir, i have lot of other doubts about stream. So how can i contact you ?
@@sankaranarayananp8407 You can join the Slack here join.slack.com/t/filledstacks/shared_invite/zt-mcw04u5t-dTeyH0lPONuzd9i0osk9Gw and ask questions. There's 2000 flutter devs there that can help you.
Whats the plugin that shows the code like a hierarchical tree?
Dart code in VS code. You have to enable it. Go to preferences or settings and type flutter UI then enable the two options.
@@FilledStacks I was searching for an "extension" like crazy everywhere for like hour LoL.
Thanks man!!!
@@glyphicon330 haha. Yeah, they released it in v3.1 and had a blog post about it somewhere. It wasn't very public lol
@@FilledStacks Nice.
Man you got a great channel I just subscribed and I'll be sharing your videos. Keep it up 👍🏼
There is a video with Bloc
There is. Resocoder has a few
Everything is clear.
But UA-cam for some reason defines your language as Dutch, and this makes auto-translation comic =)
Maybe you will choose the video - the English language is somewhere in the settings.
Haha, probably because of my Afrikaans accent. It's all set to English 😊 I think it might be an auto CC thing youtube is doing.
@@FilledStacks Maybe =)
I thought you were a Dane.
Nevertheless, I went through a tutorial writing down the code for you locally. And the flows have become a little clearer.
Thank!
Great videos - if possible if you can go a little slower and take more time to explain what is going on with the code - more detail and illustrate concepts. Only a suggestion.
Thanks for the suggestion. Unfortunately I don't want to spend more time on the videos. I think the amount of detail I put into the tutorial along with the written tutorial for every video should be more than enough. It takes 2 days to write the tutorial, create the code, make sure it works, record the code, do voice over, edit the video, upload everywhere etc. The written tutorial has way more details so I'd suggest reading that as well :)
I was expecting a more beginner-friendly approach
This is a beginner friendly approach. Not to beginners in programming, but beginners in flutter.
how to cancel/close/unsubcribe manual stream?
Save the stream subscription and call dispose on it when you want to cancel it.
@@FilledStacks in 9:18, how i stop the getting value from manual stream
@@tepoktangan5076 the same as a normal stream. Store the subscription then dispose it when you don't want to listen anymore
@@FilledStacks oh i see
@@FilledStacks thanks
you are talking fast bro 😅 , thanks that was a good explanation .
haha Can't be wasting those valuable seconds :D
reach++
lol
thank you this is very helpful
You're very welcome :)