Flutter BLoC Library Tutorial - Simple BLoC Pattern Solution

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

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

50% 1

📗 Get the code from this tutorial 👇👇
resocoder.com/flutter-bloc-li...
👨‍💻 Do you write good code? Find out now 👇
resocoder.com/good-code-quiz
Flutter BLoC Library: pub.dartlang.org/packages/flu...
Having a structured codebase can only help you with creating good, long-lasting apps. The problem is that proper architecture can come with a cost of writing a lot of boilerplate code, especially if you intend to write everything from scratch.
When it comes to the BLoC pattern for Flutter, in the previous tutorial you could see how to create BLoCs from scratch and I'd say it's not something you want to be doing over and over again. It's just too low level. Also, if you don't know how to implement BLoCs from scratch, definitely check it out.
We need to move up the abstraction ladder so that we aren't going to be dealing with Streams and Sinks directly. This can be done with a handy library about which you are going to learn in this tutorial.
Go to my website for more information, code examples and articles:
● resocoder.com
Follow me on social media:
● / resocoder
● / resocoder
● / resocoder
● gab.ai/resocoder
Book icon designed by Becris (www.flaticon.com/authors/becris), licensed by creativecommons.org/licenses/b...

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

4 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

🚨 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

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

hi Reso Coder, nice tutorial, but i. have some doubt when i create CounterState._() its gives me an error Non-nullable instance field 'counter' must be initialized. I am using bloc library. with version 7.0.0. please help me with this.

@AbdulmalikHamid 5 лет назад

This is the best bloc tutorial EVER!

@sephyshen2510 5 лет назад

Very helpful. Thanks for the video. Looking forward to your next tutorial.

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

Really great bloc tutorial.

@38sabbath38 4 года назад

Thanks a lot! Great tutorial

@ibraheemdev2290 5 лет назад

Great and helpful tutorial, thanks

@franz5944 5 лет назад

Really helpful. Thank you.

@JmGodlike 5 лет назад

Thanks for the video. Was really helpful! Would be grateful if you can maybe do an end-to-end complex app implementation of the BLoC library, with repository call to API call and local db retrieval. The doc skipped those part for simplicity. Looking forward to that, thanks again!

@aislanarislou 5 лет назад

Local db is something I'm looking for as well.

@theolm 5 лет назад

Great tutorial. Please make a full app in flutter, like the weather app. =D

@walidbagh 5 лет назад

Nice follow-up :D

@SakshatShinde 5 лет назад

Would you be making a complete flutter tutorial from the beginner level to advanced? Your teaching style is great!

@ResoCoder 5 лет назад

Yes, although currently I have only an intermediate tutorial planned.

@SakshatShinde 5 лет назад

@@ResoCoder Sure, maybe in future I guess! Great work though!

@NelZFS 5 лет назад

very good!

@oztech 5 лет назад

This BLOC tutorial is the best i've seen so far in RU-vid! however, async* and yield was never seen before and still not understanding.

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

Maybe this is a late answer, but when you use the yield function, for a better understanding, it will return a list. By example, if you use yield inside a for loop of 100 iterations, it will return a list of 100 items, and in Flutter, async* is linked to it (as long as I know)

@furkanvatandas4819 5 лет назад

Awesomee thanks

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

Hello. I just followed this tutorial and things seems to be totally out of sync with bloc_provider now. did the updates to bloc_provider really change how code is written in the last few years? if so have you made a new video showing how to use bloc_providers more recent api?

@zehijean8817 5 лет назад

Great explaining...would you mind showing a more elaborate exemple with two blocks communicating together alongside with dealing with resources fetched from the network(DB,API) great stuff

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

Awesome! How about an example app with basic auth + other features. Thank you!

@SAlmanKhanDev 5 лет назад

Hey, thanks for the nice tutorial. I request you to create one video covering redux! Thanks again!

@MrLarryQ 5 лет назад

Your tutorials are fantastic, however I think this one went a bit too quick toward the end, particularly the BlocProvider.of stuff. I know what you're doing but that's because I've used Blocs before. Someone new to them, and to the flutter_bloc library, who hasn't seen it before would probably be confused by the last 5-7 minutes. May I suggest a separate video that goes a bit more detail into how to use the flutter_bloc library and all the BlocProvider.of code?

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

You are awesome sir Please do more videos on real app using apis with Bloc

@MattDuarte11 5 лет назад

This is like redux for React. Only with classes. Also I am new to Flutter just started. Is there a way to connect my app to a DB? Like PostgreSQL or mongo? Basically where does the backend come in?

@govingupta5065 5 лет назад

Please explain in detail about bloc builder ,bloc provider, bloc listner in which case what we should use this all ...BTW great tuts..

@michalrv3066 5 лет назад

Any reason why you used Classes for events instead of Enums like shown in docs? Anyways, I'm wondering what would be the best way of passing data to bloc, like product ID received from previous screen so it can go ahead and fetch the necessary data :/

@creative-commons-videos 5 лет назад

Validation please, i am not able to integrate validation part for flutter_bloc library

@guybashan9897 5 лет назад

Thanks for the GREAT video. Not sure I quite understand the last part with the BlocProvider. For example, if I have method creating some Widget, I will have to pass to it as a parameter the context (in order to use the BlocProvider). So what is the difference between passing the context or the BLOC as a parameter?

@ResoCoder 5 лет назад

I'm glad you liked the video, Guy! The difference is that you can get the Bloc from the provider even down the widget tree (from a different class). Let's say you have a HomePage widget which contains a UserListView widget to keep the code clean. With BlocProvider, you can easily access the Bloc instantiated in the HomePage inside the UserListView. I hope this makes sense, check out some of my newer Bloc tutorials. Things have changed a bit since this video was published.

@nishantdesai3705 5 лет назад

Hi, how can we use flutter_bloc when a widget depends on more than one blocs ? for example I have a widget w1 which depends on data from remote server (bloc1) and a bloc which responds to internet connectivity (bloc2), as all pages (including the one which has widget w1) of my app responds to change in internet connectivity I decided to use bloc for that too, now how can I use both of these blocs (viz bloc1 and bloc2) to render widget w1 ? Do i have to use nested bloc providers ? or is there a better way ?

@aislanarislou 5 лет назад

For what I've seen in another tutorial from documentation, you can use nested blocs.

@leukongsun4845 5 лет назад

What is cascading operator?

@mostasimbillah 5 лет назад

when you will be publish android mvvm tutorial next part?

@miabellasalonandmedicalspa2822 5 лет назад

sounds like redux renamed so code grows fast?

@MarciMatuz 5 лет назад

I love BLOC pattern but this package is like ScopedModel package. Basicly if your state object has multiple properties and if you use multiple BlocBuilder with same bloc instance and whenever you dispatch an event then all BlocBuilders builder method rerun even if some of them not intrested in the changed property. So better use StreamBuilder with Streams instead of you get the whole state as parameter in build method.

@simonekang2475 5 лет назад

why i got a error when I put CounterEvent parameter on mapEventToState. there is error on @override, it says "'CounterBloc.mapEventToState' ('Stream Function(CounterState, CounterEvent)') isn't a valid override of 'Bloc.mapEventToState' ('Stream Function(CounterEvent)').dart(invalid_override)"

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

For anyone doing this at flutter_bloc version 4.0.0, the counter_bloc.dart mapEventToState() method should look like this: @override Stream mapEventToState(CounterEvent event) async* { if (event is IncrementEvent) { yield state..counter += 1; } else if (event is DecrementEvent) { yield state..counter -= 1; } } (No need to pass 'CounterState currentState' to the function.)

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

Thanks a lot, you saved my life

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

thanks a lot

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

You are welcome :D

5 лет назад

What you need multiple blocs? Let's say you need one bloc to manage all the states and another one for managing a database logic, or the state of a user authentication? thanks

5 лет назад

I think I found my answer, I see there is a BlocDelegate on the library which basically "is a singleton which oversees all Blocs and delegates responsibilities to the BlocDelegate." Is that how you would solve it? I don't like the usage of Singleton.

@mysandyballs 5 лет назад

The approach of using a counter variable within a CounterState class in any flutter_bloc release above 0.4.12 (I tested with 0.5.4) will no longer work in this example, as it mutates state rather than returning a new state. To fix, I needed to change CounterBloc declaration to: class CounterBloc extends Bloc (I tried to raise an issue on your GitHub page, but Issue Submit is disabled).

@Felangelov 5 лет назад

The repo is now updated to work with the latest version of flutter_bloc

@ResoCoder 5 лет назад

If you want to follow this tutorial, either use the library version 0.4.12 or read on! *Check out the replies for a solution* There is one breaking change in 0.5.0 and onwards. Duplicate states are no longer emitted by the bloc. If you want to use the new version, you have to override the == operator, and also not edit currentState directly when incrementing, but rather make a copy of the object. In other words, make CounterState an immutable class. If you know how to do this, cool. If not, just use the older version and wait for another tutorial where we will use the built_value library which can create data classes which are immutable and nice to work with.

@gmc254quads6 5 лет назад

Thanks. I should have read this before trying it out. I was almost going nuts trying to do a similar thing to the point I cloned your app from Github and it worked. Then I changed the bloc version and it broke down leading me to the comments. Looking forward to your next tutorial on this.

@ilirvasili8847 5 лет назад

Simple changes I made for it to work with the latest bloc: 1. factory CounterState.initial(int times) { return CounterState._()..counter = times; } 2. CounterState get initialState => CounterState.initial(0); 3. on mapEventToState() replace yield currentState..counter += 1; yield currentState..counter -= 1; respectively with yield CounterState.initial(currentState.counter + 1); yield CounterState.initial(currentState.counter - 1); Thanks

@chinyun1526 5 лет назад

Yeah, I think this video is not that helpful, now. I learned from this and stuck for hours because the view not update with same state (same instance). You should make your comment stick on top to prevent someone stucking.

@LuisOtavio-dt8nu 4 года назад

Nice Tutorial, but i had a problem when i ran it: "Error: No named parameter with the name 'seedValue'. " I fixed it by replacing the version flutter_bloc: ^0.4.12 to flutter_bloc: ^0.8.0 .

@stijnmathysen7453 5 лет назад

Another great tutorial! Just a thought; to clean up your onPressed: anonymous functions, you could change; onPressed: () => BlocProvider.of(context).onIncrement(), to onPressed: BlocProvider.of(context).onIncrement, Also, while following allong I found it better to stick with flutter_bloc: ^0.4.12 instead of the latest version ^0.5.0 which was recently released. I just can't seem to get it to work with the latest version?

@ResoCoder 5 лет назад

Oh, I hope there are no breaking changes in 0.5.0!

@ResoCoder 5 лет назад

Actually, I found out that there is one breaking change. Duplicate states are no longer emitted by the bloc. If you want to use the new version, you have to override == operator, and also not edit currentState directly when incrementing, but rather make a copy of the object. In other words, make CounterState an immutable class.

@TheVikke2 5 лет назад

Hey, I had a weird bug/glitch where BlocBuilder did not update the screen. I thought I had made a mistake in the code, but everything was as in the example. Took me hours to work it out but after I reran *flutter packages get* it started to work. Was weird because the bloc worked and I got print statements but the screen didn't change. Any idea what caused this?

@ResoCoder 5 лет назад

No idea, I'm glad you got it solved.

@sadekhossain9566 5 лет назад

Hi, i am curious how you will use/call a different bloc lets say updateUserBloc that doesn't exists in counter bloc and you want to use properties from both bloc in the the same widget? How you will use from two or more different blocs?

@ResoCoder 5 лет назад

In addition to BlocProvider there is also a BlocProviderTree which lets you specify a list of Blocs.

@sadekhossain9566 5 лет назад

Is there any documentation page for all these? Many thanks

@ResoCoder 5 лет назад

Of course! felangel.github.io/bloc/#/

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

Bro pls add one video using multibloc

@Daaab89 5 лет назад

very good tutorial. Short yet straight to the point. I've got one question: What if you want your bloc only to listen to database changes (or for example Firestore data changes), and you only need stream with no sink (no events passed - you only listen to data ) - is it possible with this library ? Also I'm a little bit confused about mapEventToState. First of all you have to map Event not to State but to Stream (of States). And the second thing is (please correct me if Im wrong) that I thought that you should subscribe to the stream of States, and emit new state when it changes, yet here you have to return new Stream each time State changes - I dont see any difference between returning Stream of States each time State changes, and returning State itself.

@ThinkDigitalRepair 5 лет назад

The library doesn't stop you from doing anything. So yes, any questions you ask about if it's possible, the answer is yes. It's just a pattern. What you can do is add a listener to the API and onData, bloc.dispatch(myApiEvent()) and set that off on the side somewhere in a function that you call on an initState.

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

Bro I'm a beginner at this flutter thing am an android dev can you please upload beginner level tutorials it'll be very helpful ❤️

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

BLoC makes me 🤯

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

Why does the constructor have ._() ? and why does the factory constructor return ._()..counter

@anirudhamahale8715 5 лет назад

I did exactly what you did still my UI didn't update. Then I just copied your class ContainerWidget and it worked😂 But anyways the tutorial was 🔥

@arifikhsanudin9724 5 лет назад

same with me. just writing the same code doesnt work. but after copied, everything just fine

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

Sooo fu*king hard!

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

now it is on version flutter_bloc: ^4.0.0 please make new video with new version . thank you

@simransingh1507 5 лет назад

Great Work. I think it would be better if you create flutter tutorials in Android Studio. It has great support with the latest version. :)

@ResoCoder 5 лет назад

I feel like Android Studio is too bloated for what it is. Flutter doesn't need a heavy IDE, at least in my experience - and I'm coming from native Android development so I made a conscious switch to VS Code.

@aislanarislou 5 лет назад

@@ResoCoder I agree!! Android Studio is bloated as hell... and heavy.

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

Watch previous video in the series to get your concepts clear

@millerliang3565 5 лет назад

WHERE IS THE BLOCBUILDER WIDGET!!!!!!

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

You can try this library with generic approach for cooking graphql_flutter + bloc pub.dev/packages/graphql_flutter_bloc

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

this is for any dummy person like me> the new version flutter_bloc: ^0.21.0 above Make changes for the following lines: return BlocProvider( builder: _counterBloc, child: CounterWidget(), ); to return BlocProvider( builder: (BuildContext context) => CounterBloc(), child: CounterWidget(), );

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

Unfortunately this tutorial is out of date and shouldn't really be here any more. The updated tutorial (referenced in the pinned comment above) uses a totally different use case and so doesn't relate to the first tutorial in the series any longer (which used the flutter default counter app). So all in all this series no longer flows together :-(

@andreykaok9497 5 лет назад

Little (but important) changes ;) to be working with flutter_bloc: ^0.5.4 ^0.6.0 etc. gist.github.com/ruan65/41d1aa37402e49eea065c5bbe0698853

@kuestua 5 лет назад

thanks! this worked!

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

you used an old version of Bloc.

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

Its complicated

@bazoozoo1186 5 лет назад

frankly, I hate it. it looks so over-complicated... and that Bloc object sending events to itself... yuck! scoped_model framework looks much less cluttered.