Sobes.tech
Middle

¿Cómo agregar localización a una aplicación en Flutter?

sobes.tech AI

Respuesta de la IA

  1. Añadir dependencias:

    En el archivo pubspec.yaml, debes agregar dependencias para la localización:

    dependencies:
      flutter:
        sdk: flutter
    
      flutter_localizations:
        sdk: flutter
      intl: ^0.18.0 # Ejemplo de versión, puede variar
    

    Luego, ejecuta flutter pub get.

  2. Crear archivos de localización:

    Crea directorios para los recursos de localización, por ejemplo ./lib/l10n/. Dentro, crea archivos .arb para cada idioma soportado. Por ejemplo, para inglés y ruso:

    app_en.arb:

    {
      "helloWorld": "Hello World!",
      "@@locale": "en"
    }
    

    app_ru.arb:

    {
      "helloWorld": "Привет мир!",
      "@@locale": "ru"
    }
    
  3. Configuración de generación de código:

    En el archivo pubspec.yaml, especifica la ruta a los archivos de localización y configura la generación de .arb:

    flutter:
      generate: true # Activar generación
    
      assets:
        - assets/... # Tus otros recursos
    
      l10n:
        arb-dir: lib/l10n # Directorio con archivos .arb
        template-arb-file: app_en.arb # Archivo .arb plantilla
        output-localization-file: app_localizations.dart # Nombre del archivo generado
    

    Después de guardar pubspec.yaml, Flutter generará automáticamente el archivo ./lib/generated/l10n.dart (o el especificado en output-localization-file).

  4. Uso de cadenas localizadas:

    En la aplicación, donde se necesiten cadenas localizadas, importa el archivo generado:

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

    Luego, accede a la cadena localizada mediante AppLocalizations.of(context)!:

    Text(AppLocalizations.of(context)!.helloWorld),
    
  5. Configuración de MaterialApp o CupertinoApp:

    En el widget de nivel superior (generalmente MaterialApp o CupertinoApp), especifica el soporte de idiomas y los delegados de localización:

    import 'package:flutter_gen/gen_l10n/app_localizations.dart';
    
    MaterialApp(
      // ... otras configuraciones
      localizationsDelegates: const [
        AppLocalizations.delegate, // Delegado del archivo generado
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale('en', ''), // Inglés
        Locale('ru', ''), // Ruso
        // ... otros idiomas soportados
      ],
      // ...
    );
    

Ahora, la aplicación seleccionará automáticamente la localización según la configuración del dispositivo del usuario, si está en supportedLocales. Para cambiar la localización manualmente, puedes usar Locale y actualizar el estado de la aplicación.