Modal Bottom Sheet and Bloc

Question

I get the following error when I run code similar to the below code: BlocProvider.of() called with a context that does not contain a Bloc.

To replicate

BlocProvider(
          create: (context) => getIt<TheBloc>()
          child: BlocBuilder<TheBloc, TheState>(
          build: (context, state) =>
          MaterialButton(
            onPressed: () => _showModal(context),
            child: const Text('SHOW BLOC MODAL'),
),

...

void _showModal(BuildContext context) {
  showModalBottomSheet<void>(
    context: context,
    builder: (_) {
          return MaterialButton(
               onPressed() {
                       context.bloc<TheBloc>().add(
                         TheEvent.someEvent(),
                       );
               }
              child: Text('Press button to add event to bloc')
          );
    },
  );
}

I reviewed you snippets - this example should work. I guess reason somewhere in you real code — Sergey Salnikov, Jun 30 '20 at 09:32
@SergeySalnikov the issue was this code, I fixed it by wrapping the builder of the modal in a BlocProvider.value as per the bloc api reference. I've added the answer to the question. Thanks — Gerry, Jul 01 '20 at 01:33

score 15 · Accepted Answer · answered Jul 01 '20 at 01:31

15

You need to wrap the builder of showModalBottomSheet with a BlocProvider.value as follows: As the context is new.

return BlocProvider.value(
     value: BlocProvider.of<TheBloc>(context),
     child: MaterialButton( ...
     ...

answered Jul 01 '20 at 01:31

Gerry

1,159
1
14
29

5

It will more clear if you pass bloc to `_showModal(TheBloc bloc)` and skip unnessesssary lookup in context =) – Sergey Salnikov Jul 01 '20 at 05:01
can u please explain it little bit more – PremchandGat Apr 21 '23 at 13:49

score 2 · Answer 2 · answered Feb 12 '22 at 08:03

Actually if you need this bloc only in bottom sheet and nowhere else, the better and cleaner solution is create the StatefullWidget for bottom sheet content, create the Bloc inside this widget in initState() work with bloc in build() method and free resources in dispose() method.

  showModalBottomSheet<void>(
    context: context,
    builder: (_) {
          return MyBottomSheet(); // your stateful widget
        );
    },
  );

Using bloc like above guarantee that state of your bloc will be the same on each showModalBottomSheet call

Note. If you need to preserve state of bloc, you can try to use AutomaticKeepAliveClientMixin (did not tested)

Modal Bottom Sheet and Bloc

2 Answers2