1

**Hello I am new to flutter and bloc architecture. I am trying to build a simple quiz app that has a timer. On the quiz page, I have two blocs, a counter cubit to navigate to the next question, and a triviabloc for quiz activities like answer selection.

I am using MultiBlovProvider to provide the blocs.

I need each bloc to communicate with each other. Since each of the blocs is a parameter to the other, how do I pass it in the multiblocprovider ?**

 var bloc = TriviaBloc();
                                    var con = CountDownController();
                                    // ignore: close_sinks
                                    var cubit = CounterCubit(
                                        bloc: bloc, controller: con);
                                    return MultiBlocProvider(
                                      providers: [
                                        BlocProvider<TriviaBloc>(
                                          create: (context) => bloc,
                                          
                                        ),
                                        BlocProvider<CounterCubit>(
                                            create: (context) => cubit)
                                      ],
                                      child:
                                          QuestionScreen(trivia: questions),
                                    );

the cubit

    class CounterCubit extends Cubit<int> {
  StreamSubscription sub;
  CounterCubit({this.controller, this.bloc}) : super(0) {
    sub = bloc.listen((state) {
      if (state is AnswerCorrect || state is AnswerNotCorrect) {
        controller.pause();
      }
    });
  }
  final TriviaBloc bloc;

  final CountDownController controller;

  void increment() => emit(state + 1);

  @override
  Future<void> close() {
    sub?.cancel();
    return super.close();
  }

  @override
  void onChange(Change<int> change) {
    print(change);
    super.onChange(change);
  }
}

the bloc that must listen to the cubit

    class TriviaBloc extends Bloc<TriviaEvent, TriviaState> {
  StreamSubscription sub;

  TriviaBloc({this.cubit}) : super(TriviaInitial()) {
    sub = cubit.listen(
      (state) async* {
        if (state != 0) {
          yield TriviaInitial();
        }
      },
    );
  }
  final CounterCubit cubit;

  Stream<TriviaState> mapEventToState(TriviaEvent event) async* {
    if (event is AnswerCLicked) {
      print(event.answer);
      if (event.answer == event.correctAnswer) {
        yield AnswerCorrect();
      } else {
        yield AnswerNotCorrect();
      }
    }

    if (event is NoAnswerChosen) {
      yield ShowAnswer();
    }
  }

  @override
  Future<void> close() {
    sub?.cancel();
    return super.close();
  }
}

Thank you

Abdul-Azeez
  • 11
  • 1
  • 3

2 Answers2

1

You pass one bloc as an argument to a 2nd bloc. Now, within the 2nd bloc, you can get values from the 1st bloc's state. This is an approach for that:

if (userBloc.state is AppSettled) {
      achievements = (userBloc.state as AppSettled).achievements;

userBloc is the bloc that I passed to the 2nd bloc, AppSettled is a state of userBloc, and achievements is a variable defined within that state.

In order to pass data back, you can this answer

w461
  • 2,168
  • 4
  • 14
  • 40
1

Not sure if this is what you are looking for, but this is what I do to make sure that if the user authorization state changes they JobListCubit actually triggers a route to authorization screen.

In my main.dart:

MultiBlocProvider(
      providers: [
        BlocProvider<UserAuthCubit>(
          lazy: true,
          create: (context) => UserAuthCubit(
            UserAuthRepository(),
          ),
        ),
        BlocProvider<JobListCubit>(
            lazy: true,
            create: (context) => JobListCubit(
                  jobListRepository: JobListRepository(),
                  userAuthCubit: BlocProvider.of<UserAuthCubit>(context),
                )),
 ....

Then in my JobListCubit:

class JobListCubit extends Cubit<JobListState>
    with HydratedMixin<JobListState> {
  JobListState get initialState {
    return initialState ?? JobListInitial();
  }

  final JobListRepository jobListRepository;
  final UserAuthCubit userAuthCubit;

  JobListCubit({this.jobListRepository, this.userAuthCubit})
      : super(JobListInitial());
...

Hope this is what you were looking for. I am a novice and it took me a lot of time to find a solution...