viernes 22 noviembre 2024

Cómo usar intl en Flutter

El paquete intl es una herramienta ampliamente utilizada en Flutter para manejar internacionalización (i18n), formateo de fechas, números, monedas y traducción de texto en diferentes idiomas y formatos.

¿Qué es `intl` y para qué se utiliza?

intl facilita la localización de aplicaciones, permitiendo que soporten múltiples idiomas y formatos de datos específicos de cada región. Es útil para:

Mostrar fechas y números en formatos regionales.
Traducir cadenas de texto.
Manejar pluralización y género.

Instalación y configuración

Paso 1: Agregar el paquete

Añade intl en tu archivo pubspec.yaml:

dependencies:
  intl: ^0.18.0

Ejecuta el comando:

flutter pub get

Uso básico de `intl`

1. Formateo de fechas

Puedes usar DateFormat para mostrar fechas en distintos formatos:

import 'package:intl/intl.dart';

void main() {
  final now = DateTime.now();
  final formatter = DateFormat.yMMMMd('es_ES'); // Formato "día de mes de año" en español
  print(formatter.format(now)); // Ejemplo: "22 de noviembre de 2024"
}

2. Formateo de números y monedas

El paquete intl también permite formatear números y monedas:

import 'package:intl/intl.dart';

void main() {
  final number = 1234567.89;
  final numberFormatter = NumberFormat('#,##0.00', 'en_US');
  print(numberFormatter.format(number)); // Ejemplo: "1,234,567.89"

  final currencyFormatter = NumberFormat.currency(locale: 'es_ES', symbol: '€');
  print(currencyFormatter.format(number)); // Ejemplo: "1.234.567,89 €"
}

3. Internacionalización y traducciones

Configurar traducciones con `arb`:

1. Crea archivos .arb para cada idioma en la carpeta lib/l10n/. Ejemplo:

lib/l10n/intl_en.arb (para inglés)
lib/l10n/intl_es.arb (para español)

Ejemplo de contenido en intl_es.arb:

{
     "hello": "Hola",
     "welcome": "Bienvenido a nuestra aplicación"
   }

2. Genera los archivos de localización usando:

flutter pub run intl_translation:generate_from_arb --output-dir=lib/l10n lib/main.dart lib/l10n/*.arb

3. Carga las traducciones en tu aplicación:

import 'package:flutter/material.dart';
   import 'package:intl/intl.dart';

   void main() {
     Intl.defaultLocale = 'es';
     runApp(MyApp());
   }

   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(title: Text(Intl.message('welcome'))),
           body: Center(child: Text(Intl.message('hello'))),
         ),
       );
     }
   }

Tabla de métodos clave

Método	Descripción
`DateFormat.yMMMMd()`	Formatea una fecha en estilo "día de mes de año".
`NumberFormat.currency()`	Formatea un número como moneda según la configuración regional.
`Intl.message()`	Traduce cadenas según la configuración de localización.
`Intl.defaultLocale`	Configura el idioma predeterminado para las operaciones de `intl`.

Ejemplo completo: Soporte multilingüe

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

void main() {
  Intl.defaultLocale = 'es_ES';
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final now = DateTime.now();
    final dateFormatter = DateFormat.yMMMMd();
    final currencyFormatter = NumberFormat.currency(locale: 'es_ES', symbol: '€');

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Ejemplo de intl')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('Fecha actual: ${dateFormatter.format(now)}'),
              Text('Cantidad formateada: ${currencyFormatter.format(12345.67)}'),
            ],
          ),
        ),
      ),
    );
  }
}

Referencias oficiales

Para más detalles, consulta la documentación oficial del paquete intl.

Etiquetas:

dart flutter

Creado por:

Jorge García

Fullstack developer