Manejo de lenguajes (idioma) en Flutter

La localización de aplicaciones o el uso de multi lenguajes es muy común en el desarrollo de aplicaciones móviles y pensé en escribir sobre uno de mis paquetes de flutter favoritos. La internacionalización de aplicaciones es rápida y sencilla con el paquete 

easy_localization.

¿Por qué easy_localization?

• Traducciones fáciles para muchos idiomas.
• Cargue traducciones como JSON, CSV, Yaml, XML usando Easy Localization Loader
• Reaccionar y persistir a los cambios locales
• Admite locales plurales, de género, de anidamiento, RTL y más
• Redirección de claves de configuración regional alternativa
• Widget de error para traducciones faltantes
• Métodos de extensión en Text y BuildContext
• Generación de código para archivos de localización y claves.
• Seguridad nula
• Registrador personalizable.
• Primeros pasos con el manejo del idioma en Flutter

Agreguemos el paquete a nuestro pubspec.yaml

dependencies:
  easy_localization: ^3.0.0

Luego, creamos una carpeta y agreguemos archivos de traducción como este

  assets/lang:
    - en.json
    - fr.json

Declara tu directorio de localización de activos en pubspec.yaml

flutter:

  assets:
    - assets/lang/

Para que la traducción funcione en iOS, debe agregar configuraciones regionales admitidas a ios/Runner/Info.plist como se describe:

<key>CFBundleLocalizations</key>
<array>
<string>en</string>
<string>fr</string>
</array>

A continuación, editamos nuestro main.dart como este.

import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:hive/hive.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'home_page.dart';
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await EasyLocalization.ensureInitialized();
  runApp(
    EasyLocalization(
      supportedLocales: const [Locale('en', 'US'), Locale('fr', 'FR')],
      path: 'assets/lang', // <-- change the path of the translation files
      fallbackLocale: const Locale('en', 'US'),
      child: const MyApp(),
    ),
  );
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Localization Demo',
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

Ahora nuestra aplicación está lista para cambiar y guardar el idioma elegido. Puede crear la clase HomePage como un widget con estado, los widgets que desee y un diseño de interfaz de usuario preferido. En su idioma, los archivos JSON agregan las palabras que necesita traducir. Agregue tantos archivos JSON como desee y agregue el idioma a las configuraciones regionales admitidas. Las claves que utilicé para mi demostración son las siguientes.

en.JSON
{
    "title": "Title",
    "app_local_demo": "Application localization example!",
    "demo_details": "This is a sample project to change the language with a drop down menu of languages."
}
fr.JSON
{
    "title": "Titre",
    "app_local_demo": "Exemple de localisation d'application!",
    "demo_details": "Ceci est un exemple de projet pour changer la langue avec un menu déroulant de langues."
}

Para obtener las palabras, simplemente importa el paquete y agregue la clave como se muestra a continuación.

'title'.tr()

Puede crear su propio menú desplegable, botón de opción o cualquier widget para cambiar el idioma. Acabo de usar un menú desplegable con estilos personalizados. También puede guardar el último idioma modificado para configurarlo como predeterminado.

Antes de crear nuestro menú desplegable, primero creamos nuestra clase de idioma básica para que podamos usarla en el futuro.

class Language {
   Locale locale;
   String langName;
   Language({
      required this.locale,
      required this.langName,
   });
}

Y agregue, creemos nuestra langList con nuestra clase.

List<Language> languageList = [
    Language(
      langName: 'English - UK',
      locale: const Locale('en'),
    ),
    Language(
      langName: 'French - FR',
      locale: const Locale('fr'),
    )
  ];

Y con esta línea de código, podemos obtener el último idioma guardado elegido en nuestro menú desplegable.

Language? selectedLang;
selectedLang = languageList.singleWhere((e) => e.locale == context.locale);

Vamos a crear nuestro menú desplegable como este.

DropdownButton<Language>(
                    iconSize: 18,
                    elevation: 16,
                    value: selectedLang,
                    style: const TextStyle(color: Colors.black),
                    underline: Container(
                      padding: const EdgeInsets.only(left: 4, right: 4),
                      color: Colors.transparent,
                    ),
                    onChanged: (newValue) {
                      setState(() {
                        selectedLang = newValue!;
                      });
                      if (newValue!.langName == 'English - UK') {
                        context.setLocale(const Locale('en'));
                      } else if (newValue.langName == 'French - FR') {
                        context.setLocale(const Locale('fr'));
                      }
                    },
                    items: languageList
                        .map<DropdownMenuItem<Language>>((Language value) {
                      return DropdownMenuItem<Language>(
                        value: value,
                        child: Text(
                          value.langName,
                          style: const TextStyle(
                            fontSize: 12,
                            fontWeight: FontWeight.w600,
                            color: Colors.black,
                          ),
                        ),
                      );
                    }).toList(),
                  ),

Luego, en nuestro homepage.dart, usemos los archivos JSON que creamos anteriormente para la traducción.

 Column(
        children: [
          Container(
            margin: const EdgeInsets.symmetric(vertical: 40, horizontal: 20),
            child: Row(
              children: [
                Text(
                  'title'.tr() + ":",
                  style: const TextStyle(
                      fontSize: 18, fontWeight: FontWeight.bold),
                ),
                Expanded(
                    child: Container(
                  margin: const EdgeInsets.only(left: 20),
                  child: Text(
                    'app_local_demo'.tr(),
                    style: const TextStyle(
                        fontSize: 18, fontWeight: FontWeight.bold),
                  ),
                )),
              ],
            ),
          ),
          Container(
            width: width,
            margin: const EdgeInsets.symmetric(vertical: 20, horizontal: 20),
            child: Row(
              children: [
                Text(
                  'details'.tr() + ":",
                  style: const TextStyle(fontSize: 15),
                ),
                Expanded(
                    child: Container(
                  margin: const EdgeInsets.only(left: 20),
                  child: Text('demo_details'.tr(),
                      style: const TextStyle(fontSize: 15)),
                ))
              ],
            ),
          ),
        ],
      ),

Articulo original:

https://itnext.io/app-localization-in-flutter-2f00f812bf08