Weird behaviour when using between multiple projects

[gcostaapps]

Describe the bug Hi, I have a really weird bug happening in my project.

I have two projects: ui_core and web. The ui_core is just a package that contains shared elements between the web project and the mobile one. The web is a flutter project for web that uses the ui_core.

The ui_core project has slang implemented and I created a custom extension to access the slang:

import 'package:flutter/widgets.dart';
import 'translations_core.g.dart';

extension AppLocalizationsCoreX on BuildContext {
  TranslationsCoreEn get i18nCore =>
      LocaleSettings.instance.currentTranslations;
}

This is exported from this package and used in the web.

The web has also slang implemented. I wrap my web application using the TranslationProvider generated in the web project, and also use the LocaleSettings.setLocaleRaw to change language using the one provided by the generated file in the web project.

Everything seems working fine, except for one page

In the web I have this page with these elements:

class OnboardingWeb extends StatelessWidget {
  const OnboardingWeb({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        _Item(),
        Expanded(
          flex: 55,
          child: LoginView(
            onGoogleSignIn: () => signingWithGoogle(context),
            onTapPrivacy: () =>
                context.beamToReplacementNamed(AppRoutes.privacy),
            languageSelectorWeb: const LanguageSelector(),
          ),
        ),
      ],
    );
  }

  Future<void> signingWithGoogle(BuildContext context) async {
    ....
  }
}

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

  @override
  Widget build(BuildContext context) {
    return _BenefitCarouselItem(
      text: context.i18nCore.auth.effectMessage,
    );
  }
}

class _BenefitCarouselItem extends StatelessWidget {
  const _BenefitCarouselItem({
    Key? key,
    required this.text,
  }) : super(key: key);

  final String text;

  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      textAlign: TextAlign.center,
      style: context.textTheme.headlineSmall,
    );
  }
}

The text inside the _BenefitCarouselItem isn't updated. But if I use context.i18nCore.auth.effectMessage instead of the text in the parameter, the text is updated. This is weird because it's the same text.

Can anyone know why that is happening? Because of this issue I'm afraid that the same problem is happening in other parts of the app that I can't see.

[Tienisto]

If I understood your issue correctly, then the widget might not be updated because the widget is not marked to be rebuilt.

The expression context.i18nCore.auth.effectMessage seem to be a bit misleading because it does not access the context at all (it may be syntactic sugar so it's ok).

What you need is final t = Translations.of(context) (the Translations class from web). This will mark the widget to be rebuilt when the locale changes. Alternatively, just Translations.of(context) is enough. Usually, you only need this in the app settings page or other selected pages.

In summary, context.i18nCore.auth.effectMessage is a static call so Flutter does not know that this is locale dependent. Translations.of(context) is needed.

In most parts of the app, only the static call is enough.

[gcostaapps]

Thanks @Tienisto , changing the extension from the core package to the code below fixed the issue

extension AppLocalizationsX on BuildContext {
  TranslationsCoreEn get i18nCore => Translations.of(this);
}

Doing that I was asked to provide the TranslationProvider to my widget. Adding both provider from the web, and from the core, fixed the issue.

The weird thing is that the extension that I use in the web needs to be:

extension AppLocalizationsX on BuildContext {
  TranslationsEn get i18n => LocaleSettings.instance.currentTranslations;
}

Because if I change to Translations.of(this), it stops working. Do you know why? At least everything is working now

[Tienisto]

Because if I change to Translations.of(this), it stops working.

What exact error message do you get?

[gcostaapps]

I don't get any errors, but when I change the language using theLocaleSettings.setLocaleRaw provided by the generated file in the web project, it doesn't update the texts from the web file (the core keeps working). Using LocaleSettings.instance.currentTranslations it updates the text.

[Tienisto]

It seems that having 2 different TranslationProvider doesn't work.

At least the following code

void main() {
  runApp(
    core.TranslationProvider(
      child: TranslationProvider(child: const MyApp()),
    ),
  );
}

Throws an error:

The following assertion was thrown while finalizing the widget tree:
Multiple widgets used the same GlobalKey.

The key [LabeledGlobalKey<_TranslationProviderState<BaseAppLocale<dynamic, dynamic>, BaseTranslations<dynamic, dynamic>>>#47a90] was used by multiple widgets. The parents of those widgets were:
- InheritedLocaleData<AppLocale, StringsEn>
- [root](renderObject: RenderView#2eea0)
A GlobalKey can only be specified on one widget at a time in the widget tree.

[Tienisto]

I will dive deeper if there is a workaround for this

[gcostaapps]

It's weird, I'm doing exactly that:

import 'i18n/translations.g.dart' as web_translations;
import 'package:ui_core/i18n/translations_core.g.dart'  as core_translations;

...

appWidget = web_translations.TranslationProvider(
        child: core_translations.TranslationProvider(child: appWidget));
    runApp(_monitorPerfomanceWidget(appWidget));

And it's working. The only issue is that I need to use the LocaleSettings.instance.currentTranslations to get the web texts updated when changing translations and Translations.of(this) to the core ones.

[Tienisto]

Weird.

I added a fixed so that it works on my machine. Now it should support multiple TranslationProvider.

You could try it out:

dependency_overrides:
  slang_flutter:
    git:
      url: https://github.com/slang-i18n/slang.git
      path: slang_flutter
      ref: be312457379a547efe43c85cda5fa6873f4710f2

[Tienisto]

It should throw an error on your side, at least the minimal reproducable example showed it:

https://github.com/slang-i18n/slang/tree/test-multiple-providers

import 'package:core/gen/strings.g.dart' as core;
import 'package:flutter/material.dart';
import 'package:frontend/gen/strings.g.dart' as frontend;

void main() {
  runApp(
    core.TranslationProvider(
      child: frontend.TranslationProvider(child: const MyApp()),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text('Hello'),
      ),
    );
  }
}

[gcostaapps]

Thanks, I'm using the package from the git now.

I started to see the errors when started running the mobile project. I think the web one hided the logs so I didn't see, or maybe the error isn't happening in the web, because the translations worked there. But now I'm using the one from the github and it's working fine without the errors.

[Tienisto]

Fixed in 3.23.0