Bloc Library - Painless State Management for Flutter

Подписаться 112 тыс.

Просмотров 92 тыс.

50% 1

📗 Learn from the written tutorial & GET FULL CODE 👇👇
resocoder.com/bloc-library-up...
👨‍💻 Do you write good code? Find out now 👇
resocoder.com/good-code-quiz
Business Logic Component, otherwise known as Bloc, is arguably the best way to do state management on Flutter. Events come in, state comes out, and the flow of data simply has to be predictable this way.
Writing your apps using the Bloc pattern from scratch creates a lot of boilerplate code. That's why there is an amazing library which spares you from dealing with the intricacies of Bloc, like Streams and Sinks...
I've already covered the Bloc library a while ago. Back then it was just a cool library to use for enhancing your codebase, today, it will change the way you develop Flutter apps for the better.
Go to my website for more information, code examples, and articles:
● resocoder.com
Follow me on social media:
● / resocoder
● / resocoder
● / resocoder
● gab.ai/resocoder

Опубликовано:

5 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 146

@ResoCoder 3 года назад

🚨 Check out the tutorial covering the newest version of the Bloc package: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-y564ETOCog8.html

@norwegiancamper2800 2 месяца назад

I’ve been searching RU-vid for days trying to find a good, simple, and straightforward Flutter BLOC tutorial with no luck, until I found this one. Absolutely perfect! 👌

@samrystrom3532 4 года назад

This is the simplest, most elegant explanation of BLOC I've seen by a considerable margin. Thank you so much for the great tutorial!

@darlingtonhp Год назад

This is arguably the best tutorial on Bloc Library.

@waqasali3205 3 года назад

This is the simplest, most elegant explanation of BLOC I've seen. Thanks Reso coder 👍

@davidkanai6944 5 лет назад

the quality of your tutorials is magnificent

@goth14wx47 5 лет назад

Thanks seriously thank you a lot, I have been looking for understanding this, and know I feel more comfortable working with flutter.

@kirwakelvinkering3122 Год назад

Ooh my !! My my !!!! What an explanation ? What an example ,what a theme ,what ... This is the best explanation I have ever come across ! Thanks much sir for this tutorial.

@sudesh6807 5 лет назад

wow... thanks man, was expecting a tutorial with this library.👌

@TreyHope 4 года назад

This really makes me feel a bit more comfortable starting bloc. Thank you for sharing

@RobertWildling 4 года назад

Thank you very much for another great tutorial! Would love to see a more complex scenario, one that, e.g., also handles navigation and/or routes...

@DanieleMazzoni 4 года назад

thanks, a very concise and clean way to introduce to the implementation that I hadn't found easily anywhere else.

@davenash1547 5 лет назад

I’m new to Flutter, and had overlooked BLoC ‘til now. Everything else I’d seen scared me away. This tutorial was so clear, and BLoC seems so intuitive to my way of thinking, I’m going to try it out. Thank you!

@medupidups4741 4 года назад

Me too

@sanjurokuwabatake5541 3 года назад

The bass of his voice !! i feel coming outta heaven

@felix0749 3 года назад

Thanks for tutorial. Finally I got the idea and implementing cases of bloc pattern.

@acollierr17 3 года назад

Look forward to using this in my app soon! Thank you for explaining it so well as it's going to help a lot.

@heshankumarasinghe3159 2 года назад

Learnt new stuff! Thanks!

@AbuSazzad 4 года назад

Great tutorial on BloC!!

@shoaibahmad6910 5 лет назад

BloC is just love and also the way you described it!

@ResoCoder 5 лет назад

Bloc is love, Bloc is life!

@luisv1308 4 года назад

Excellent video! Thank you!

@justinlim2256 5 лет назад

Wow that's a good tutorial. Keep it up!!

@lenvaz6689 4 года назад

Awesome tutorial!

@weidota 5 лет назад

Great video! I just have one question, when would you recommend using Equatable over built_value?

@anangsuwasto7660 5 лет назад

thanks, great explanation

@user-oq1hd8ds3q 4 года назад

good tutorial, thanks!

@temurkhan7725 4 года назад

Thanks a lot for tutorial very helpfull material about Bloc architecture

@jadoooh55 4 года назад

such a wonderful work this is, thank you very much. but did equatable have any rules in this tutorial?

@kentoapps 5 лет назад

This is an awesome tutorial! The written one is also very helpful. Apparently, from flutter_bloc 0.17.0, BlocProvider disposes provided blocs automatically. And if you define generic types to BlocListener and BlocProvider, you don't need to pass a bloc object.

@heavylifter 5 лет назад

Very helpful!

@federicopintaluba3039 4 года назад

Great Reso thank you! Great tutorial, just a quick question, how can we do a fade transition between the widgets returned in BlocBuilder? For a better ux, have a good Day!

@arekkazmierowski9657 4 года назад

Great tutorial! So what do you use for DI in flutter?

@HerryTCO 5 лет назад

Hi :) what is the best approach to perform a state change right when the app is opened? Like i want to fetch a List from an API right away.

@amitforever2007 4 года назад

You are great dude! Even though you uses old bloc version (presently 4.0), its useful for me to follow your tutorial, I have converted this project and few other into newer version (4.0.0) of flutter_bloc. There are lots of changes, but i am happy with the results. thanks a lot, i wish you could do some more fluttur_bloc Tutorials with newer version of bloc..

@user-fh4xo2pc2d 5 лет назад

Do we need built_value when we made use of equtable with Bloc library?

@pradeep422 5 лет назад

cool, can u provide widget testing usecase with blocprovider???

@mehedihasansony 4 года назад

block is great and i think this is the best video i found on how to use block. however, i prefer provider which in my opinion is more clear and need very less boilerplate code if not none. but hats off for the video

@marekchojecki4746 5 лет назад

As it’s quite similar to redux, is that a good idea to move all BlocBuilder logic outside (to some reducer file) witch switch statements rather than if else block?

@spiderion1 4 года назад

Great video. Anyway, I didn't understand why you used the BlocProvider when you already had the bloc into a variable?

@hoxorious 3 года назад

Such a great tutorial. But is there any better solution to check the states in UI without using "if" or "switch" statements? Or even in the logic section which we check the event, is there any better way to map all of these? Thanks.

@vinothvino1275 4 года назад

Thank you so much for the tutorial. It looks similar to provider package. Can you please upload a video for flutter_bloc with networking (api client, authentication etc). Do you have any complete flutter course in udemy?

@saabsebadakhiladi3795 4 года назад

Hi pal, please can you do a tutorial on this Flutter package "scrolling_day_calendar", I am not sure how to implement it and I am new to flutter

@subhanmaulana8135 9 месяцев назад

Genious 😎

@raja.babu3 5 лет назад

Can you add a tutorial with firestore and flutter_bloc? It will be really useful.

@alessandroruggiero8932 3 года назад

Just use create a database calass with all your logoc and use a streambuilder to react to doc changes

@raja.babu3 3 года назад

@@alessandroruggiero8932 Awesome. Already solved it. That time was new to flutter bloc 😉.

@alessandroruggiero8932 3 года назад

I did no see it was a year old 😂

@nowinowi9232 4 года назад

This pattern is probably the most insane anti patter I ever saw. Imagine, all we need to do is to update a value.

@khulegubatnasan601 4 года назад

Actually no.

@haos4574 4 года назад

then take a look at Microsoft WPF. All the stuff that's been doing here is to try to only rebuild the UI when neccessary.

@LE8271 5 лет назад

Is it only me who finds BLoC to be messy? I feel my code fragmented and difficult to overview. I mean come on: having 5-6 files plus repo and a half-dozen of classes for a single page is not really convenient. Just an opinion about BLoC itself not the video (which is great!).

@ResoCoder 5 лет назад

That jumping between files is not the best thing, I agree. I guess you just have to choose between a mess in a single file or tidy code in many files.

@LE8271 5 лет назад

@@ResoCoder yeah probably it falls back to the fact that Flutter itself is messy and way too verbose.

@darkcaster3619 5 лет назад

That's exactly what I thought lol

@gabryelferreira 4 года назад

Yeah, I feel the same, thats why I prefer Provider, so much easier and cleaner.

@foobax 4 года назад

Depends on how large and complex you app is. The more complex it is the more useful separation of concerns is. For a simple app, yes, this is a lot of files and you may want to tradeoff maintainability for putting this all in fewer larger files. That goes for the Flutter framework itself, it is "messy" because it is large and complex. Flutter/Dart is actually not very verbose compared to other languages such as Java or Objective-C. Provider may be more simple, and covers a lot of common use cases but BLoC provides streams of state, which is very powerful and if you need that, then this is actually a very simple way to achieve that functionality.

@JustAlex1337 4 года назад

How did you get those cool IDE colors?

@olusanyatodd4083 4 месяца назад

Such a great video. A shame I had to search so far for a clear explanation of bloc!

@DrZupan 4 года назад

StatelessWidget or StatefulWidget i must use with BloC?

@kami2144 5 лет назад

Could you do a tutorial with testing in Flutter?

@mustafaahmedraza5294 4 года назад

Please make a tutorial on Provider State Management

@ArvindKumar-ks2eu 3 года назад

hey did you installed any other extension for equatable bcz I am not able to navigate to that option after creating bloc with extension.

@dcmarvel3031 2 года назад

How do I keep the City Input Search Bar there instead of re-creating everytime the state is refreshed? Like in the demo, it is included in both states WeatherInitial and WeatherLoaded?

@itssidhere 4 года назад

Hello, in submitCityName how to the value carried by the current state ? Please help

@jerryzhoujw 5 лет назад

BlocBuilder is kind of put all state of page together, for pulling a list there's 2 data (isPullingState, dataList), how can I avoid build widget part of dataList when dataList not change, but build widget part of isPullingState which changed from true to false ?

@DiazGunturFebrian 5 лет назад

How to use different type of subject? I guess the default is BehaviourSubject right? How to use PublishSubject or ReplaySubject?

@Mani-xx4fz 3 года назад

I’ve been using this library in a couple of projects and it may be kind of difficult at first (due to the lack super enums like swift 😁 to define state and events) but when u start using it on medium - large sized projects it feels very natural and well abstracted..

@KisrDeveloper 3 года назад

Nope, overhead. Boilerplate code.

@KisrDeveloper 3 года назад

I spent more time maintaining bloc structure, files, logic than coding actual app, solving solution. Never again.

@Mani-xx4fz 3 года назад

@@KisrDeveloper Well, Bloc library is not a silver bullet to all, but on the meantime I personally find it more comfortable to work on mid-large sizes projects than other libraries.

@ItomanuId 4 года назад

what is the name of the extensions for Android Studio

@joseluna1998 4 года назад

Hello, what about if u want to use this example on a login page? i have been using streams in a very simple form so i sent errors when (for example) u dont write a valid email. Help me pls, how can i send errors to my textfield?

@m.arslankhan7449 4 года назад

wao great , Now I know my A B C......

@vladkondratiuk52 4 года назад

Why blocprovider doesn't accept bloc and there is no dispatch event?

@xyzoooo401 3 года назад

This pattern gives me nightmares, reminds me of how annoying it is to develop new features or refactoring on larger iOS apps. Thank god we have all these plugins in VSCode unlike Xcode 🤮. Flutter is still a breath of fresh air for native mobile devs. Thanks for breaking down everything about writing bloc code for flutter. Great video!!

@theGoldyMan 4 года назад

Wait, in submitCityName from where you access the context since the function is declared outside of the build method.

@ivanmartinez5239 4 года назад

In Stateful Widgets you can access to the context from anywhere inside the class, sorry, I know this is an old question, but maybe my answer helps someone else.

@mikemegalodon2114 4 года назад

Thanks! I'm Interested in learning flutter, but state management looks still complex. I'm coming from android and having single mapEventToState looks scary, you will need a big swich case once it grows, won't you?

@777phoenix2 4 года назад

It is like React Native redux, I looked 'what the fuck is this?' for the first time, after native 10 years developement..

@Euginium 3 года назад

I'd like to ask, Is Flutter more complex than React ??

@spiralni 4 года назад

I prefer having just one bloc class per "ui page" and bind all the states and events generated from the UI with the bloc without needing to be to generic. I mean, one page one bloc, Is this bad?

@helloitsme3252 5 лет назад

How does state management work in case of multiple pages? Do you have a different bloc for each page?

@ResoCoder 5 лет назад

Usually yes. I have a few global Blocs for things like authentication.

@jktan5793 5 лет назад

Hi @Reso Coder May I ask if using "equatable" library for Bloc Library (UPDATED) , so we can skip the "built_value" library like the youtube search app in flutter ? Please correct me if i am wrong. and I feel using equatable is much more easy and simple than built value. just my opinion. Thank you =)

@ResoCoder 5 лет назад

If all you want is to have data classes, then use equatable. Built Value is perfect for converting JSON strings and some heavy duty immutability.

@jktan5793 5 лет назад

@@ResoCoder thank you so much for the explanation. And if I want to use the "Moor" library, which one would your suggest me to use (either equatable / built value ) if I want to store the input data (when offline) in sqlite. And should I create separate for the data class dart file and the database table file too ? I am sorry if my questions are not clear enough. Thank you very much =)

@ruhanahmad1284 4 года назад

When i type blockProvider it does not show (bloc) as instance rather it shows create create: (BuildContext context) => MyBloc()..KIndly resove

@miklosnemeth8566 4 года назад

This is another fancy/great stream-based BloC variety, which is completely OK, since BloC was actually invented with streams in mind. On the other hand, the "Simple app state management published" on flutter.dev/docs/development/data-and-backend/state-mgmt/simple gives a lot simpler alternative, and it is not based on streams; instead, it uses the provider package maintained by the Flutter team. There are as many kinds of BloC implementations as many Dart/Flutter developers; the only thing being common is that all uses streams. Many of them are using additional libraries like rxdart. Some says that stream based state management is superior than provider's listener model. Since Google published Android Architecture with Live Data, View Model, Data Binding, programming Android/Java/Kotlin application state management is quite uniformized, this is absolutely not the case with Flutter/Dart.

@chordfunc3072 5 лет назад

Hi :D I have a question... I've written a couple of apps using the BloC pattern. The problem is (or it might not be a problem, let's find out...) is that I tend to prefer just making a stream on the bloc for each piece of state I want to send to the UI. Often with BehavoirSubjects from the Rx package if I'm calling some data repository where different part of the UI relays on the same piece of data, I'm sure you are familiar with BehaviorSubjects but in case you are not it basically dispatches the last data in the stream to any new subscribers. Exposing methods directly on the BloC is also something that I've favoring more and more. The nice thing about this is that you get a lot of the help from the IDE without having to look up the different event classes when it gets time to trigger a method. Could you maybe talk me out of these approaches😂 ? Perhaps there are some benefits that I'm not seeing?

@fmarko 5 лет назад

That's what I do as well

@anonyknowns 5 лет назад

Your approach seems less boilerplate-ty to me. I feel like there're too many files and steps just to manage the state of one screen using this package, maybe it's more suitable for a more complex app.

@chordfunc3072 5 лет назад

@@anonyknowns Im using the Provider package as well these days, its has a MultiProvider class which is pretty handy

@jpkontreras 5 лет назад

in 8:57 you were saying that code was "alread generated", that really happened or you typed it offscreen?

@ResoCoder 5 лет назад

It was generated by the VS Code extension.

@lunargixx6867 4 года назад

Hey bro I am not able to update the dependencies. The console shows the error - Because bloc_library depends on flutter-bloc any which doesn't exist (could not find package flutter-bloc at pub.dartlang.org), version solving failed.

@jajasaria 5 лет назад

google already recommend "Provider". I think I'll stick with it. Btw thanks for the video.

@ResoCoder 5 лет назад

Provider is a good alternative to Bloc, but if you were to use StreamProvider, I think you're better off sticking to Bloc. In the end, all that matters is your preference.

@raul286162 5 лет назад

@@ResoCoder Currently Provider was integrated in Flutter_Bloc, I hope you make a new update video about this new refactored lib.

@miklosnemeth8566 4 года назад

@@ResoCoder What do you mean, what's wrong with StreamProvider? My understanding is that StreamProvider is just one kind of providers in the provider package when your application really needs a data stream; while streams are the heart of BloC and used for every kinds of communication. With the provider package you can build complex applications without ever writing a single line of code using streams. In Bloc, you must be a master of streams (and rxdart as a matter of fact), otherwise you are lost and dead.

@geraldcampana9296 5 лет назад

what theme do you use?

@seunghwanjeong5348 5 лет назад

it seems like he is using the atom theme.

@helloitsme3252 5 лет назад

In this code snippet: class WeatherPage extends StatefulWidget { WeatherPage({Key key}) : super(key: key); _WeatherPageState createState() => _WeatherPageState(); } What is the purpose of this line of code: WeatherPage({Key key}) : super(key: key); Thanks!

@ResoCoder 5 лет назад

For our use case, its purpose is basically nothing. Keys are used to get rid of UI-not-updating bugs.

@helloitsme3252 5 лет назад

@@ResoCoder Thank you :)

@hassanbaiga 5 лет назад

You added equatable to make var one = var one ?

@ResoCoder 5 лет назад

Equatable makes two object with the same "content" be equal.

@mgorn 5 лет назад

@@ResoCoder Is it any different from overloading the == operator?

@miklosnemeth8566 4 года назад

@@mgorn No, but equatable does it for you :)

@shriyanshraj8425 3 года назад

use older version of bloc vs code extension otherwise it will generate different code files according to new block version

@josiaswando9561 4 года назад

Are these streams really necessary? They complicate such a simple thing that is not really asynchronous.

@MohsenDelsouz 4 года назад

Seems outdated, blocprovider doesn't accept bloc and there is no dispatch event, should I use mapeventtostate?

@betaeagle 4 года назад

use bloc.add()

@musliminontong2918 3 года назад

Hello sir can you create new content about this, because it seems the new version of bloc is difference between this yours

@leukongsun4845 5 лет назад

And what is rxdart (pub.dev/packages/rxdart)?

@berroubamohamedelamine8667 3 года назад

Thanks man, but I think Get-it is much better than Bloc for managing states (using simple and clean approach).

@KisrDeveloper 3 года назад

Yep or getx

@anothernumber9753 4 года назад

Here's a link to the android studio extension: plugins.jetbrains.com/plugin/12129-bloc-code-generator

@krupeshanadkat8606 4 года назад

why do you keep outdated videos, this is 3rd time I got trapped in buggy mess of hours because of your videos.. Time is precious dude! At Least mention at start of video somewhere, "new updated video in cards.."

@ushanfernando6598 4 года назад

you sound like gatis kandis from agt

@michaeltolsma7717 4 года назад

15:29 I don't understand how any of those if-statements are triggered.

@michaeltolsma7717 4 года назад

@@askolmayanveysel2221 I appreciate your explanation, and while I'm sure that answers my question, it doesn't make it any more clear to me.

@tudo-sobre-ai 5 лет назад

The flutter_doc package was updated and now the code is broken. On the BlocProvider, change "bloc: weatherBloc," to: builder: (BuildContext context) => weatherBloc, dispose: (BuildContext context, WeatherBloc weatherBloc) => weatherBloc.dispose(),

@ResoCoder 5 лет назад

Oh! He's so quick with these updates... But I mean, that's a good thing 😄

@ahmxrd 3 года назад

Great video. Thanks for helping me decide not to go the BLoC route. Too verbose and cumbersome

@MrTurbo_ 2 года назад

I don't get why bloc would be better than ChangeNotifier

@mercysparks1403 3 года назад

Why do you make something easy to be more complicated ?

@krupeshanadkat8606 4 года назад

why do you keep outdated videos, this is 3rd time I got trapped in buggy mess of hours.. Time is precious dude! Atleast mention at start of video somewhere, "new updated video in cards.."

@ResoCoder 4 года назад

I'd recommend to always check pub.dev for the newest package version and compare that with the version used in the tutorial.

@akashkumardas6521 5 лет назад

There is no Any dout that you and your tutorials are always awesome. But flutter code really look so messy...

@ResoCoder 5 лет назад

Thank you! I don't know how long you're doing Flutter, but over time, this mess becomes an orderliness 😅

@ih4722 4 года назад

imagine doing this for a complex project. Man this is just confusing and weird.

@muhammadather1549 3 года назад

It's too complex

@777phoenix2 4 года назад

Bloc is so ugly, and confusing. Do you guys using this pattern instead of MVP or MVVM? Is it a trending ugly thing? It is like React Native and redux, also so ugly and confusing and a lot of files... First time I saw it I thought WTF.

@nextbars 5 лет назад

You should actually code and explain step by step, actually it looks like a PowerPoint presentation. Go more in deep and take your self at those moments when you didn't know any code so you can have a better perspective to teach. I hope you do good your intentions are very awesome just put more focus in the How to teach better instead of What new to teach...

@ResoCoder 5 лет назад

Thank you for your remarks. This, however, isn't a tutorial for beginners. I agree, people who are just starting out will have a hard time trying to follow this quock style. On the other hand, I don't want to slow down the more advanced developers with countless repetition.

@miklosnemeth8566 4 года назад

@@ResoCoder I am fully with you, your tutorials are excellent, you deservedly have that 26K subscribers including mine. I think you make a great balance between beginner and advanced lectures, this one is absolutely for advanced Flutter/Dart programmers.