Bloc: BlocProvider.of() called with a context that does not contain a Cubit of type

[lambasoft]

Hello,

I'm sure there is something that I did wrong, but I cant seem to find what it is exactly.

I have the following register_screen.dart

class RegisterScreen extends StatelessWidget {
  static Route route() {
    return MaterialWithModalsPageRoute<void>(builder: (context) => RegisterScreen());
  }

  @override
  Widget build(BuildContext context) {
    final textTheme = Theme.of(context).textTheme;
    final colorScheme = Theme.of(context).colorScheme;

    return MultiBlocProvider(
      providers: [
        BlocProvider<ValidationCubit>(
          create: (BuildContext context) => ValidationCubit(context.repository<AuthenticationRepository>()),
        ),
        BlocProvider<RegisterBloc>(
          create: (BuildContext context) => RegisterBloc(),
        )
      ],
      child: MultiBlocListener(
        listeners: [
          BlocListener<ValidationCubit, ValidationCubitState>(
            listener: (context, state) {
              switch (state.status) {
                case FormzStatus.submissionSuccess:
                  Navigator.of(context).push(CodeSubmit.route());
                  break;

                default:
                  break;
              }
            },
          ),
          BlocListener<RegisterBloc, RegisterState>(
            listener: (context, state) {

            },
          ),
        ],
        child: PhoneRegister(),
      ),
    );

  }
}

When the form get's submited from PhoneRegister() a FormzStatus.submissionSuccess get's emitted. This is working perfectly.
Now when I get navigated to CodeSubmit.route(), I can't seem to use the ValidationCubit

code_submit.dart

class CodeSubmit extends StatefulWidget {
  static Route route() {
    return MaterialPageRoute<void>(builder: (context) => CodeSubmit());
  }

  @override
  _CodeSubmitState createState() => _CodeSubmitState();
}

class _CodeSubmitState extends State<CodeSubmit> {
  @override
  Widget build(BuildContext context) {
    final ValidationCubit _signUpCubit = BlocProvider.of<ValidationCubit>(context);

    final textTheme = Theme.of(context).textTheme;
    final colorScheme = Theme.of(context).colorScheme;

    return Container();
  }
}

Why is BlocProvider.of(context) failing to fetch the ValidationCubit eventho it got passed using MultiBlocProvider?

[felangel]

Hi @lambasoft 👋
Thanks for opening an issue!

The problem here is when you push a new route, the BuildContext of the new route is disconnected from the previous BuildContext so you need to re-provide the cubit using BlocProvider.value

class CodeSubmit extends StatefulWidget {
  static Route route(ValidationCubit validationCubit) {
    return MaterialPageRoute<void>(builder: (_) => BlocProvider.value(value: validationCubit, child: CodeSubmit()));
  }

  @override
  _CodeSubmitState createState() => _CodeSubmitState();
}

Hope that helps 👍

Closing for now but feel free to comment with additional questions and I'm happy to continue the conversation 😄

[lambasoft]

@felangel

Thank you for your answer, and sorry for the late reply.
Your example worked perfectly, but in case I wanted to pass multiple cubits/blocs do I have to pass them all as arguments? I can't use MultipleBlocProvider?

I should use a navigatorKey with a NavigationService injected to all pages using get_it?

[felangel]

@lambasoft in most cases I wouldn't recommend having a global navigatorKey and instead just using the nearest Navigator using the current BuildContext.

[lambasoft]

@felangel Thank you :)