.png)
Cuando comienzas a desarrollar una aplicación móvil, siempre tienes en mente el público y las regiones del mundo objetivos. Es evidente que tener una aplicación que abarque la mayor cantidad de usuarios favorece la probabilidad de un crecimiento más rápido y estable. Por eso, el proceso de internacionalización es vital para que nuestra aplicación sea exitosa.
En más de una ocasión, ocurre que necesitamos hacer modificaciones en las traducciones de los idiomas, enfrentándonos con la dificultad de no poder realizarlas en tiempo real, dependiendo del proceso de actualización de la aplicación a una nueva versión por parte del usuario.
En este artículo, te explicaremos porqué Remote Config de Firebase constituye una solución efectiva a esta problemática. Emplearemos uno de los paquetes de Flutter más populares en el proceso de internacionalización Easy Localization y las traducciones serán cargadas de forma remota desde Firebase Remote Config en una aplicación Flutter.
Para poder continuar, si no tienes experiencia con el uso del paquete Easy Localization, te recomendamos nuestra publicación Aprende a configurar múltiples idiomas en una aplicación Flutter, donde aprenderás todo lo relacionado con este tema.
¿Cómo cargar las traducciones desde Remote Config?
Otra alternativa para manejar los idiomas y traducciones es el empleo de Firebase Remote Config, facilitando cambiar en cualquier momento estos elementos sin necesidad de crear nuevas actualizaciones de la aplicación.
Con tal fin creamos dos parámetros en Remote Config, langs_octa y translations_octa, donde definimos los idiomas y traducciones de la aplicación respectivamente.
Integración del paquete para múltiples idiomas Easy Localization y Firebase Remote Config
Seguidamente, recepcionamos la información proporcionada por Remote Config y la cargamos en el widget EasyLocalization. Deberá tener previamente configurado Firebase Remote Config en su proyecto. Si quiere saber más detalles del funcionamiento de Firebase Remote Config puede leer el artículo Cómo cambiar el comportamiento y apariencia de una app Flutter utilizando Remote Config publicado en nuestro blog.
En la clase FirebaseRemoteRepository creamos los métodos getLanguages y getData.
class FirebaseRemoteRepository {
final FirebaseRemoteConfig _remoteConfig = FirebaseRemoteConfig.instance;
…
static const String langs = "langs_octa";
static const String translations = "translations_octa";
…
Future<List<LangModel>> getLanguages() async {
var remoteValue = _remoteConfig.getAll()[langs];
List<LangModel> result = [];
try {
List data = json.decode(remoteValue!.asString());
result = data
.map((lang) => LangModel.fromJson(lang))
.toList()
.cast<LangModel>();
} catch (e) {
debugPrint(e.toString());
}
return result;
}
Map<String, dynamic> getData({required String parameterName}) {
var remoteValue = _remoteConfig.getAll()[parameterName];
Map<String, dynamic> result = {};
try {
result = json.decode(remoteValue!.asString());
} catch (e) {
debugPrint(e.toString());
}
return result;
}Seguido, agregamos una nueva clase FirebaseTranslationsLoader que extiende de AssetLoader, esta clase será cargada dentro del widget EasyLocalization como se muestra en la clase main.
class FirebaseTranslationsLoader extends AssetLoader {
@override
Future<Map<String, dynamic>> load(String path, Locale locale) async {
Map<String, dynamic> translations = FirebaseRemoteRepository()
.getData(parameterName: FirebaseRemoteRepository.translations);
return translations[locale.toString()];
}
}
void main() async {
...
WidgetsFlutterBinding.ensureInitialized();
await EasyLocalization.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
await FirebaseRemoteRepository().initialize();
List<LangModel> langs = await FirebaseRemoteRepository().getLanguages();
runApp(
EasyLocalization(
path: AppConstants.languagesPath,
supportedLocales: langs.map((lang) => Locale(lang.code)).toList(),
assetLoader: FirebaseTranslationsLoader(),
startLocale: Locale(langs.first.code),
fallbackLocale: Locale(langs.first.code),
useFallbackTranslations: true,
child: const OctaApp(),
),
);
}Quedando completada la configuración de nuestro proyecto con idiomas y traducciones provenientes de Remote Config.
¡No te pierdas más artículos sobre el desarrollo de aplicaciones con Flutter!
¡Síguenos y mantente actualizado con todo lo nuevo que tenemos preparado para ti en nuestro blog! En próximos artículos aprenderemos sobre el Manejo de estados en Flutter.