Flutter – Could not find the correct Provider<> above this BlocListener<, > Widget

I’m encountering the following error in my Flutter application:
Error: Could not find the correct Provider<SettingsBloc> above this BlocListener<SettingsBloc, SettingsState> Widget.

I’m using the GetIt and Injectable packages for dependency injection. Below are the relevant parts of my code:

settings_bloc.dart

@lazySingleton
class SettingsBloc extends HydratedBloc<SettingsEvent, SettingsState> { 
  // Bloc implementation
}

settings_page.dart

class SettingsPage extends StatelessWidget {
  const SettingsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocListener<SettingsBloc, SettingsState>(
      listenWhen: (previous, current) => previous.locale != current.locale,
      listener: (context, state) => context.setLocale(state.locale),
      child: BlocBuilder<SettingsBloc, SettingsState>(
        builder: (context, state) {
          return Scaffold();
        },
      ),
    );
  }
}

app_router.dart

GoRoute(
  path: '/tools',
  pageBuilder: (context, state) => CustomTransitionPage(
    key: state.pageKey,
    child: ToolsPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) =>
        FadeThroughTransition(
      animation: animation,
      secondaryAnimation: secondaryAnimation,
      child: child,
    ),
  ),
  routes: [
    GoRoute(
      path: 'settings',
      pageBuilder: (context, state) => CustomTransitionPage(
        key: state.pageKey,
        child: BlocProvider.value(
          value: getIt<SettingsBloc>(),
          child: const SettingsPage(),
        ),
        transitionsBuilder: (context, primaryAnimation, secondaryAnimation, child) =>
            FadeThroughTransition(
          animation: primaryAnimation,
          secondaryAnimation: secondaryAnimation,
          child: child,
        ),
      ),
      routes: [
        GoRoute(
          path: 'theme_selection',
          pageBuilder: (context, state) => CustomTransitionPage(
            key: state.pageKey,
            child: const ThemeSelectionPage(),
            transitionsBuilder: (context, animation, secondaryAnimation, child) =>
                FadeThroughTransition(
              animation: animation,
              secondaryAnimation: secondaryAnimation,
              child: child,
            ),
          ),
        ),
      ],
    ),
  ],
),

injection.config.dart

extension GetItInjectableX on GetIt {
  GetIt init({
    String? environment,
    EnvironmentFilter? environmentFilter,
  }) {
    final gh = GetItHelper(
      this,
      environment,
      environmentFilter,
    );
    final injectableModule = _$InjectableModule();
    gh.factory<FirebaseAuth>(() => injectableModule.firebaseAuth);
    gh.factory<GoogleSignIn>(() => injectableModule.googleSignIn);
    gh.singleton<Logger>(() => injectableModule.logger);
    gh.singleton<NotificationService>(() => injectableModule.notificationService);
    gh.lazySingleton<SettingsBloc>(() => SettingsBloc());
    // Other dependencies...
    return this;
  }
}

class _$InjectableModule extends InjectableModule {}

Issue:

When navigating to the SettingsPage, I receive the error stating that the Provider<SettingsBloc> cannot be found above the BlocListener. I’ve ensured that SettingsBloc is registered as a lazySingleton in GetIt and provided it using BlocProvider.value in the router.

Question:

What could be causing the Provider<SettingsBloc> not to be found above the BlocListener, and how can I resolve this issue to ensure that SettingsBloc is properly provided to the SettingsPage?

I attempted to wrap the MaterialApp.router() with a MultiBlocProvider and include SettingsBloc as one of the providers. Here is the code snippet:

@override
Widget build(BuildContext context) {
  return MultiBlocProvider(
    providers: [
      BlocProvider(create: (_) => getIt<AuthBloc>()),
      BlocProvider(create: (_) => SettingsBloc()),
    ],
    child: MaterialApp.router(
      // ... other configurations
    ),
  );
}