Flutter BLoC multiple BLoCs same widget

Question

I'm relatively new to Flutter and the BLoC pattern, so I'm still trying to wrap my head around everything.

Let's say I have a quiz app where I have a BLoC called QuestionBloc which uses a repository to fetch questions from a file. Event on QuestionBloc

• FetchQuestion

States on QuestionBloc

• QuestionEmpty
• QuestionLoading
• QuestionLoaded which contains a question object
• QuestionError

I then have another BLoC called QuestionValidatorBloc which is responsible for validating the answers to the question. The answer is entered into a text field and there is a submit button to trigger the validation. Event on QuestionValidatorBloc

• ValidateQuestion

States on QuestionValidatorBloc

• ValidateInitial
• ValidateInProgress
• ValidateSuccess
• ValidateError

This is fairly straight forward. However, now I need to incorporate both QuestionBloc and QuestionValidatorBloc into the same widget since one of them is responsible for fetching and displaying the question and the other for handling the validation action. How can I achieve this?

Monkfish

What if you use just one BloC, and 2 or more subjects? You're using the same widget. So its better to have only one BLoC and streams builders as needed – Dolor

Split two different job in two bloc is positive imo. I saw a lot of peope told one bloc for one page, but I thought they didn't see more complex use case. In this case, validation and api call is absolutely different job, I don't know why use one is better adoption. – Arron

What if I need another bloc, inside of this bloc? I'm talking about using 2+ bloc's inside of bloc. I would probably have 2 subscriptions, but how would I nest it? State listener in another state listener is bad approach :/ I'm stuck – Mesa

Answer 1

I assumed you are using the flutter_bloc library. Let the QuestionBloc listen to the QuestionValidatorBloc using StreamSubscription

class QuestionBloc extends Bloc<QuestionEvent, QuestionState> {
  QuestionValidatorBloc questionValidatorBloc;
  StreamSubscription subscription;

  MainPageBloc({@required this.questionValidatorBloc}) {
    subscription= questionValidatorBloc.state.listen((state) {
      if (state is ValidateSuccess) {
        dispatch(YourEvent());
      } else if(state is ValidateError{
        dispatch(AnotherEvent());
      }
    });
  }

...

Now you just have to pass the QuestionValidatorBloc to the QuestionBloc constructor.

Schoening

What if I need another bloc, inside of this bloc? I'm talking about using 2+ bloc's inside of bloc. I would probably have 2 subscriptions, but how would I nest it? State listener in another state listener is bad approach :/ I'm stuck – Mesa

@Mesa Have you figured it out? – Snowshed

@Spectarion no, i'm simply not using bloc anymore, you should try mobx – Mesa

@AnisAlibegić since bloc.state is a Stream you could combine multiple streams together and then listen to a combination of streams as a single Stream object. if dart doesn't have anything for that rxdart library definitely has – Bliss