Flutter Bloc Library Tutorial (1.0.0 and Up) - Reactive State Management Crash Course

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

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

50% 1

NEW VERSION OF THIS PACKAGE COVERED HERE:
• Flutter Bloc & Cubit T...
📗 Learn from the written tutorial 👇👇
resocoder.com/flutter-bloc-v1
👨‍💻 Do you write good code? Find out now!
resocoder.com/good-code-quiz
State management is needed by every app. No matter the size of your project, you need to store and do something with all the data present in your app. If you're building something small, you might be able to pull it off with StatefulWidgets. As the difficulty of the project starts to grow, you have to start looking for more maintainable solutions...
The flutter_bloc package is a reactive and predictable way to manage your app's state. This package takes everything that's awesome about the BLoC (business logic component) pattern and puts it into a simple-to-use library with amazing tooling. After many months of development, the Bloc package has arrived at its first stable version - 1.0.0.
Complex topics such as state management are best understood on real-ish projects. No, we're not going to build yet another counter app. Instead, we're going to create a weather app with master and detail screens, a fake repository to get the weather data from and the app will also have visually appealing error handling.
Go to my website for more information, code examples, and articles:
● resocoder.com
Follow me on social media:
● / resocoder
● / resocoder
● / resocoder

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

25 окт 2019

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@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

@Brown-bk4ju 3 года назад

@Reso Coder, Hi, when starting my app I see the appBar but I do not see any text Field in the body instead I get the error: "Each child must be laid out exactly once." Please what's the solution to this?

@username-dh4tq Год назад

.fill : .pop fill. .folder file. .fill

@username-dh4tq Год назад

_ #tank :

@username-dh4tq Год назад

bank_ #dunk :

@username-dh4tq Год назад

#pop :

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

For those who didn't understand what "yield" does: yield: is kind like return but didn't end the function instead it provides a single value and wait for the caller to request the next one then pick up executing again. more on that in this short video by the flutter team:ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-TF-TBsgIErY.html

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

Thank you for your kind comment.

@abdulmuaz.571 4 года назад

Thank you ❤️ for your lovely work you made of all this BLoC series.. Appreciate it. We expect more from you.

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

OMG... The Provider is obviously *SO much better* than the BLoC that I'm really surprised that some people can't see it and keep using BLoC. - Instead of dispatching Events you just call methods of your ViewModel (ChangeNotifier) - Instead of BlocBuilder() you have the same Consumer() wrapper for building changes in UI BUT with benefits (child property which is not rebuilt after each call so you don't need to rebuild all the tree below) - Instead of framing yourself only with a fixed list of states in BLoC you can use: 1. notifyListeners() method from your ViewModel to notify the entire UI to change 2. you can create *as many* streams in your ViewModel and StreamBuilders in your UI as you want and update specific parts of UI (not the whole page). And yes - create States but using *enums* and not classes with Equality. 3. You have agile Provider.of(context, listen: false) - so you can get the instance of your business logic ViewModel without subscribing to changes And we didn't even touch the verbosity of BLoC approach yet... Benefits in every point. Or am I missing something?

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

I see what you mean. Perhaps the advantage of bloc would be having your code more independent from each other, which would allow for better testing. With bloc_test dependency, you can test each individual bloc, which is easier to do. Using your example, providing tests for the entire viewmodel could be troublesome since there is a lot of data and more room for things to go wrong + you have to worry about different instances since the viewmodel needs to be constantly updated in order to provide the appropriate data for the UI. By separating your business logic into smaller pieces (blocs), it is easier to implement testing for your app.

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

with bloc_library you can have blocklistener you can trigger navigation etc. Which is a pain in the ass to do with provider or just Streambuilder. Becuase builder methods must return a widget.

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

@@kingsleychristopher4761 obviously don't create huge monstrous view models, make them for every significant UI module, whether it's a page, sheet, or a part of a page. View models should not store links to UI instances so they can be easily tested. Also a lot of complex logic should be placed in services. They are perfectly testable, they don't know anything about view model layer and about UI layer.

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

@@midsummerstation3345 do the navigation either in UI or in ViewModel by passing BuildContext as an argument to your method in ViewModel, there are no problems

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

@@kirill4531 you can't do navigation due to a global state change from a builder widget.

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

Nice Job

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

Thank you for excellent tutorial!

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

Thanks for the great stuff again!!

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

What a great video. Voice is clear enough to listen at 2x speed. Thank you for the series. Subscribed.

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

This is the explanation I needed to understand the ins and outs of Bloc . Thanks so much . I will recommend u to my team.

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

Thank you for this great tutorial !

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

I don't know whether I'm grateful or jealous of you!! You're a great teacher, indeed a very good one.

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

Extremely Thanks!❤️

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

Great tutorial. At the first it was a little complicated to understand whole ideas but then it became simple. Keep going.

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

That is a great tutorial. Still up on running with the current updated dart and flutter.

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

Fantastic explanation. I'm moving from iOS and was looking for some good example of BLoC and finally I've found one. I will be sure to recommend you to my dev friends at work :)

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

Thank you for another great tutorial. I want to request a tutorial about how to make a refresh event with bloc. I am already succeed making it but not sure whether I did it the correct way or not.

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

I made 2 apps with provider. Because it was easy to implement. After your vids and felix's bloc examples I feel I can use bloc now. This is a must for the ones want to write real app, as u said :)

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

Nice job resoKoder

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

thank you very much for amazing tutorial

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

Thanks Mr. Reso

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

Best tutorial on BLOC....

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

Thanks a lot like always 😬👍🔥

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

My pleasure 😜

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

Thank you!

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

Beautiful sir your all videos are so interesting and informative 🙏🙏🙏👌👌👌👍👍👍

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

Thank you

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

i love the short intro :)

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

thank you really

@SachinKumar-ie7wh 4 года назад

I'm getting confused between provider and getit package. which package do you prefer for dependeny injection and state management?

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

You're the man! After searching for sharing bloc between routes for an hour finally watched the video and gave me most of the answers I need. Will this worked with named routes?

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

Thanks! Sadly, no. It won't work with named routes AFAIK.

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

Hi Reso, Thank you for your videos, I've learned a lot watching your videos. Please can you make a example with multiple bloc in the same page, for example if I want to show a list of favorites products and top rated products in the same page.

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

Just replace BlocProvider with multiBlocProvider and fill it with the blocs you want to provide to your pages. I encourage you to check out the documentation on multiBlocProvider on the official website of flutter_bloc. There are tons of examples there wich can help you. Cheers

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

@@LexPrimost thank you so much

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

Praise thee and thine wisdom overflow.

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

Mayest the knowledge thee did gain in this lesson benefit thee f'r a longeth time!

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

Thanks for the video. I used a BlocProvider in my main.dart wrapping the body child, but I get .of() errors when trying to use the bloc in the BlocBuilder inside the child widget that I created. I tried to change the child widget to StatelessWidget, but I can't figure out how to fix this. I'm guessing it's a context issue.

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

Provider Tutorials would be great!! Too much Bloc here

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

Yes I love provider. Flutter bloc lots of files to maintain

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

thank you for your great work i have a question should i create the 3 classes ( event - state - bloc ) fore every page ?

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

if the page needs to hold state that will change, then, yes.

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

@@garethbeall3674 well said

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

Also if your page has a small state logic you can put your 3 classes in the same archive.

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

Thank you for your great efforts. However I just can’t get the “Ahaa!” moment about bloc yet. I’ll stick using provider. BLoC may be better but that’s just over my skills.

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

That was the same for me at the beginning , but you just need to practice with small projects like in this tutorial and you will master flutter_bloc in no time. Also you should definitely join the official gitter for flutter_bloc users, the community and the creator of that package are always there to help when you are stucked using flutter_bloc. Courage

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

Same here lots of files to edit :(

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

Hey Ariky, I felt the same way initially, you just need to go for it with a clear head and do a very small project with it. Merry Christmas :)

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

its just redux in disguise

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

Not gonna lie, I felt the same way for some time. What finally made everything "click" for me, was implementing Bloc without the library (StreamControllers, StreamBuilders and InheritedWidget). It's ugly, but definetely worth to do once. Also spending some time reflecting on the core concepts (reactive components, immutablity of state, separation of presentation and business logic) helps a lot.

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

May God bless you greatly

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

Hello ty for tutorial, why u dont use rxdart with bloc?

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

Hi, How should I create BLoC's? By entity of by functionality?

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

Hey Reso, not sure if this is the right place to ask this question... I've got a main bloc that fetches data related to a vehicle, in this main bloc I display multiple tiles where a user can upload pre-defined images like font-of-vehicle, back-of-vehicle etc. These images are mapped to a an array owned by the main bloc but it would be cleaner if each image tile would be its own bloc for (image loading, image uploading, image being capture etc.). How would I do an array of blocs that are a sub-set of a main bloc? The images are related to the vehicle information 'hosted' in the main bloc...

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

Hi @SigmaZero, blocs can listen to each other, So you could Wrap you item widget with a single Bloc and then you could manage even related to this specific bloc, you could check a sample here github.com/loicgeek/shopper-flut, It's a Shopping app that manages favorite item, On main Screen You could mark shopping item as favorite and the widget will automatically reflate that state, if you navigate to the favorite page , you could see these items, if you remove an item from favorite it is automatically reflated in main screen

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

Thanks a lot, with your explanation of didChangeDependencies, i can solve one problem a faced to, I was building an authentication flow , but when checking if the user was already authenticated or not, the AppStarted Event was not emit fast, and Loading screen was taking time to appear (bad UX), it is now solved.

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

I'm glad you got it resolved!

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

@@ResoCoder I have cloned the stater project but, the complete project has been downloaded?

@Nobody-ky7sl 4 года назад

Nicee

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

What vs-code extensions are you using :) ?

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

Hi Reso Coder. How do I keep my controls visible when the CircularProgressIndicator appears on the page? Thanks.

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

Unfortunately having looked at Bloc tutorials most of today, my takeaway is that the flutter_bloc library is unstable and every week there seems to be a breaking change. The tutorials are great and the teaching style is wonderful. But you must feel like you're banging your head against a brick wall when each time you release a version of the tutorial the library interface changes. Good luck and keep up the good work. I might think about using flutter_bloc library when it gets a bit more stable

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

Hello, the constant changes are a little distressing for me. That, however, doesn't need to apply to you! I'd give Bloc a shot even now, the changes are really minor. Just change BlocProvider's *build* method to *create* and you should be good to go.

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

Couldn't you add the detailed event before loading the Materialpageroute? Or after in the previous page

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

Yes, you could.

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

that is exactly what i thought

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

Is this get props a replacement to Model.fromJason() ?

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

Nice video, just a couple of questions: - Why do you use BlocProvider.of()..add() instead of .. dispatch()? - You can actually use the BlocProvider.of from initState since context is a property of every stateful widget, so why do you use the didChangeDependencies hook?

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

Thanks! To answer your questions: 1. Dispatch is no longer present in the version 1.0.0. That's because a Bloc is now itself a subclass of the Stream class. 2. You can access the context, but as far as I'm concerned, using an inherited widget is not yet possible from within initState. You have to wait until the didChangeDependencies callback is called.

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

@@ResoCoder Ahhh part of the changes. Thanks!

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

How do you do if you have 20 routes called from many screens that maybe don't have bloc inside?

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

Thanks. I have a question, if I doesn't use equatable, how it would be the class: abstract class WeatherEvent extends Equatable { const WeatherEvent(); } If doesn't extends equatable?

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

If you do not extend from equatable you cannot compare event such as state is WeatherLoading or WeatherLoaded

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

Could you please tell which theme and extension for vsc you use? thanks!

@Malaq4822 Год назад

u found it?

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

Can you make a video about how can we use multiple bloc?

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

Hi sir! Could you tell me one screen must have just only one bloc or more bloc ? My application's complicated presentation. The application has a lot of list view in one screen. Each a one screen have a lot of use case like filter data load more and pull2refresh. I hope you feedback or give me some advice as soon as possible.

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

Hi, One page can be managed by more than one bloc, let say you are building a shopping app, and your app manages favorite items, You will need one bloc for a Shopping list, one for Favorite items and another one for a single item. In your case if your filtered results is display on the same page then you just need one bloc to perform these operation , but if you want to display on search result page, you must creat a FilteredBloc no manage these results.

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

@@loicngou9592 Thanks

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

Hi, you could check this github.com/loicgeek/shopp-app-flutterbloc-v1.0.0

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

may be the MultiBlocProvider can be useful

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

any one help me plz that if i have many state in a screen. so with each state i must create 3 file of bloc like that?

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

hi... I've come to the same problem here too.. have you solve it somehow ? I don't like the idea of redrawing all the widget that doesn't have state that changed. thanks

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

There is a claim that Equatable is an “expensive” plugin to compare objects. If app has big data in models, how smooth will be performance?

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

TL;DR It should not significantly impact performance. You can see some performance benchmarks at github.com/felangel/equatable#performance.

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

Can you please make a quick video on BloC 8 . This implementations has become old. I am having a hard time learning BloC

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

Please help, let say I want to show list of recent product and list of favorite product in one page, and the data of those list are totally different because they are loaded from different endpoint, do I need to create two bloc(which mean 8 files, because one bloc need 4 files) to handle both the list state?

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

Yes, that's a little bit boilerplate code, so I'm introducing to you a black magic calls: States_Rebuilder

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

@@JETLAI123 I heard about that plugin, but my bos prefer "made by google" stuff

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

Halo, we have a new version of flutter_bloc, it's 2.0.0 and it has a few new features. Can u tell about that?

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

Sure, in another tutorial. However, those changes are very minor.

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

Did anyone try both bloc and async_redux (not redux)? How do they compare?

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

Redux has one source of truth and Bloc has many. Basically Bloc divides the state and events in small blocks. Bloc calls also works async with streams INs and OUTts, completely dettached from main thread.

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

can anyone point me to documentation on how to 'smartcast' using the conditonal operator 'is'? Reso uses it in this tutorial, but I can't find details anywhere

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

And also I heard about using stateless widget classes instead of making widget methods because it can cause useless rerendering of these widgets in build method

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

Where did you heard that man? Did u know that by writing Widget buildLoading(){ Return Container(); } It actually return a stateless Widget?

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

what if i have many pages and each page have 4 states ? for each Page i have to make a Bloc ?

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

Yes.

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

I read the bloc tutorial page understand little bit. watched this video did not understand much . I am loosing my hope of being a good flutter developer. if i cant keep up with this bloc and other new stuffs in development my career as a developer will end soon What to do ?.

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

It is like running a marathon! If you want to get to the finish you have to keep running! Dart/Flutter is really a system under construction. Be patient, but resilient. Repeat things you looked at some time ago and you will see that quite anumber of things are getting more clear than the first time!

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

@@hoekbrwr what u said is absolutely true 👍. I did get an idea about bloc after that I had face same issue with provider. After one day full trying I finally made an api call using provider too. But the most important thing i learn is that keep trying eventually we will get a hang of it . I got a hike in my salary too 🤩🤩

@Brown-bk4ju 3 года назад

Hi, when starting my app I see the appBar but I do not see any text Field in the body instead I get the error: "Each child must be laid out exactly once." Please does anyone have the solution to this?

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

Instead of adding props to every extension of your abstract events class, why not override props in the abstract class and then pass whatever parameters you pass to your child class to the super constructor?

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

Is BloC the best way to manage state in flutter?

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

Hello Reso, the scrolling is not smooth; it is even confusing sometimes.

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

Deprecated, now there is v2.0.0. :D

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

Yup 😢 I'm not sure why Felix needed to bump that version to 2.0.0. Ahh... 😄

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

@@ResoCoder Because close method now awaits completing all the events and therefore it's now a Future, ergo not backward compatible.

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

Is there any big difference?

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

No. Only that build got renamed to close.

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

If I have data in firebase like. Location : indore bhawarkua mp Location : Khargone bhawarkua mp .. And I want to search the data related bhawarkua so how I can do it..

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

I still don't understand why the Flutter community has embraced this as better than Redux. It is identical but Redux seems much more elegant and clear.

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

Why not providers?

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

43:18

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

do 1 with real api if possible.

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

block.dart file is not generated anymore.

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

please post bloc v8 tutorial

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

Please update this to bloc 5.0.0

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

I have a question, because today mobile development interests me much more than the web, "Flutter" makes me feel good and I would really like to get into it, but I think that learning the native first (Kotlin/android) would clearly be the best way to become technically good and understand the mobile universe, so I block and learn nothing, learning both at the same time seems difficult? What would you recommend? Because many seem to say that learning to flutter by totally abandoning the native is a mistake, so I know, it depends on whether you want to do cross-platform or not, for the moment I want to stay on android but be able to develop on IOS so quickly afterwards... Thank you in advance. Sorry for my english :s

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

It might be a good idea to understand the architecture of mobile applications and design components to begin native development, but also the flutter documentation is very nice, and there are many blogs about flutter, you can start with the official documentation.

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

How do you cancel a Bloc event if the data takes forever to load and the user pops the detailed view and then pushes the detailed view again? I think the Bloc is still processing the previous data and could lead to unexpected behaviour.

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

You can make paginated queries to fetch data by parts, show place holders when loading data, and also be sure to close the bloc when needed.

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

You can make paginated queries to fetch data by parts, show place holders when loading data, and also be sure to close the bloc when needed.

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

You can make paginated queries to fetch data by parts, show place holders when loading data, and also be sure to close the bloc when needed (myBloc.close() in dispose method if needed).

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

If you have to push the same view over and over again like a web browser, all the views behind will take the last page. You could use take 1 from the stream but then you could not refresh the block if you come back. The solution is to provide another Bloc for each view. Awkward. As hell

@username-dh4tq Год назад

pancasila_ #mataram :