Home > other >  Flutter - Error in hot reload using lazy internationalization
Flutter - Error in hot reload using lazy internationalization

Time:06-03

I'm building an application that uses lazy internationalization, this way there will be no translation files in the application and all translations will be fetched from the internet when a new page is opened. For that I am using a localization cubit.

Each screen of my application is divided into a "view" that receives the translated messages as a parameter, a "cubit" that contains the cubit screen and its states, and a "container" that contains the BlocProvider for the cubit and the screen.

For now my app starts in the presentation screen, after that it goes to the login screen and finally goes to the home screen.

So in the main file, instead of using the presentation screen directly, I use the localization container and the presentation container comes as its child:

return MaterialApp(
      title: 'My App',
      theme: myTheme(context),
      debugShowCheckedModeBanner: false,
      home: LocalizationContainer(
        child: PresentationContainer(),
      ),
    );

The PresentationContainer is composed this way:

class PresentationContainer extends BlocContainer {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => PresentationCubit(),
      child: I18NLoadingContainer(
        language: BlocProvider.of<CurrentLocaleCubit>(context).state,
        viewKey : "Presentation",
        creator: (messages) => PresentationView(PresentationViewLazyI18N(messages)),
      ),
    );
  }
}

So in the container I have a BlocProvider with PresentationCubit and I18NLoadingContainer as a child.

I18NLoadingContainer just obtains the transalted messages according to the language provided and the screen name, that is "Presentation" in this case. The translated messages are returned in the variable messages, so this messages are passed as parameter to the screen.

If I use this only for my presentation screen everything works fine, but the issue comes when I need to open a new page.

After the presentation screen I need to open the login screen. So in the PresentationView I have the following function when the user clicks the button to open the login screen:

  void _goToLogin(BuildContext blocContext) {
    Navigator.of(blocContext).pushReplacement(
      MaterialPageRoute(
        builder: (context) => BlocProvider.value(
          value: BlocProvider.of<CurrentLocaleCubit>(blocContext),
          child: LoginContainer(),
        ),
      ),
    );
  }

And the LoginContainer works exaclty as the PresentationContainer:

class LoginContainer extends BlocContainer {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => LoginCubit(),
      child: I18NLoadingContainer(
        language: BlocProvider.of<CurrentLocaleCubit>(context).state,
        viewKey : "Login",
        creator: (messages) => LoginView(LoginViewLazyI18N(messages)),
      ),
    );
  }
}

If I keep in the presentation screen and use the hot reload everything works fine, but if I open a new screen using this method, I got the following error when try to use hot reload:

The following _CastError was thrown building Builder(dirty): Null check operator used on a null value

CodePudding user response:

I'm not sure your LoginContainer is still wrapped by the LocalizationContainer when you change the route. I would suggest you to provide a CurrentLocaleCubit above the MaterialApp widget and check whether it's working or not. I think you're loosing a CurrentLocaleCubit instance

  • Related