MultiRepositoryProvider doesn't instantiate Bloc

Question

I recently started developing an app in Flutter, so I'm fairly new to the area. So I've been looking into using Blocs. However when I Instantiate my Bloc and my services everything works fine. That is, until I use MultiRepositoryProvider. I have 2 code snippets. The first one:

return RepositoryProvider<AuthenticationService>(
      create: (context) {
        return FakeAuthenticationService();
      },
      // Injects the Authentication BLoC
      child: BlocProvider<AuthenticationBloc>(
        create: (context) {
          final authService = RepositoryProvider.of<AuthenticationService>(context);
          return AuthenticationBloc(authService)..add(AppLoaded());
        },
        child:  MaterialApp(
          title: 'Authentication Demo',
          theme: appTheme(),
          home: BlocBuilder<AuthenticationBloc, AuthenticationState>(
            builder: (context, state) {
              if (state is AuthenticationAuthenticated) {
                // show home page
                return HomePage(
                  user: state.user,
                );
              }
              // otherwise show login page
              return StartupPage();
            },
          ),
        )
      ),
    );

This code works fine, but the second snippet which is exactly the same, except it utilized MultiRepositoryProvider doesn't work. Second code:

return MultiRepositoryProvider(
      providers: [
        RepositoryProvider<AuthenticationService>(
          create: (context) => FakeAuthenticationService(),
          child: BlocProvider<AuthenticationBloc>(
            create: (context) {
              final authService = RepositoryProvider.of<AuthenticationService>(context);
              return AuthenticationBloc(authService)..add(AppLoaded());
            },
          ),
        )
      ],
      child: MaterialApp(
        title: 'Authentication Demo',
        theme: appTheme(),
        home: BlocBuilder<AuthenticationBloc, AuthenticationState>(
          builder: (context, state) {
            if (state is AuthenticationAuthenticated) {
              // show home page
              return HomePage(
                user: state.user,
              );
            }
            // otherwise show login page
            return StartupPage();
          },
        ),
      ),
    );

Now this second code gives me the error BlocProvider.of() called with a context that does not contain a Cubit of type AuthenticationBloc.

Does anyone know why this second code doesn't work?

Answer 1

I'm working on the same thing and I got an error but now resolved

return MultiRepositoryProvider(
    providers: [
      RepositoryProvider<TranslationRepository>(
        create: (context) => TranslationRepository(),
      ),
      RepositoryProvider<WeatherRepository>(
        create: (context) => WeatherRepository(),
      ),
    ],
    child: MultiBlocProvider(
        providers: [
          BlocProvider<WeatherBloc>(
            create: (context) =>
                WeatherBloc(context.read<WeatherRepository>()),
          ),
          BlocProvider<ConnectivityBloc>(
            create: (context) => ConnectivityBloc(),
          ),
          BlocProvider<TranslationBloc>(
            create: (context) =>
                TranslationBloc(context.read<TranslationRepository>()),
          ),
        ],
        child: MaterialApp(
          title: 'Material App',
          onGenerateRoute: router.generateRoute,
          initialRoute: '/',
        )));

First, in my create function I overrided the context with "_" but I got the same error. Now with this snippet it works perfectly, just put the same context name as my providers before

Answer 2

Error: Could not find the correct Provider above this AppWrapper Widget

I was getting this error that Provider not found in current path or context. And now the following code works fine. The only change I made is to write "context" instead of "_" in create method of Providers:

Change these lines from create: (_) to create: (context)

Correct Code

class AppWrapper extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiRepositoryProvider(
      providers: [RepositoryProvider<AuthRepository>(create: (_) => AuthRepository())],
      child: MaterialApp(
        title: 'Pokedex App',
        theme: themeData,
        home: MultiBlocProvider(
          providers: [
            BlocProvider<AuthBloc>(
              create: (_) => AuthBloc(
                authRepository: context.read<AuthRepository>(),
              ),
            ),
            BlocProvider(
              create: (_) => LoginCubit(
                authRepository: context.read<AuthRepository>(),
              ),
            ),
            BlocProvider(
              create: (_) => SignupCubit(
                authRepository: context.read<AuthRepository>(),
              ),
            ),
          ],
          child: SignupScreen(),
        ),
      ),
    );
  }
}