Flutter – Internacionalización

La internacionalización se refiere al término en el que una aplicación está disponible en diferentes idiomas regionales para llegar mejor a las personas. Para esto, tenemos que hacer que una aplicación esté disponible en diferentes idiomas y diseños adecuados para ellos. Flutter proporciona métodos para internacionalizar la aplicación. Discutiremos cómo localizar un MaterialApp .

Flutter admite 78 idiomas diferentes. De forma predeterminada, el inglés (EE. UU.) es el idioma localizado.

Configuración de la aplicación:

Primero, tenemos que agregar las siguientes líneas de código en el archivo de dependencias pubspec.yaml como se muestra a continuación:

dependencies:
 flutter:
   sdk: flutter
 flutter_localizations: # ADD
   sdk: flutter         # ADD
 intl: ^0.17.0-nullsafety.2   # ADD

Y en la sección flutter en pubspec.yaml agrega el código:

 generate: true

Haga clic en el pub get para obtener todas las dependencias.

Ahora cree un nuevo archivo yaml (como l10n.yaml) en el directorio raíz del proyecto con el siguiente contenido:

arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart

Agregue un directorio llamado l10n en el directorio lib y luego agregue los archivos para los idiomas. Aquí agregaremos datos para dos idiomas, es decir, inglés e hindi.

Name: app_en.arb
Content:
{
  "helloWorld": "GeeksforGeeks",
  "displayText":"This is a sample App",
  "@helloWorld": {
    "description": "SampleApp for GeeksforGeeks"
  }
}

Y para el segundo archivo

Name: app_hi.arb
Content:
{
  "helloWorld": "गीक्स फॉर गीक्स ",
  "displayText":"यह एक सैंपल ऐप है"
}

Ahora reinicie la aplicación para que el archivo app_localizations.dart se genere en el siguiente directorio:

<project_dir>.dart_tools/flutter_get/genl10n

Ahora tenemos que escribir debajo de las líneas de códigos para que la aplicación se internacionalice:

Primero, tenemos que importar app_localizations , luego tenemos que agregar las siguientes dos propiedades a MaterialApp como

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

• propiedad localizationsDelegates : Define todos los recursos localizados para la aplicación.
• propiedad supportLocales : proporciona una lista de idiomas admitidos por la aplicación.
• Propiedad onGeneratedTitle : se llama después de configurar el widget, lo que significa que la localización está disponible.

Ejemplo:

import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      onGenerateTitle: (context) => AppLocalizations.of(context).helloWorld,
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      supportedLocales: AppLocalizations.supportedLocales,
      theme: ThemeData(primarySwatch: Colors.green),
      home: MyHomePage(),
    );
  }
}
  
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
  
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context).helloWorld),
      ),
      body: Center(
        child: Text(
          AppLocalizations.of(context).displayText,
          style: TextStyle(fontSize: 30),
        ),
      ),
    );
  }
}

Producción:

Podemos cambiar de idioma cambiando el idioma del dispositivo en la configuración.