4

I want to create a Flutter app that will support different languages based on user device localization.

I want to store all translation texts via Firebase Remote Config. That way, remote changes will apply to all users without the need to update the app.

Right now, my app works with localizations based on the official documentation. But that way all texts are hard-coded, so users will have to update the app in order to get new text changes.

My research

I have read a post about creating a custom LocalizationsDelegate, maybe that way I could load all texts from Firebase and on run-time.

I have also read about the easy_localization package, but unfuruentally it seems to support hard-coded texts only out of the box.

Question

What is the best approach to achieve dynamic localizations within Firebase configuration?

I would appreciate an example

genericUser
  • 4,417
  • 1
  • 28
  • 73
  • Instead of reinventing the wheel, I suggest just integrating https://pub.dev/packages/localizely_sdk into your code – D Cruse Oct 26 '22 at 21:32
  • Although this solution is valid, its free trial is only for one project and 250 hosted keys. Looking for a common and robust idea. – genericUser Oct 27 '22 at 07:02

1 Answers1

7

Problem Solved!

You can use the easy_localization package and create a custom AssetLoader that supports Firebase Remote Config assets.

I have created JSON parameters for each supported language on my Firebase Remote Config project.

enter image description here

Then I created a RemoteConfigAssetLoader class that extends the easy_localiztion's AssetLoader class:

import 'dart:convert';
import 'dart:ui';

import 'package:easy_localization/easy_localization.dart';
import 'package:firebase_remote_config/firebase_remote_config.dart';
import 'package:get_it/get_it.dart';

final _remoteConfig = GetIt.I.get<FirebaseRemoteConfig>(); // A remoteConfig instance. You can get it also as a class parameter.

/// Loads [FirebaseRemoteConfig] translations based on users' device local.
class RemoteConfigAssetLoader extends AssetLoader {
  @override
  Future<Map<String, dynamic>> load(String path, Locale locale) async {
    final remoteConfigKey = locale.languageCode;    
    final languageData = _remoteConfig.getString(remoteConfigKey);
    return jsonDecode(languageData) as Map<String, dynamic>;
  }
}

Then just configure your app EasyLocalization with your custom RemoteConfigAssetLoader function:

import 'util/remote_config_asset_loader.dart';
  ...
  void main(){
    runApp(EasyLocalization(
      child: MyApp(),
      supportedLocales: [Locale('en'), Locale('es')],
      path: 'IgnoreThisPath', // The path parameter is unnecessary when using the RemoteConfig singleton.
      assetLoader: RemoteConfigAssetLoader()
    ));
  }
  ...

That's it! Now your EasyLocalization loads its translations from your Firebase RemoteConfig.

genericUser
  • 4,417
  • 1
  • 28
  • 73
  • I got the following errror when i tried this FirebaseRemoteConfig is not registered inside getit (Did you accidentky do getit = getit.instance() instead of Getit = GetIt.instance – Anish Jain Feb 14 '23 at 02:43
  • 1
    You need to register the FirebaseRemoteConfig to GetIt first `GetIt.I.registerSingleton(remoteConfig);` – genericUser Feb 14 '23 at 09:16
  • 1
    You have to set first the FirebaseRemoteConfig (check the documentation), and after that you need to assign it to the GetIt instance (so you could use this FirebaseRemoteConfig instance anywhere in your app). – genericUser Feb 14 '23 at 09:18