BLoC: how to pass it?

Question

I would like to know the best way to pass the bloc. I read about the bloc providers, but what`s the difference between using them and just passing the bloc in the constructor like:

ExampleView X = ExampleView(bloc,...)

Actually I find this way easier to test and also a better way to keep the code cleaner. For example, if I have more blocs, something like this can happen:

XBlocProvider(
                  bloc: XBloc,
                  child: YBlocProvider(
                      bloc: Y,
                      child: ZBlocProvider...
                    )

or maybe it's just my lack of knowledge. So, which ones are the benefits?

Solution 1

The problem with this:

ExampleView X = ExampleView(bloc,...)

It only make sense if you use your bloc as normal class/provider with some Stream\ValueNotifier. Otherwise it has some issues.

If it's global bloc, it's more exhausting way to pass it. You should use XBlocProvider on top of MaterialApp.

By the way, if it's global/top level bloc, you can do this:

XBlocProvider(
  bloc: xBloc, // Singleton
  child XPage,
...

This way, you can access this bloc from anywhere of the application and also you can listen it.

If it's local bloc, because the way we listen Bloc or ChangeNotifierProvider via InheritedWidget's updateShouldNotify method, it doesn't make sense to pass as constructor because you can't use it directly as you intended. You need to put that instance inside BlocProvider and consume it again, so it's extra work.

https://api.flutter.dev/flutter/widgets/InheritedWidget/updateShouldNotify.html

To overcome multi nested BlocProviders you can use MultiProvider or MultiBlocProvider.

Example:

MultiBlocProvider(
  providers: [
    XProvider(...),
    YProvider(...),
    ZProvider(...),
  ],
  child: someWidget,
)

There are multi ways to pass depends on your need but don't worry about InheritedWidget because it's pretty fast and convenient way to obtain your XBlocProvider.

At the end, try to comprehend every approach, I especifically suggest you to grasp this article:

https://www.didierboelens.com/2018/12/reactive-programming---streams---bloc---practical-use-cases/

You'll get the idea when to use bloc with provider or as a singleton or instantiate like your example etc.

Solution 2

The first difference is how you access your bloc from the widget.

• when you pass it through the constructor you have direct access to it
• when you use BlocProvider then, in most cases depending on your bloc implementation, you have obtain it via Provider which extends InheritedWidget using context for example:

final xBloc = Provider.of<XBloc>(context);

What's more when you wrap your bloc with BlocProvider then your bloc's scope is limited to this widget's subtree so it can be only accessed by the BlocProviders descendants.