¿Cómo agregar localización a una aplicación en Flutter?
sobes.tech AI
Respuesta de la IA
-
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 variarLuego, ejecuta
flutter pub get. -
Crear archivos de localización:
Crea directorios para los recursos de localización, por ejemplo
./lib/l10n/. Dentro, crea archivos.arbpara cada idioma soportado. Por ejemplo, para inglés y ruso:app_en.arb:{ "helloWorld": "Hello World!", "@@locale": "en" }app_ru.arb:{ "helloWorld": "Привет мир!", "@@locale": "ru" } -
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 generadoDespués de guardar
pubspec.yaml, Flutter generará automáticamente el archivo./lib/generated/l10n.dart(o el especificado enoutput-localization-file). -
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), -
Configuración de
MaterialAppoCupertinoApp:En el widget de nivel superior (generalmente
MaterialAppoCupertinoApp), 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.