Internationalization with cubit

Question

I'm working on a project and I've been asked to use cubit for internationalization, preferably using the lazy method. For that I have a LocalizationContainer as follows:

class LocalizationContainer extends BlocContainer {
  final Widget child;

  LocalizationContainer({required this.child});

  @override
  Widget build(BuildContext context) {
    return BlocProvider<CurrentLocaleCubit>(
      create: (context) => CurrentLocaleCubit(),
      child: child,
    );
  }
}

class CurrentLocaleCubit extends Cubit<String> {
  CurrentLocaleCubit() : super("pt-br");
  CurrentLocaleCubit() : super("en-us");
}

In my main file I have the following:

MaterialApp(
      title: 'Example',
      theme: exampleTheme(context),
      debugShowCheckedModeBanner: false,
      home: LocalizationContainer(
        child: InitialScreenContainer(),
      ),
);

In this example the child of LocalizationContainer is another container representing the screen. Each screen is structured into container, cubit and view:

The container for screen have the following structure:

class ExampleScreenContainer extends BlocContainer {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => ExampleScreenCubit(),
      child: I18NLoadingContainer(
        language: BlocProvider.of<CurrentLocaleCubit>(context).state,
        viewKey : "Example",
        creator: (messages) => ExampleScreenView(ExampleScreenViewLazyI18N(messages)),
      ),
    );
  }
}

Everytime a new page needs to be opened, I do the following:

Navigator.of(blocContext).push(
      MaterialPageRoute(
        builder: (context) => BlocProvider.value(
          value: BlocProvider.of<CurrentLocaleCubit>(blocContext),
          child: NewScreenContainer(),
        ),
      ),
    );

But whenever I try to hot reload a error pops up. It only works if I do the hot restart. Does somebody know how to solve this problem, or this internationalization method is wrong?

score 0 · Answer 1 · answered May 16 '22 at 22:33

I did not really get the problem (I think if you put the error that's pop up I can help you more), but this way I do localizations (I use bloc). first off all you need to add BlocProvider above MaterialApp so he become ancestor to every widget in context tree, so when ever you called BlocProvider.of(context) you can get the instance of this bloc where ever you are in the tree (no need to do BlocProvider above every screen you are pushing). now when ever you change language of your app and yield the new state the BlocBuilder will rebuild the whole app with the new language.

class AppProvider extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiBlocProvider(providers: [
      BlocProvider<AppBloc>(
        create: (_) => sl<AppBloc>()
    //get app default language
          ..add(const AppEvent.initialEvent()),
      ),
    ], child: App());
  }
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<AppBloc, AppState>(
      builder: (context, state) => MaterialApp(
        debugShowCheckedModeBanner: false,
        home: SplashScreen()),
        locale: state.language == AppLanguageKeys.AR
            ? const Locale('ar', '')
            : const Locale('en', ''),
        localizationsDelegates: [
          AppLocalizations.delegate,
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
        ],
        supportedLocales: [
          const Locale('en', ''), // English
          const Locale('ar', ''), // Arabic
        ],
      ),
    );
  }
}

Internationalization with cubit

1 Answers1