Flutter localization without context

Question

I am trying to localize my app in flutter. I created the needed string.arb files for the supported languages.

Why does AppLocalizations.of(context) need a context?

I simply want to access the named strings in the files/locales files/classes. At some point in the app I build a List and fill it later via overriding some fields with a separate class.

However, this class has no context but I want to use localized strings in it. Can I write a method which gets me the Localization of whatever String I put in?

Answer 1

We can resolve this by using get_it easily, we can use the string anywhere after this setup.

1. Install this to your vscode Flutter Intl VSCode Extension

2. setup pubspec.yaml

   dependencies:
   flutter:
     sdk: flutter
   flutter_localizations:                          # Add this line
     sdk: flutter                                  # Add this line
   intl: ^0.17.0                                   # Add this line
   get_it: ^7.2.0                                  # Add this line
   
   
   flutter:
     uses-material-design: true
     generate: true                                # Add this line
   
   
   flutter_intl:                                   # Add this line
     enabled: true                                 # Add this line
     class_name: I10n                              # Add this line
     main_locale: en                               # Add this line
     arb_dir: lib/core/localization/l10n           # Add this line
     output_dir: lib/core/localization/generated   # Add this line
   

3. Setup main.dart

   import 'package:component_gallery/core/localization/generated/l10n.dart';
   import 'package:component_gallery/locator.dart';
   import 'package:component_gallery/ui/pages/home.dart';
   import 'package:flutter/cupertino.dart';
   import 'package:flutter/material.dart';
   import 'package:flutter_localizations/flutter_localizations.dart';
   
   void main() {
     setupLocator();
     runApp(App());
   }
   
   class App extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         localizationsDelegates: [
           I10n.delegate,
           GlobalMaterialLocalizations.delegate,
           GlobalWidgetsLocalizations.delegate,
           GlobalCupertinoLocalizations.delegate,
         ],
         supportedLocales: I10n.delegate.supportedLocales,
         localeResolutionCallback: (deviceLocale, supportedLocales) {
           if (supportedLocales
               .map((e) => e.languageCode)
               .contains(deviceLocale?.languageCode)) {
             return deviceLocale;
           } else {
             return const Locale('en', '');
           }
         },
         home: HomePage(),
       );
     }
   }
   

4. setup locator.dart

   import 'package:component_gallery/core/services/navigation_service.dart';
   import 'package:get_it/get_it.dart';
   
   GetIt locator = GetIt.instance;
   
   void setupLocator() {
     locator.registerLazySingleton(() => I10n());
   }
   
   

5. Use it with Get_it without context as

   final I10n _i10n = locator<I10n>();
   class MessageComponent extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Text(
         _i10n.sample,
         textAlign: TextAlign.center,
       );
     }
   }
   
   

Answer 2

If you would prefer to not use a package then here is a solution that worked for me. Now the most common implementation of AppLocalizations I've seen usually has these two lines:

//.........
static const LocalizationsDelegate<AppLocalizations> delegate =
      _AppLocalizationsDelegate();

static AppLocalizations of(BuildContext context) {
  return Localizations.of<AppLocalizations>(context, AppLocalizations);
}
//.........

The implementation of the delegate would look something like this:

class _AppLocalizationsDelegate extends LocalizationsDelegate<AppLocalizations> {
  const _AppLocalizationsDelegate();

  @override
  Future<AppLocalizations> load(Locale locale) async {
    AppLocalizations localizations = new AppLocalizations(locale);
    await localizations.load();

    return localizations;
  }

  //... the rest omitted for brevity
}

Notice the load method on the delegate returns a Future<AppLocalizations>. The load method is usually called once from main and never again so you can take advantage of that by adding a static instance of AppLocalizations to the delegate. So now your delegate would look like this:

class _AppLocalizationsDelegate extends LocalizationsDelegate<AppLocalizations> {
  const _AppLocalizationsDelegate();

  static AppLocalizations instance;

  @override
  Future<AppLocalizations> load(Locale locale) async {
    AppLocalizations localizations = new AppLocalizations(locale);
    await localizations.load();

    instance = localizations; // set the static instance here

    return localizations;
  }

  //... the rest omitted for brevity
}

Then on your AppLocalizations class you would now have:

//.........
static const LocalizationsDelegate<AppLocalizations> delegate =
      _AppLocalizationsDelegate();

static AppLocalizations of(BuildContext context) {
  return Localizations.of<AppLocalizations>(context, AppLocalizations);
}

static AppLocalizations get instance => _AppLocalizationsDelegate.instance; // add this
//.........

Now in your translate helper method you could have:

String tr(String key) {
    return AppLocalizations.instance.translate(key);
}

No context needed.

Answer 3

If you know the desired Locale then you could use:

final locale = Locale('en');
AppLocalizations t = await AppLocalizations.delegate.load(locale);
println(t.someTranslationKey);

Instead of hardcoding Locale('en') you could implement some kind of resolver to find out what the desired locale is. The supported languages are AppLocalizations.supportedLocales.

Answer 4

Latest: the current Flutter Intl plugin makes this approach obsolete, at least if you use a supported IDE. You have a context-free alternative there:

S.current.translationKey

---

Previous: Starting from the suggestions of Stuck, this is the final solution I found. It isn't as cheap as the simple lookup with the context, so only use it if really necessary and make sure you call it once and use as many times as possible. But this approach works even if you have no context at all, for instance, you are in a background service or any other program part without UI.

Future<AppLocalizations> loadLocalization() async {
  final parts = Intl.getCurrentLocale().split('_');
  final locale = Locale(parts.first, parts.last);
  return await AppLocalizations.delegate.load(locale);
}

Using it is just the same as usual:

final t = await loadLocalization();
print(t.translationKey);

Update: the singleton I suggested in the comments could look like:

class Localization {
  static final Localization _instance = Localization._internal();
  AppLocalizations? _current;

  Localization._internal();

  factory Localization() => _instance;

  Future<AppLocalizations> loadCurrent() async {
    if (_current == null) {
      final parts = Intl.getCurrentLocale().split('_');
      final locale = Locale(parts.first, parts.last);
      _current = await AppLocalizations.delegate.load(locale);
    }
    return Future.value(_current);
  }

  void invalidate() {
    _current = null;
  }
}

and used like:

final t = await Localization().loadCurrent();

To keep track of language changes, call this from your main build():

PlatformDispatcher.instance.onLocaleChanged = () => Localization().invalidate();

Answer 5

There is a library called easy_localization that does localization without context, you can simply use that one. Library also provides more convenient approach of writing less code and still localizing all the segments of the app. An example main class:

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
  ]).then((_) {
    runApp(EasyLocalization(
      child: MyApp(),
      useOnlyLangCode: true,
      startLocale: Locale('nl'),
      fallbackLocale: Locale('nl'),
      supportedLocales: [
        Locale('nl'),
        Locale('en'),
      ],
      path: 'lang',
    ));
  });
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SplashScreen(),
      supportedLocales: EasyLocalization.of(context).supportedLocales,
      locale: EasyLocalization.of(context).locale,
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        DefaultCupertinoLocalizations.delegate,
        EasyLocalization.of(context).delegate,
      ],
      localeResolutionCallback: (locale, supportedLocales) {
        if (locale == null) {
          EasyLocalization.of(context).locale = supportedLocales.first;
          Intl.defaultLocale = '${supportedLocales.first}';
          return supportedLocales.first;
        }

        for (Locale supportedLocale in supportedLocales) {
          if (supportedLocale.languageCode == locale.languageCode) {
            EasyLocalization.of(context).locale = supportedLocale;
            Intl.defaultLocale = '$supportedLocale';
            return supportedLocale;
          }
        }

        EasyLocalization.of(context).locale = supportedLocales.first;
        Intl.defaultLocale = '${supportedLocales.first}';
        return supportedLocales.first;
      },
    );
  }
}

Also don't forget to put localization path to your pubspec.yamal file!

After all of this is done, you can simply just use it in a Text widget like this:

Text(tr('someJsonKey'),),

Answer 6

My 2 cents into it, just not to loose the solution :)

I totally get why Flutter localization solutions needs BuildContext - makes total sense. But, if I explicitly don't want runtime language switch, and happy with the app restart?

That's the solution I came up with that seems to work pretty well.

Assuming you've followed Flutter's official localization steps, create a global variable that will be used to accessing the AppLocalizations class.

i18n.dart:

import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

AppLocalizations get tr => _tr!; // helper function to avoid typing '!' all the time
AppLocalizations? _tr; // global variable 

class AppTranslations {
  static init(BuildContext context) {
    _tr = AppLocalizations.of(context);
  }
}

Now, somewhere in your main wrapper (the one below MaterialApp) call to set the localizations for the currently selected locale:

    AppTranslations.init(context);

It could be initState() or even build() of the main widget (it's safe to call this multiple times, obviously).

Now you can simply call:

import 'package:my_app/i18n.dart'

...
  Text(tr.welcome_text)

  // or

  print(tr.welcome_text);
...

Answer 7

I was already using easy_localization package, so this found me very easy.

Trick I used to get app language without context as below

en-US.json

{
   "app_locale":"en"
}

ar-SA.json

{
   "app_locale":"ar"
}

Used it like a way in utility/extension function

LocaleKeys.app_locale.tr() //will return 'en' for English, 'ar' for Arabic

Answer 8

The best approach is using Flutter Intl (Flutter i18n plugins) as it is built by Flutter developers. It has a method to use without context like the following (Code example from the Visual Studio Marketplace details page):

Widget build(BuildContext context) {
    return Column(children: [
        Text(
            S.of(context).pageHomeConfirm,
        ),
        Text(
            S.current.pageHomeConfirm,// If you don't have `context` to pass
        ),
    ]);
}

More details on official plugin page and Visual Studio Marketplace details page

Answer 9

If you're building a mobile app, this one liner did it for me:

import 'dart:ui' as ui;
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

AppLocalizations get l10n {
  return lookupAppLocalizations(ui.PlatformDispatcher.instance.locale);
}

If you're building an app with multiple windows, it looks like the easiest way to do this synchronously is to set the global translation when the app starts and update the language code manually using docs described on the intl package.

Answer 10

In my case, I am using the Minimal internationalization version.

Adapting chinloyal's answer to the Minimal internationalization version.

Apply chinloyal's solution but with this difference:

From this:

  @override
  Future<AppLocalizations> load(Locale locale) {
    return SynchronousFuture<AppLocalizations>(AppLocalizations(locale));
  }

To this:

  @override
  Future<AppLocalizations> load(Locale locale) async {
    var localizations =
        await SynchronousFuture<AppLocalizations>(AppLocalizations(locale));

    instance = localizations; // set the static instance here

    return localizations;
  }

Answer 11

I use the following code:

final appLocalizations = await AppLocalizations.delegate
      .load(Locale(Platform.localeName.substring(0, 2)));
print(appLocalizations.yourCode)

Answer 12

You can make a singleton class like this:

class LocalizationManager {
  static final LocalizationManager instance = LocalizationManager._();
  LocalizationManager._();

  late AppLocalizations _localization;

  AppLocalizations get appLocalization => _localization;

  void setLocalization(BuildContext context) {
    _localization = AppLocalizations.of(context)!;
  }
}

then in the material app builder, set the value of localization:

return MaterialApp(
  builder: (context, child) {
    LocalizationManager.instance.setLocalization(context);
    return child!;
  },
)

Answer 13

Hey guys in my case I needed this feature (Contextless translation) for my background service and I have done this way:

Future<void> loadTranslations(Locale locale) async {
  final languageCode = locale.languageCode;
  final countyCode = locale.countryCode;
  // Read the JSON file based on the locale
  String filePath = countyCode != null
      ? 'assets/flutter_i18n/${languageCode}_$countyCode.json'
      : 'assets/flutter_i18n/$languageCode.json';
  late String jsonString;

  try {
    jsonString = await rootBundle.loadString(filePath);
  } catch (e) {
    filePath = 'assets/flutter_i18n/$languageCode.json';
    jsonString = await rootBundle.loadString(filePath);
  }

  _currentTranslations = jsonDecode(jsonString);
}

String translate(String key) {
  if (_currentTranslations == null) {
    throw "Translations not loaded";
  }

  // Access translation for the given key
  String? translation = _currentTranslations![key];
  if (translation != null) {
    return translation;
  } else {
    // If translation not found, return the key itself
    return key;
  }
}

Note that I had translations as json files.

Answer 14

I did not test this solution, but in theory you can wrap your code in ValueListenableBuilder, it has context in "builder" section

Answer 15

The slang package supports context-free translations out of the box:

Text(t.loginPage.title)