How to Manage State in Flutter using BLoC for Beginners

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

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

50% 1

Bloc is the one of the best ways to manage state in your Flutter app. It can seem a bit confusing at first glance, but this video will hopefully clear up the confusion and show how easy it is to implement in any existing app.
00:00 - Intro
00:47 - Explaining initial code and the goal of this video
02:26 - Creating a BLoC Event class
05:59 - Creating the BLoC to define the state and handle the event
12:38 - Creating a BlocDelegate to intercept events, state changes, and related errors
15:25 - Assigning the BlocDelegate when the app starts
16:12 - Using a BlocProvider to provide the BLoC to the app
17:25 - Updating the BLoC state with an event
20:03 - Using a BlocConsumer to consume the BLoC state in a widget
23:49 - Showing a SnackBar message when a new event is found
24:45 - How to decide when a widget is rebuilt on new events
28:39 - Testing/Debugging (Adding and deleting items from the List state)
💻Get the Code: github.com/theflutterfactory/...
⚡Connect on Facebook: / flutterfactory
⚡Connect on Twitter: / flutterfactory

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

5 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

This is great content. I wish you would go more in detail to a few things. Perhaps you will make in the future more videos, explaining why you create events, or why you should use abstract classes, etc. Keep it up!

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

Great tutorial! Thanks a lot

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

Your lectures are really helpful. Great work

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

Please make more stuff on flutter bloc.

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

I believe in you, thanks. It was a great content. 😀

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

thank you !!

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

thank you very much hope you extend more videos about of block concepts and articuture and about how to add full crudOperation

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

Hi thanks for this very much:) I have a question, inside of the Listener of consumer, what if we wanted to present 2 different types of snackbars? How can we differentiate the event inside of listener?I believe this state management solution is the definite way to go for big complex apps. I hope you can make more advanced tutorials on this in the future(possibly containing a state class and more complicated models)

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

Very clear explanation! Keep up the good work.

@yenhachi Год назад

感謝！

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

How can u use bloc for Inherited Widgets please help ?

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

Good job, please make a video on Redux state management too

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

That might be my next Flutter video

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

@@TheFlutterFactory Thank you

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

The bloc approach you followed here can you lead me to documentations about this approach to study detail.

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

You can just look at the official bloc docs. My approach is a personal choice after thinking about what makes the most sense for me. There is no single correct way to use it 🙂 pub.dev/packages/flutter_bloc

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

onError() : method gets called : type 'FoodEvent' is not a subtype of type 'String'

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

Hi coding with curry, I have a question, what if I want to make 3 kinds of foodlist. All 3 doesn't have the same list of foods. They have their own text field to add a food for each foodlist. But they all have the same functionalities or process. My question is, Do I need to have a different blocs for each foodlist? Or can I make 3 instances of my foodlist/foodlist_bloc??

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

How you structure your code is up to you. If all of the logic in you bloc is the same, it probably makes more sense to store all three lists inside of one bloc.

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

@@TheFlutterFactory oh! I see. Thanks thanks! It' nice that you are approachable and responsive to every comments. 🥰 Keep it up. I love your vids.

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

I try. Thanks!

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

I am unable to find BlocDelegate in the flutterBloc package, I did pubget and get dependences also ,it's always saying that creat a class with BlocDelegate I'm confused help!

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

I guess in the newest release its been deprecated (removed) already.

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

BlocDelegate was renamed to BlocObserver: github.com/felangel/bloc/issues/1618 Try it out and let me know if it worked for you!

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

What's the difference between bloc and provider pattern?

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

I personally prefer Provider because there's less boilerplate. Bloc is purely for state management. Provider is essentially a dependency injections system that can also be used to manage state. It gives you access to a state object(or any other object) in child widgets. Research InheritedWidgets if you don't know what those are. Bloc relies on using streams with listeners and is more of an actual architectural design. You can use both at the same time if you wish and "provide" the bloc to a tree of widgets.

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

Many thanks for sharing your video with us bro! could you please similar video in which you make Flutter Firebase Bloc CRUD video? you know, all the CRUD features. I'm wondering if you have plans for making Social media \ Ecommerce app, using Flutter\Block Firebase, in which you go through all the features (even advance ones), if you have similar course on Udemy, I'm willing to buy. thx

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

I'll be doing Udemy courses once I get more comfortable producing this type of content.

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

Thank you for the tutorial. I am following with the new version of Bloc, I don't know what to pass in the main, because it's complaning to pass something: class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return BlocProvider( create: (context) => FoodBloc(), //here, what I have to pass? import 'package:flutter_bloc/flutter_bloc.dart'; import '../events/food_event.dart'; import '../model/food.dart'; class FoodBloc extends Bloc { @override FoodBloc(List initialState) : super(initialState); @override Stream mapEventToState(event) async* { switch (event.eventType) { case EventType.add: List newState = List.from(state); //esse state é da classe bloc, função get state if (event.food != null) { newState.add(event.food); } yield null; break; case EventType.delete: List newState = List.from(state); newState.removeAt(event.foodIndex); break; default: Exception('Event not found $event'); } } }

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

I change the constructor to: @override FoodBloc() : super([]); I don't know if it's right let the constructor like this, but stop getting error. I discover, I didn't add yield newState. Now it's working. I update with flutter_bloc: ^6.1.1, and I have to install bloc: ^6.1.1, to work. Another question, I read about streams and need to close, in this case, doesn't need to close? If needs, how I close?

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

This video is probably a little outdated with the newer versions of bloc. I should probably do an updated video this year. Streams are out of the scope of this video. If you're talking about the block itself, you can just do: dispose(){ super.dispose(); _bloc.dispose(); }

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

are u using linux? if yes then which distro

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

Always a Mac. Not easy to setup ios development without one.

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

I need a little help in the understanding of Streamsin RxDart in bloc - login example: bloclibrary.dev/#/flutterfirebaselogintutorial?id=login-bloc

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

Someone channel real um react native for advanced examples?

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

This video was targeted to beginners. What type of examples are you interested in?

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

One thing that is really annoying me when I follow some tutorials, is the inexplicable incompatibility with newer libraries. BlocDelegate doesn't even exist anymore how I'm supposed to finish it now, every place uses bloc differently.

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

That's the world of software development. It's a rapidly changing area that requires continuous learning. Things go out of date quickly. I'll probably do a follow up video on Bloc shortly. Also there is hardly ever only one way to do anything. That's one of the things l like about software development. You need to think about the best way to do something for your particular situation. That comes with experience. I would think coding is boring if there was only one way to do everything.

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

i am stuck here too. Had to use previous version of flutter_bloc to make it work

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

@@TheFlutterFactory i am stuck pls make a new video for it pls

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

Use BlocObserver. BlocObserver gives the behavior of the Bloc instances. You can override these methods too

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

why are we still using stateful widgets

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

"We" aren't. This video is a year and a half old 😉

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

Like a redux way

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

Redux in Flutter isn't as useful as it is in React Native

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

why does the bloc hold state?

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

That's the point of Bloc.. It's a state management system. What are you asking?

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

@@TheFlutterFactory I read up on it in the meantime, it seems that the bloc should also hold any temporary state, and long term state should be held in a local/server db. I don't know why but I was excepting the state to be accessed in the bloc and not kept as a bloc variable.

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

Correct. state isn't the same as storage

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

help, im stuck with Blocsupervisor

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

I can't help if you don't add more details first.

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

@@TheFlutterFactory im stuck at 15:26 of your video, where you used Blocsupervisor, is Blocsupervisor still available to be use? sorry im new to flutter

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

I'm not sure if it's still available, I haven't used Bloc in over a year. They might have removed it in V5. You'll have to check the docs. I'll probably end up doing v5 tutorial about it this year since bloc is still relatively popular.

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

Make on advance bloc and bro plz change your channel name!

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

What do you mean by "change your channel"? and Why?

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

@@TheFlutterFactoryno bro channel name!

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

@@HimanshuYT why?

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

@@TheFlutterFactory doesn't catching name make it short while searching your channel i didn't got your channel

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

This was confusing as hell.

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

I'm sorry you felt that way. Which part was confusing for you?

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

@@TheFlutterFactory it's just really one of those things that isn't clicking. There's 3-5 different files that are cross communicating in a way that just doesn't seem to make sense. And that's before you even use it in your actual app. Not your fault that bloc is confusing, just not getting it.

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

@@michaeltolsma7717 bloc is really annoying and confusing. Providers are much more simple. I don't understand why anyone would even use bloc. But still learning it just in case I need it. But this video is so far the best video that I have come across.

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

@@kapiljhajhria wait can we manage state using providers also really? I'm new to flutter can I know how many state managements are there for flutter

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

@@saicharansigiri2964 yes, you can use providers. For majority of apps you won't have to use bloc. Only in cases where app consists of maybe 20+ screens then you might have to use state management. But you can create so many apps without ever using bloc. Provider is the recommend method by flutter team as well. Watch flutter channel latest q&a videos that were posted a week ago. They have even recommended provider for state management in that video.