Tá acabando!

Compre agora com desconto
Corra enquanto há tempo!

dias

:

horas

:

minutos

:

segundos

[DRAFT] Flutter: como formatar moeda e datas com o Intl

Alex Felipe Victor Vieira
Alex Felipe Victor Vieira

Compartilhe

No curso de Flutter com web API, desenvolvemos um App capaz de transferir para um contato utilizando uma web API. Ao buscar todas as transferências registradas, temos o seguinte resultado no App:

Observe que ao buscar todas as transferências por meio do Transaction Feed, temos uma lista que mostra a transferências com um valor sem nenhuma formatação.

Em outras palavras, não é possível identificar o valor monetário! Sendo assim, vamos aprender como podemos formatar números ou datas usando o pacote intl do Dart.

Instalando o Intl package

Para usar o Intl, precisamos adicioná-lo como dependência no arquivo pubspec.yml:

dependencies:
  flutter:
    sdk: flutter
  # demais dependências
  intl:

Então é só pedir para pegar as dependências que temos acesso às funções do Intl.

Formatando para moeda

O Intl disponibiliza diversas funções e classes que permitem formatar números, dentre elas, podemos utilizar a NumberFormat que, a partir da função estática simpleCurrency(), que devolve um formatador capaz de converter um valor em moeda:

import 'package:intl/intl.dart';

import 'contact.dart';

class Transaction {
  final double value;
  final Contact contact;

  Transaction(
    this.value,
    this.contact,
  );

  //restante do código

  String getCurrency() {
    NumberFormat formatter = NumberFormat.simpleCurrency();
    return formatter.format(value);
  }
}

Note que temos a moeda, porém, neste exemplo está como dólar! Isso acontece pelo fato de que o dispositivo que usei para teste, tem a localidade configurada como inglês dos Estados Unidos (en_US).

Formatando moeda com outra localidade

Para formatar para outra localidade, temos algumas opções, como por exemplo, enviar o argumento locale:

NumberFormat.simpleCurrency(locale: 'pt_BR');

Temos o seguinte resultado:

Ou até mesmo fazendo a configuração padrão de localidade para evitar o envio do argumento esperado todas as vezes que criar o formatador:

Intl.defaultLocale = 'pt_BR';

Esse tipo de configuração tem o objetivo de ser global, portanto, executar uma vez é o suficiente para que todos os formatadores utilize essa configuração, logo, chamá-lo durante a execução da função main() é conveniente.

Note que o padrão utilizado foi para o português do Brasil, caso tenha interesse no valor monetário de outros países, você pode consultar outros padrões de localidade.

Agora que temos a moeda formatada, podemos explorar mais conteúdo da nossa transferência, pois temos como resposta o seguinte json:

{
    "id": "25abe32b-8753-4ffb-9917-4b3921e1ab46",
    "value": 200.00,
    "contact": {
        "name": "Alex",
        "accountNumber": 1000
    },
    "dateTime": "2020-01-06 08:36:46"
}

Ou seja, podemos apresentar também a data e hora da transferência.

Recebendo data e hora na transferência

Para receber esse tipo de conteúdo, podemos modificar o método de conversão fromJson():

import 'package:intl/intl.dart';

import 'contact.dart';

class Transaction {
  final String id;
  final double value;
  final Contact contact;
  final DateTime dateTime;

  Transaction(
    this.id,
    this.value,
    this.contact, {
    this.dateTime,
  }) : assert(value > 0);

  Transaction.fromJson(Map<String, dynamic> json)
      : id = json['id'],
        value = json['value'],
        dateTime = DateTime.parse(json['dateTime']),
        contact = Contact.fromJson(json['contact']);

  //restante dos métodos

}

Como também modificar o visual do ListTile:

ListTile(
  leading: Icon(Icons.monetization_on),
  title: Text(
    transaction.getCurrency(),
    style: TextStyle(
      fontSize: 24.0,
      fontWeight: FontWeight.bold,
    ),
  ),
  subtitle: Column(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Text(
        transaction.contact.accountNumber.toString(),
      ),
      Text(
        transaction.dateTime.toString(),
      ),
    ],
  ),
),

Então temos o seguinte resultado padrão:

Uma data com todas as informações disponíveis, até mesmo os milissegundos.

Formatando data e hora

Para formatar o DateTime com um padrão esperado, podemos usar a referência DateFormat do Intl que oferece alguns métodos de formatação, como por exemplo, o yMd() que apresenta o dia, mês e ano. Ao testar com a nossa configuração atual, temos o seguinte resultado visual:

Isso acontece por conta da nossa configuração de localidade padrão que agora é pt_BR. Em outras palavras, o formatador de data e hora funciona por padrão com a localidade en_US, para usar uma diferente é necessário configurar.

A configuração pode ser feita chamando a função initializeDateFormatting('pt_BR') da mesma maneira que foi configurado a localidade padrão:

E agora que a configuração está correta, podemos modificar a formatação conforme o desejado. Seja pelas funções já implementadas, como por exemplo, com a hora e minutos DateFormat.yMd().add_Hm() ou via padrão em String DateFormat('dd/MM/yyyy HH:mm'):

Pronto! Agora temos uma transferência com uma formatação desejada!

Para saber mais de formatação no Dart

Ao formatar o valor da transferência consideramos o uso do simpleCurrency, porém, caso queira formatar números considerando outros padrões, existem outros métodos do NumberFormat, como também, o próprio construtor recebe alguns padrões de formatação.

Caso tenha interesse em consultar o código final do artigo, fique à vontade e confira o repositório do GitHub.

Alex Felipe Victor Vieira
Alex Felipe Victor Vieira

Alex é instrutor e desenvolvedor e possui experiência em Java, Kotlin, Android. Criador de mais de 40 cursos, como Kotlin, Flutter, Android, persistência de dados, comunicação com Web API, personalização de telas, testes automatizados, arquitetura de Apps e Firebase. É expert em Programação Orientada a Objetos, visando sempre compartilhar as boas práticas e tendências do mercado de desenvolvimento de software. Atuou 2 anos como editor de conteúdo no blog da Alura e hoje ainda escreve artigos técnicos.

Veja outros artigos sobre Mobile