If we have 3 BLoCs in the BlocProvider, Can we use 2 BLoCBuilders in the same class?

Viewed 3540

Suppose I have 3 BLoCs in the BlocProviderTree, it means that these blocs are available for the class. one of them is used as BlocListener, now I want the other two BLoCs to be used as BlocBuilders because I need to build state of both of them on the same page. BlocListener accepts child and not children. Please help!

BlocListener accepts child and not children. Please help!

BlocProviderTree(
            blocProviders: [

              BlocProvider<EvenBloc>(bloc: _evenBloc),
              BlocProvider<SumBloc>(bloc: _sumsBloc,),
              BlocProvider<SpacesBloc>(bloc: _spacesBloc,),

            ],
            child: BlocListener(
                bloc: _evenBloc,
                listener: (BuildContext context, EvenState state) {
                  if (state is NowEven) {
                    _sumsBloc.dispatch(LoadSums());
                  }
                },

                child: BlocBuilder<SumsEvent,SumsState>(
                  bloc: _programsBloc,
                  builder: (BuildContext context, SumsState state) {
                    if (state is SumsEmpty)
                      return Container(height: 0.0, width: 0.0,);
                    if (state is SumsLoading)
                      return Evens(
                        child: SpinKitDoubleBounce(
                          color: darkIndigo,
                          size: 70.0,
                        ),
                      );
                    else if (state is SumsLoaded)
                      return _body( context,state.sums);
                  },
                )
            )
        ),

I want SpaceNames with sums if the number of items is even. I am getting sums correctly but Spaces are in other bloc. How do I define two BlocBuilders?

1 Answers

You can nest BlocBuilders within each other:

BlocBuilder(
  bloc: BlocProvider.of<Foo>(context),
  builder: (context, FooState fooState) {
    return BlocBuilder(
      bloc: BlocProvider.of<Bar>(context),
      builder: (context, BarState barState) {
        return Text('$fooState $barState');
      },
    );
  },
);
Related