ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
#7 - BLoC to BLoC Communication - StreamSubscription, BlocListener & More Architecture Tips
ฝัง
- เผยแพร่เมื่อ 27 ต.ค. 2020
- Hi there!
Here's the github repository where you can clone all the source code:
github.com/The...
In this tutorial I will introduce you to how blocs and cubits can communicate with other blocs and cubits and not only! We'll learn how can a bloc/cubit listen and react to the pub.dev connectivity_plus stream. We'll tackle up the 2 recommended methods on how you can communicate between blocs, by using StreamSubscriptions and BlocListener. Hope you like this video!
All animations were done in VideoScribe, you can try it by clicking my affiliate link --- www.awin1.com/...
You can contact me directly here:
Join my Discord Server --- / discord
Twitter --- / letsgetwckd
Instagram --- / letsgetwckd
Also, if you want to support me furthermore you can become an TH-cam Member, donate or buy my courses on Udemy, using the following links:
Become an Official TH-cam Member! ---- / flutterly
Buy my Udemy Courses! ---- www.udemy.com/...
Support me on Revolut! ---- revolut.me/let...
Buy me a Ko-fi! --- ko-fi.com/wckdyt
Donate me on Paypal! --- www.paypal.me/...
Support me on Patreon! --- / wckdyt
![[LIVE] สิ้นสุดการรอคอย | พี่ดู๋ สัญญา คุณากร | #คุยให้เด็กมันฟัง EP.44/1 (10/08/67)](http://i.ytimg.com/vi/rBNZCh-QEYE/mqdefault.jpg)
Hello, everyone!
The entire course is now live on Udemy too, get it while it's hot --> www.udemy.com/course/bloc-from-zero-to-hero/?referralCode=E689592633984B34DBEF
Also I have just managed to finally finish the entire BLoC - From Zero to Hero Complete Course, based on this tutorial series. You can check it out here -> th-cam.com/video/THCkkQ-V1-8/w-d-xo.html
Hello @Flutterly , I have a problem is it good to use package GetIt with flutter_bloc ? I have a problem with bloc to bloc comunication. the bloc B get another instance of BlocA so events int BlocA are not listen in bloc B.
This is the first explanation of bloc to bloc communication in all of TH-cam. So good tutorials! How long have we been waiting for you, Flutterly!
Thank you so much!
For those who are having issues with "context.bloc" throwing an error "isn't defined" : context.bloc and context.repository are deprecated and replaced with context.read and context.watch.
Hope it will help someone.
thanks alot❣❣❣
i was using Change Notifier for a long time, but i decided to use BloC/Cubit combinations for new projects. You changed my mind :D Thank you, keep doing awesome videos!
Nice! Really glad I could help you towards this!
May be am the only one who watched the entire series continously without a break 😀❤
Thank you so much!
i too.
I too, it is like unfolding the clarity on bloc, could not stop :)
No you are not I watched all the Dart and all the bloc in a single day xD
Excellent stuff, this. I do feel that the speed with which you talk is on the fast-side, and getting faster. Starting to feel the need to reduce the playback speed of TH-cam
Thank you for your feedback! Yes, I know that in this tutorial I increased the speed of my explanations but that's because it was a lot of code instead of plain animations. Will get back to my default speed next time. Thanks!
Nicely explained :)
I'd say that BlocListener approach does move some business logic into the UI though. I think that the connection between two components of the business logic is a part of the business logic.
before this playlist i watched multiple videos even udemy courses but this playlist is the best. again thanks
As I pray to GOD plz clear out my doubt of BLOC, because i tried to search on the internet. He said I haven't time for that but let me share the Flutterly tutorial for that. 🤣 Thanks, brother for Lifting me up.
Thank you man! I was using getX package but with these videos you changed my mind! Keep going on
Thank you! I appreciate it! ♥
Clean and neat explanation on each and every point, Even though I was working with bloc since from long time, you have cleared me a lot of doubts, hats off to your teaching skills, looking ahead for further videos ❤.
Thank you so much for your kind words! I'm glad I could free you of some of your doubts! Thanks!
Hats off one of the best series on bloc
Keep them comming boss 💙
Thanks, man! I will!
I had so many preconception about BloC but on every video you crashed them all and now I 'love' BloC. Thank you so much!
These turtorials are getting better and better! I'm very happy that I found these turtorials! Keep up the gud work!
Thank you a lot!
please continue to make more video like this, you are the best teacher of flutter in TH-cam
Thank you, I appreciate!
It's so rare to find such an organized tutorial and so detailed to, thank you so much, I needed to learn bloc for my app and you made it so easy🌹
Thank you for changing my mind towards bloc. I always though it is too difficult for me but you changed my mind
Glad I could help!
The best tutorial so far that exists in the whole network
The best tutorial so far that exists in the whole network on flutter_bloc in flutter, great job, I do not speak or write English, but I understood perfectly, thank you, I needed this!
Thank you so much! ✨
Thanks alot man, You are the best who ever explained bloc architecture. I'm looking forward for more tutorials.
Thank you, I'll make sure to keep them coming!
best series ever good explanation of Bloc and cubit. if you can make riverport flutter series will be appreciated👍
Thankyou, I mean it.
Thankyou from my heart. You sir are a Gem!
Thank you so much for your kind words!
Great tutorial! There are a lot of documentation and videos, but you one of that types of guys who really have that kind of sight: "where _really_ bloc users stuck", "what _really_ to do to solve it". Your in-depth explanations are great.
Personally I find StreamSubscription the more "right way" to do, because you just open BlocA source and clearly see it's communicating with BlocB. With BlocListener: you just open SomeScreen source code, see state and events from/to different blocs in the BlocListener and it's easy to overlook what events of what blocs are called. Anyway, generally, either way are ok :).
Waiting for the new video :) Understanding what is buildcontext isn't simple when you meet it first time and what's really going on when your widgets are building, navigator push new pages, some of your widgets crashes the app because you don't apply the Builder, etc :)
Thanks for your work!
God, thank you for this amazing in depth feedback! I do really appreciate that you understand the way I structure all my videos! Thanks a lot! I am glad I could help and really pleased that you're one of my viewers!
I love your videos man.. really changed my perspective on Flutter development. Such a powerful tool
Definitely, I prefer a BlocListener instead of a StreamSubscription. I implemented an internet connection in the same way as you did.
Glad we're on the same road haha! Thanks for the feedback!
All videos on bloc are awesome sir ❤,
im not an english native speaker, but i can understand you perfecly.thanks!
Please make more videos on flutter with such deep knowledge
I loved all your videos. The only problem I faced was I wanted to learn Bloc but I got confused between Bloc and Cubit. I though you would make individual end to end project with bloc and another project with cubit. But rest assured, dude your videos are eye-openers.
Man, as I mentioned in my videos, cubit is just a smaller version of bloc, but in general, it's almost the same concept. Will cover bloc in the next series when I'll be developing real world apps with bloc and Flutter!
@@Flutterly I am so eagerly waiting for your next set of videos. Meanwhile, I will be watching all of them again from the start. Thank you for taking note. :)
Very good tutorials. I hope some more are coming soon. Thank you very much
For sure! Thank you so much for your feedback!
This series has been great. Thank you. I'm looking forward to seeing a whole project aimed at production ready architecture and some more advanced topics. I'd buy that on udemy!
Thank you so much! I will do a whole project aimed on this topic, and I'll post it here, on TH-cam, so that everyone will have access to it for free.
@@Flutterly that's awesome. When you do I'll be sure to buy you a coffee.
Interesting video, thanks. I think in larger applications, you will want to use a BlocObserver to do complex coordination, like triggering refreshes based on a state change. I also use it to let blocs “post” events to be picked up by other blocs. Anyway Keep up the good work.
It depends of what you need, mate! Indeed you may use BlocObserver to both listen and rebuild the UI. When you said that you use it to let blocs "post" events to be picked up by other blocs, I guess you meant to say listen to a blocs stream of states and then make other blocs add events based on that states. If so, yes, as you said you could use BlocListener or BlocObserver for that.
Great videos, mate! I'm waiting for the next ones!
Coming soon!
Nice Tutorials mate, keep it up, BlocListner my preference
Thank you, glad I could help!
I enjoy both approaches. I use either based on the requirement.
Thank you for the great tutorial, I hope you keep making more because this was so clear and informative. Nice touch with the pros & cons , I never saw that coming!,😃 :) . I do have a question, I would like to make tutorials but not as videos. I prefer writing articles , I would like to know if there is some sort of technique you use to structure your content so that the reader/watchers understand clearly ?
Hi! Thanks for the amazing feedback! Unfortunately, my type of content takes a ton of time to design and create. First of all I manually write the entire script, then record myself, then based on that script I have to create all these amazing animations, then the coding process, then merge everything all together etc
thank you for making this video,
its really help me a lot.
the second approach is very good for me thanks for awesome videos
Thanks man! I really love your video about Bloc! It helps me alot :)
Glad you liked them!
Amazing video about bloc to bloc communication.
great and we are waiting for new tutorials
Excelente video como siempre :), gracias por compartir tus conocimientos.
De nada! Me alegra que te haya gustado!
Esti cel mai bun bro!
internetCubit.listen gives error. It says, The method 'listen' isn't defined for the type 'InternetCubit'.
What can i do?
I have the same issue. Did you solve it? How can we listen to a Cubit Class?
@@keremkeskin8477 Videonun ilerleyen kısımlarında dinlemeyi çok daha kolay hale getiren bir yapı gösterecek. Önceden dinlemek için kullandığın kısımları sileceksin. Izlemeye devam et şimdilik
@@emirhan2070 Tamamdır teşekkür ederim onu kullanırım artık. Bu arada hatayı çözdüm demin. Hata aldığımız listen yerinde araya stream ekleyince sorun çözüldü. Alt yorumlarda buldum çözümü.
internetCubit.stream.listen((){}) yapınca.
@@keremkeskin8477 Bunu bilmiyordum, teşekkür ederim bilgi için.
@@keremkeskin8477 Thanks. Yes changing internetCubit.listen to internetCubit.stream.listen fixed it.
Another great explanation!
Thank you so much, I'll keep 'em coming!
Wow great explanation as always.
Btw are we gonna get a repository tutorial as well coz that would be wonderful
Repositories will come later mate, I need to finish tutorials first. Repositories are mainly related to app development in general and not really related to bloc. You'll have to wait couple more tutorials unfortunately. But it's worth the wait.
@@Flutterly I am more than happy to wait for everything you have in store for us :)
Thank you so much for your kind words! Appreciate it! ♥
awesome videos! Thank you for sharing!
Thank you so much! ✨
we are waiting for new videos man
Yes, the next video I'm preparing it's going to be quite complex, that's why it's taking so long. Sorry for that!
@@Flutterly it was just a joke buddy. ;)
always graceful
Another great video!
Most of the enterprise apps have one to many relationship objects. I was building functionality for adding, updating and viewing such object. for example invoice where you have parent object with list of child objects. Adding child into parent objects list or updating is quiet tricky! I have tried several approaches but didn't like any of them.
What would you recommend? would you create 2 blocs one for each screen or one ? or even more? what relationships would you use ?
Best Regards,
In general, you should create a bloc for each major feature of your app. I had a similar example to what you're saying when I was working on an app of mine. In general, you should make a bloc/cubit for the big image of your feature. For example, if you have a Country model and a couple of other things related to countries to display, I would create a country bloc to manage all of them.
@@Flutterly thanks a lot! By the way is that project open source?
Unfortunately, no
I'm facing a similar problem right now. My decision was to made 1 bloc that will trigger new states whether the whole object changed or only one of it's children, and inside the BlocBuilder use the method "buildWhen" so the widget can use compare and decide by itself if it should rebuild or not.
For example, if you have 10 items (and therefore 10 widgets) and each of one get an index, you could do something like this:
buildWhen: (oldState, newState){
myOldItem = oldState.items[thisWidgetIndex];
myNewItem = newState.items[thisWidgetIndex];
return myOldItem.name == myNewItem.name;
//You could do complex testes here and return a boolean with true to rebuild the screen or false. Here I'm assuming you are interested in the name property.
}
New state is the Current state by the way, I only call them like that because it feel easier lol.
thats is a lot of very good information thank you it helped me a lot, keep it going :)
Thank you, I will!
thank you very much :)
You are welcome!
After completing your Dart course, I have been going through this course and it is absolutely fantastic.
I do have a question though that I cannot seem to reconcile if you can help at all. At timestamp 13:32, you create a the MultiBlocProvider and put the Blocs in dependency order. Although above this in the tree you pass the AppRouter file as an argument to MyApp and AppRouter creates an instance of counterCubit.
If this is created in the AppRouter how is it passed down the tree? I am trying to figure out how you get that specific instance since it looks like we create a new instance in the MultiBlocProvider.
Thanks again for the fantastic content though! You have been a dream to learn from and can't wait to see what else you have in store for us!
Nice video! For some reason I'm having a problem with the InternetCubit because it starts on the InternetLoading state and if I don't change the device connection mode it still forever in the circular progress... is like InternetCubit never starts by itself. Any advice?
For anyone with the same problem the error was on refactoring the monitorInternetConnection in the InternetCubit because instead of creating a StreamSubscription monitorInternetConnection() I've created a void function that don't return nothing 😓
This is a great tutorial. Thanks
Thank you very much for your work!
You're welcome! ✨
I was looking for this content thanks a ton for this. Can u please make a video on how can we change the ui when we want the same bloc or cubit state which is already present but the data provided to state is different for example increment a variable coming from a api on click of button
Thanks! I will cover this topic in future videos for sure!
Excellent video once again! I was just wondering though: Is it also okay to have a BLoC that just communicates to another BLoC by sending it events? Like in my case I have a AnnotationBloc that handles annotations on data. It needs to notify the DataBloc that the data has changed and should be saved to disk. Annotation depending on a DataBloc makes more sense as you could have Data without annotations but not the other way around ...
Yes, you can communicate with other bloc by giving it events to process
Excellent, thank you.
Glad you enjoyed it!
Hi Flutterly pleas answer, I am still confuse about builder and listener in BLoC you said that "Listener will listen to the bloc's or cubit's state change", but when I saw your code :
BlocBuilder(
builder: (context, state) {
if (state is InternetConnected && state.connectionType == ConnectionType.Wifi){
return Text("Wifi);
.......
.......
)
QUESTION: you said that "Listener will listen to the bloc's or cubit's state change", but why use BlocBuilder here instead? I am confused because the if statements got access to state...
Both listener and builder listen to the state change. As I mentioned multiple times, you should use listener when you want to do something in response to a state change, like navigate to a new screen, show a snackbar etc. When you just want to rebuild a part of the UI, use BlocBuilder, because that is going to re-built it. BlocListener is not going to re-build anything.
Absolutely great
just awesome just awesome
Thanks, man!
Thanks!
Welcome!
Because blocs expose streams, it may be tempting to make a bloc which listens to another bloc. You should not do this. it creates a dependency between two blocs.
Generally, sibling dependencies between two entities in the same architectural layer should be avoided at all costs, as it creates tight-coupling which is hard to maintain. Since blocs reside in the business logic architectural layer, no bloc should know about any other bloc. A bloc should only receive information through events and from injected repositories (i.e., repositories given to the bloc in its constructor).
If you’re in a situation where a bloc needs to respond to another bloc, you have two other options. You can push the problem up a layer (into the presentation layer), or down a layer (into the domain layer).
- from the bloc documentation
love you flutterly
Your videos are always great!
I dont like bloclistener for this usecase because this composes business logic on the presentation layer.
I just mentioned in the video that what you're saying it's absolutely not right. Business Logic = how we do stuff inside our app. All we do inside bloc listener is notifying bloc what do do, not how to do it. That's why there's nothing related to logic. Please watch the entire tutorial next time.
Hey Flutterly, first of all, thank you so much for this tutorial series around BloC, i have learned a lot with these videos. But, i want to know which tools did you use to produce this kind of animations in your videos ? I'm asking because i'm thinking about produce some tutorial videos and these kind of animations are very good to explain some complex topics, thank you very much in advance :)
Thank you for your appreciation! I'm using videoscribe:)
i prefered bloc listener communication if code reality can increase by adding some comments and nameing
Thank you for the amazing videos sir, but I am not able to grasp concepts that well since I am newbie and have just finished basic angela yu flutter course. What shall I do or practice to strengthen my concepts as I don't have much experience in fluteer or any other app development.
thank you From yemen
Awesome video!
Thanks!
Well explained, By listening the internet state stream say I want to redirect to a different page when connection is down and once connection is back online I want to redirect to login or home page. Where should we handle this or what would be the better approach
You can use BlocListener and Navigator.of(context).pushNamed(theRouteYouWant) as a response to multiple internet states. What you can also do is rebuild the UI on your current page to let the user know that there is no internet connection, by perhaps displaying a snackbar or something like that.
@@Flutterly Got it
you are superhuman
Haha, thanks for commenting on all of my videos 😂
thank's very helpful
very appreciated 👌👌👍👍💕💕
Thank you so much!
if we want to implement a language change full application whenever user selects given option, how should we use the bloc, appreciate your support
That's a more complicated topic, I don't know how I can implement that currently, but I guess in the future I'll make a tutorial on it.
@@Flutterly Sure, Thank you
you are awesome... thank you.
Thank you so much!
Thank you for the awesome explanation! Your course is so organized and easy to approach :) I have some questions regarding to BLoC implementation to my app. Can I email you in some way? I would very much appreciate your advice for state management.
You can ask whatever questions you have here, I'm not that active on other platforms.
I have two questions for you.
1. Routing
I am trying to create a quiz app that has (1) a landing page, (2) login page, (3) signup page, (4) home page. Currently I'm using SharedPreferences to navigate through (1) ~ (4) at the initial startup. But I am wondering if there would be more elegant way of routing this procedure. I have sth in mind using BlocProvider to bring the user auth data from the start of the app and use the auth data to decide whether to procede into (4) or (2). Any advices for this?
2. BLoC design
Since it is a quiz app that brings data back to the app using http , I am guessing the app requires an User bloc for user data , Internet bloc for online connectivity, Auth bloc for auth, Quiz bloc for quiz data. Am I designing it the right way? I am getting kind of confused right now. I am understanding bloc as a way of designing data logics that controls the app's state.
Thank you, and have a happy new year :)
1) You should use an AuthenticationBloc or Cubit to manage the state of the user, and then rebuild the UI (push your desired pages into the navigation stack) based on whether the user is a guest, authenticated, logged out, etc.
2) You are right with everything you said here. Happy New Year!
@@Flutterly Thank you, wish you the best. I will keep looking forward to your videos. Take care :)
Hello there, first thank you so much !
But i have an issue
Let's say we want to create 2 Bloc with a global access
So we're gonna create 2 BlocProvider inside a MultiProviderWidget
But what if BlocB needs to listen to BlocA ?
We cannot passe BlocA as a constructor parameter of BlocB because context.read will return an error..... :(
How can we achieve that use case ? :(
Here is the code in order to help u better understand the issue :
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MultiBlocProvider(
providers: [
BlocProvider(create: (_) => AuthCubit()),
BlocProvider(
create: (_) => UserCubit(authCubit: context.read()),
),
],
child: App(),
);
}
}
Please watch the next tutorial about BuildContexts and you'll understand where the mistake in your code is. :)
@@Flutterly Wow, thank you so much, I just need to use the context userCubitContext in the create method....... Thank you !!
I think if you need to both, notify the user through a Dialog and at same increment you can should use Bloc listener since you will make it anyway, if not it's better to use stream and keep buissness logic away from ui
what is the extension you are using to view the line for flutter widget?
I don't think I remember how I activated that, but I'm sure it was something in the vscode settings for the Dart analizer. Google it, you might find the answer on Stackoverflow
@@Flutterly I found it thanks for your valuable time, It's called Flutter Guides on Flutter Extensions for VS Code
the author of this pack made some nice changes in v6.1.x if u can address those changes with real examples would be excellent thanks.
Yes, I will. Thanks!
How to Bloc Listen Stream List method
buddy i will ask you something. bloc or getx? which one is better
I'm a huge fan of bloc so I'm a little bit biased towards it. I haven't tried getx so I can't give you the answer you're looking for. To me, bloc library is all you need.
@@Flutterly Ok. Thank you.
Thank you ...
You're welcome!
Thanks
You're welcome! ✨
🌱🌿🌹
*bows to the oracle of bloc
Thank you so much, man! ✨
The BlocListener seems shorter but then we are putting a lot of business logic on the UI.
I just explained inside the video why you're wrong considering BlocListener to be business Logic. It's a wrong assumption.
@@Flutterly Well, you can call it "Unbusiness logic" if you want, but the guy has a point here :-) Wouldn’t it be great to use something like Get_it package as a service locator in this case? Thanks for your work, all my likes go to you 👍🏼
Man, with all due respect. All BlocListener does is doing something as a response to a state change. Nothing more. It's like calling bloc.add() on an onPressed button function. It seems like we're adding logic while dispatching a new bloc event, but the truth is dispatching bloc events are part of bloc, therefore no logic is here.
What is mean is that there is no difference between calling bloc.add() or cubit.increment() as a response to a state change. I don't consider it logic, since the logic (the implementation itself) is actually inside the increment function. However, I am not a fan of BlocListener too, I like StreamSubscriptions better! ✨
@@Flutterly ok, I see your point, thanks. There's no silver bullet I guess. All in all it's up to a developer's taste.
Wow
i think blocListener is easy to used
Damnnnn, Pls control the speed. You are going wayyy tooo fast.
Bloc documentation clearly states that this kind of tight-coupling blocs and creating dependencies should be avoided at all cost. Also it is really bad for testing
Thanks for this! looking forward to see more. Is this how the example would be structured for BLoC instead of cubit? pastebin.com/B71kR3ab
Yes, exactly!
These tutorials were very useful, but incomplete...
If I could give you 1m views I would.√
Thank you so much, man! Hopefully I'll get there one day haha
way to much fast
internetStreamSubscription = internetCubit.listen((){});
problems: The method 'listen' isn't defined for the type 'InternetCubit'.
it throws me an error, could you help me
There has been an update to the Cubit class. So it is not internetCubit.stream.listen();
@@rohitsrao Thanks man that was helpful ^^
Hello! Does somebody knows how to pass internet cubit instance that I've just created in one of the MultiBlocProvider BlocProviders. context.bloc() doesn't work now.
Should I use BlocProvider.value and create both the Cubits?
MultiBlocProvider(
providers: [
BlocProvider(
create: (context) => InternetCubit(connectivity: connectivity),
),
BlocProvider(
create: (context) => CounterCubit(internetCubit: /*I have problem here*/),
),
],
child: MaterialApp(
title: 'Flutter Demo',
onGenerateRoute: appRouter.onGeneratedRoute,
),
);
Ok the solution for me was context.read()