Flutter use BlocListener and BlocBuilder inside MultiBlocProvider

Question

In my program, I have two different Blocs bloc1 and bloc2. I use MultiBlocProvider and add those two blocs. now I want to use BlocListener and BlocBuilder both inside the MultiBlocProvider. For bloc1 I want to BlocBuilderand for bloc2 I want to BlocListener. How can I do that?

Scaffold(
      body: MultiBlocProvider(
        providers: [
          BlocProvider<GenerateFieldsBloc>(
            create: (_) => bloc1,
          ),
          BlocProvider<SubmitFieldBloc>(
            create: (_) => bloc2,
          ),
        ],
        child:() //here how can I use both BlocListener and BlocBuilder ???
     ),
);

score 4 · Accepted Answer · answered Nov 29 '21 at 11:19

4

You could nest them as follows:

BlocListener<SubmitFieldBloc, SubmitFieldState>(
  listener: (context, state) {
    // listen to SubmitFieldBloc
  },
  child: BlocBuilder<GenerateFieldsBloc, GenerateFieldsState>(
    builder: (context, state) {
       // build with GenerateFieldsBloc 
    }
  ),
)

answered Nov 29 '21 at 11:19

Stefan Galler

781
4
12

I think using a `BlocConsumer` can reduce the boilerplate code since it combines both `BlocListener` and `BlocBuilder` in one widget :) – CoderUni Sep 19 '22 at 16:54

score 1 · Answer 2 · answered Nov 29 '21 at 11:18

If you wrap the child with a builder widget you can use these providers. But you make sure to use the builder's context when reading providers.


Scaffold(
      body: MultiBlocProvider(
          providers: [
            BlocProvider<GenerateFieldsBloc>(
              create: (_) => bloc1,
            ),
            BlocProvider<SubmitFieldBloc>(
              create: (_) => bloc2,
            ),
          ],
        child: Builder(
          builder: (context) {
            return BlocListener<GenerateFieldsBloc, GenerateFieldsState>(
            listener: (context, state) {
              // TODO: implement listener
            },
            child: BlocBuilder<SubmitFieldBloc, SubmitFieldState>(
              builder: (context, state) {
                return Text('asdasd');
              },
            ),
          );
          }
        ),
      ),
    );

This is also correct. Thank you very much. – Akila Ishan Nov 29 '21 at 12:00 — Akila Ishan, Nov 29 '21 at 12:00

score 1 · Answer 3 · answered Nov 09 '22 at 19:22

What you want is BlocConsumer which is a combo of BlocBuilder and BlocListener. This article gives a good description of the differences between the three. Here is the code snippet from that article for BlocConsumer:

BlocConsumer<OrdersBloc, OrdersState>(
  listenWhen: (context, state) {
    return state is OrdersState.OrderCompleted ||
        state is OrdersState.OrderRefunded;
  },
  listener: (context, state) {
    if (state is OrdersState.OrdersCompleted) {
      // Navigate to next screen
      Navigator.of(context).pushNamed('OrderCompletedScreen');
    } else if (state is OrdersState.OrderRefunded) {
      // Report to analytics
      Analytics.reportRefunded(state.orderId);
    }
  },
  buildWhen: (context, state) {
    return state is OrdersState.OrderCompleted ||
        state is OrdersState.OrderInProgress ||
        state is OrdersState.OrderRequested;
  },
  builder: (context, state) {
    if (state is OrdersState.OrderCompleted) {
      return Container(child: Text('Order Served!'));
    } else if (OrdersState.OrderInProgress) {
      return Container(child: Text('In Progress'));
    } else {
      return Container(child: Text('No State'));
    }
  },
);

Flutter use BlocListener and BlocBuilder inside MultiBlocProvider

3 Answers3