Flutter BLoC Library Tutorial - Simple BLoC Pattern Solution
Вставка
- Опубліковано 21 лип 2024
- 📗 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...
🚨 Check out the tutorial covering the newest version of the Bloc package:
ua-cam.com/video/y564ETOCog8/v-deo.html
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.
This is the best bloc tutorial EVER!
Very helpful. Thanks for the video. Looking forward to your next tutorial.
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!
Local db is something I'm looking for as well.
Really great bloc tutorial.
Thanks a lot! Great tutorial
Really helpful. Thank you.
Great and helpful tutorial, thanks
Would you be making a complete flutter tutorial from the beginner level to advanced? Your teaching style is great!
Yes, although currently I have only an intermediate tutorial planned.
@@ResoCoder Sure, maybe in future I guess!
Great work though!
Great tutorial.
Please make a full app in flutter, like the weather app. =D
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.)
Thanks a lot, you saved my life
thanks a lot
You are welcome :D
This BLOC tutorial is the best i've seen so far in UA-cam! however, async* and yield was never seen before and still not understanding.
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)
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.
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.
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
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.
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?
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
Nice follow-up :D
Awesome! How about an example app with basic auth + other features. Thank you!
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 :/
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?
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?
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.
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?
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.
Please explain in detail about bloc builder ,bloc provider, bloc listner in which case what we should use this all ...BTW great tuts..
very good!
Hey, thanks for the nice tutorial. I request you to create one video covering redux! Thanks again!
Awesomee thanks
Validation please, i am not able to integrate validation part for flutter_bloc library
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
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.
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 .
You are awesome sir
Please do more videos on real app using apis with Bloc
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 ?
For what I've seen in another tutorial from documentation, you can use nested blocs.
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).
The repo is now updated to work with the latest version of flutter_bloc
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?
Oh, I hope there are no breaking changes in 0.5.0!
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.
sounds like redux renamed so code grows fast?
What is cascading operator?
when you will be publish android mvvm tutorial next part?
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)"
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?
No idea, I'm glad you got it solved.
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?
In addition to BlocProvider there is also a BlocProviderTree which lets you specify a list of Blocs.
Is there any documentation page for all these? Many thanks
Of course! felangel.github.io/bloc/#/
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.
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.
Why does the constructor have ._() ? and why does the factory constructor return ._()..counter
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 ❤️
BLoC makes me
🤯
Bro pls add one video using multibloc
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 🔥
same with me. just writing the same code doesnt work. but after copied, everything just fine
now it is on version flutter_bloc: ^4.0.0 please make new video with new version . thank you
Watch previous video in the series to get your concepts clear
Sooo fu*king hard!
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(),
);
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 :-(
Great Work. I think it would be better if you create flutter tutorials in Android Studio. It has great support with the latest version. :)
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.
@@ResoCoder I agree!! Android Studio is bloated as hell... and heavy.
Little (but important) changes ;) to be working with flutter_bloc: ^0.5.4 ^0.6.0 etc.
gist.github.com/ruan65/41d1aa37402e49eea065c5bbe0698853
thanks! this worked!
WHERE IS THE BLOCBUILDER WIDGET!!!!!!
You can try this library with generic approach for cooking graphql_flutter + bloc
pub.dev/packages/graphql_flutter_bloc
you used an old version of Bloc.
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.
Its complicated
Play at 1.75 speed. You're welcome.
I watch everything at 2x
This is the best bloc tutorial EVER!