skip to Main Content

I have several cubits working in my application, but for the cubit to work it always needs to be injected into the MyApp Main of my application, is there any way to concentrate the Cubit / Bloc instances without having to fill the APP with code?

    return MultiBlocProvider(
        providers: [
          BlocProvider(
            create: (context) => AuthenticationCubit(
                secureStorage: secureStorage,
                socialAuthenticationCubit: socialAuthenticationCubit),
          ),
          BlocProvider(
            create: (context) => RegisterAccountCubit(
                secureStorage: secureStorage,
                socialAuthenticationCubit: socialAuthenticationCubit,
                uploadRepository: uploadRepository),
          ),
          BlocProvider(create: (context) => TermsCubit()),
          BlocProvider(create: (context) => EmailVerifyCubit(SecureStorage())),
          BlocProvider(
              create: (context) => AccountProfileCubit(accountRepository,
                  uploadRepository, secureStorage, communityRepository)),
          BlocProvider(
              create: (context) =>
                  ForgotPasswordCubit(authenticationRepository, secureStorage)),
          BlocProvider(create: (context) => PreferenceCubit(SecureStorage())),
        ],
        child: Container(
          child: MaterialApp(
            debugShowCheckedModeBanner: false,
            title: 'Inmigra App',
            theme: ThemeData(
              primarySwatch: primaryColor,
            ),
            localizationsDelegates: AppLocalizations.localizationsDelegates,
            supportedLocales: AppLocalizations.supportedLocales,
            locale: _locale,
            home: const SplashScreen(),
            builder: EasyLoading.init(),
          ),
        ));
  }
}

2

Answers


  1. You can have a class that returns MultiBlocProvider and takes an argument Widget<child> that you use inside MultiBlocProvider.

    class MyBlocProvider extends StatelessWidget {
      const MyBlocProvider({super.key, required this.child});
      final Widget child;
    
      @override
      Widget build(BuildContext context) {
        return MultiBlocProvider(
          providers: [
            BlocProvider(
              create: (context) => SomeBloc(),
            ),
            BlocProvider(
              create: (context) => AnotherBloc(),
            ),
          ],
          child: child,
        );
      }
    }
    

    then in your App class:

    class MyApp extends StatelessWidget {
      const MyApp({super.key});
    
      @override
      Widget build(BuildContext context) {
        return const MyBlocProvider(
            child: MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'title',
          home: HomePage(),
        ));
      }
    }
    
    Login or Signup to reply.
  2. The block mode management uses the inheritance property and you cannot call a block on a page that you have not introduced in the main root.
    So you must follow the standard structure and always introduce bloc in the main root

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search