Flutter i18n: entenda abordagens de internacionalização

Configurando a i18n - Apresentação

Olá! Meu nome é Ricarth Lima e serei o instrutor deste curso de Flutter.

Audiodescrição: Ricarth tem aparência majoritariamente masculina, olhos escuros, cabelo Black Power, barba e bigode, também escuros. No rosto, usa óculos de armação transparente, barba e uma camiseta escura. Ao fundo uma parede lisa com prateleiras cheias de objetos à esquerda está iluminada em tons de rosa e azul.

Boas-vindas ao curso de internacionalização com Flutter. Este curso é importante porque internacionalizar nossas aplicações permite que elas sejam acessadas por pessoas em todo o mundo.

Conhecendo o projeto

Vamos ao emulador. Nele, temos a aplicação Meu Pequeno Grimório, que já deve ser conhecida. Inicialmente, ela está em português, mas, ao acessar a engrenagem no canto superior direito, podemos escolher outros idiomas. Ao mudar para inglês, por exemplo, vemos que os textos mudam para esse idioma. A tela inicial também muda, não sendo mais "Grimório" e sim "Spellbook".

Isso é extremamente importante no mercado, pois, em um mundo cada vez mais globalizado, é esperado que a aplicação esteja nas mãos de pessoas que falam diferentes idiomas, como inglês, espanhol, italiano, entre outros.

O que aprenderemos?

Vamos aprender a internacionalizar a aplicação utilizando dois métodos. Um deles é usando os pacotes oficiais do Flutter, que capturam o idioma do dispositivo e o aplicam na aplicação, o que é útil na maioria dos casos.

No entanto, haverá situações, como a nossa, em que precisamos mudar o idioma dinamicamente, independentemente do idioma configurado no servidor. Para isso, faremos um trabalho de gerenciamento de estados, pegando o arquivo de idioma de um servidor externo e salvando-o em cache.

Pré-requisitos

Para acompanhar este curso, é necessário ter concluído:

• A formação em Dart;
• A formação em Flutter
• Os cursos anteriores da formação de pacotes oficiais do Flutter.

Esse conhecimento é fundamental.

Próximos passos

Após conhecer sobre o curso, podemos começar!

Configurando a i18n - Configurando dependências e a main

Agora que conhecemos o projeto, temos um primeiro desafio: aprender a fazer a internacionalização para um componente. Vamos começar de forma simples.

Acessando a aplicação no emulador, haverá um botão "Entrar" na parte inferior da tela inicial. Ele precisa ser internacionalizado para que reconheça o idioma do sistema operacional e se adapte, exibindo uma string que faça sentido nesse idioma.

Utilizando o método de internacionalização do Flutter

Para isso, utilizaremos o método de internacionalização do Flutter, conforme descrito na documentação oficial. Acessando o projeto no VS Code, pressionaremos "Ctrl + J" para acessar a aba inferior, na guia "DEBUG CONSOLE". Clicaremos na guia "TERMINAL" para acessar o terminal.

Em seu interior, limparemos a tela com o comando clear.

clear

Em seguida, rodaremos dois comandos para adicionar pacotes.

É importante esclarecer que nem todo pacote vem do pub.dev. Algumas funcionalidades já estão no SDK do Flutter, mas não vêm pré-configuradas ou pré-instaladas no projeto, pois nem todo projeto requer internacionalização.

Para instalar o pacote de internacionalização, executaremos o comando abaixo. É importante digitar corretamente, pois as palavras são complexas:

flutter pub add flutter_localizations --sdk=flutter

Em seguida, executaremos o seguinte comando:

flutter pub add intl:any

Verificando e configurando dependências

Após instalar uma dependência via terminal, é recomendável verificar o arquivo pubspec.yaml. Abrindo a aba lateral esquerda do explorador com "Ctrl + Shift + E", acessaremos a estrutura de arquivos exibida e clicaremos no arquivo pubspec.yaml, na parte inferior.

Em seu interior, verificaremos que as dependências flutter_localizations e intl foram adicionadas.

pubspec.yaml:

dependencies:

    #Código omitido
    
    flutter_localizations:
        sdk: flutter
    intl: any

Podemos fechar esse arquivo.

Configurando o MaterialApp para internacionalização

Para que a internacionalização funcione, precisamos configurar o MaterialApp. Acessando o arquivo main.dart dentro da pasta "lib", acessaremos o interior das chaves do Widged build(). Logo acima da linha home: const SplashScreen(), adicionaremos o atributo localizationsDelegates que receberá uma lista de três atributos pré-prontos, indicados pela documentação do Flutter:

• GlobalMaterialLocalizations.delegate;
• GlobalWidgetsLocalizations.delegate e
• GlobalCupertinoLocalizations.delegate.

Após digitar os atributos e salvar o código, o editor adicionará automaticamente um const antes dos colchetes.

main.dart:

@override
Widget build(BuildContext context) {
    return MaterialApp(
        title: "Meu Pequeno Grimório",
        theme: ThemeData.dark(useMaterial3: true),
        debugShowCheckedModeBanner: false,
        localizationsDelegates: const [
            GlobalMaterialLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate,
            GlobalCupertinoLocalizations.delegate
        ],
        home: const SplashScreen(),
    ); // MaterialApp
}

Esses delegates configuram os widgets do Flutter para responderem às localizações (termo empregado para o trabalho de internacionalização). Por exemplo, um widget que usa datas adaptará o formato conforme o idioma, como português brasileiro ou inglês estadunidense.

Definindo os idiomas suportados

Abaixo da lista, definiremos os idiomas suportados pelo aplicativo com supportedLocales, recebendo uma lista const do tipo Locale.

O tipo Locale é uma classe composta pelo código da linguagem (languageCode) e a especificação desse código (countryCode) em maiúsculas, caso necessário. Além disso, os códigos de idioma são padrões internacionais — por exemplo, "en" para inglês e "pt-BR" para português do Brasil.

@override
Widget build(BuildContext context) {
    return MaterialApp(
        title: "Meu Pequeno Grimório",
        theme: ThemeData.dark(useMaterial3: true),
        debugShowCheckedModeBanner: false,
        localizationsDelegates: const [
            GlobalMaterialLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate,
            GlobalCupertinoLocalizations.delegate
        ],
        supportedLocales: const [
            Locale("en"),
            Locale("pt", "BR"),
            Locale("es"),
        ],
        home: const SplashScreen(),
    ); // MaterialApp
}

Por fim, salvaremos o código.

Conclusão e próximos passos

Instalamos as dependências e as configurações básicas do MaterialApp. Com isso, o Flutter converterá automaticamente os widgets que dependem de localização ao modificar o idioma do Android.

Entretanto, queremos ir além — afinal, nosso objetivo é localizar o botão "Enter". A seguir, continuaremos com essa tarefa.

Configurando a i18n - Criando arquivos de idioma

A configuração da internacionalização do aplicativo já está concluída. Instalamos as dependências e configuramos no Material App.

Nosso desafio continua sendo localizar o botão "Entrar". Para isso, precisamos descobrir o idioma que está rodando no sistema operacional e fazer uma verificação nesse botão. Se for "pt", colocamos "Entrar". Se for "en", colocamos "Start", e assim por diante.

Entretanto, esta não seria uma boa prática. Se fizéssemos isso para cada componente do código, ele ficaria muito extenso, difícil de manter, e pior: pouco performático.

Utilizando arquivos de idioma para simplificar o código

O pacote de internacionalização do Flutter já nos oferece a possibilidade de criar arquivos de idioma. Esses arquivos são semelhantes a JSON, contendo uma chave e um valor. Dependendo do idioma, o próprio Flutter se encarrega de buscar o valor correspondente. Nós apenas precisamos colocar a chave no componente.

Configurando o suporte a geração automática no pubspec.yaml

Para configurar isso, vamos ao VS Code, abrir o explorador na aba lateral esquerda e acessar novamente o arquivo pubspec.yaml. Em seu interior, precisaremos fazer uma nova configuração.

Dentro do bloco flutter, adicionaremos o comando generate: true acima da linha uses-material-design: true. Isso informará ao Flutter que ele será capaz de gerar código.

pubspec.yaml:

flutter:
    generate: true
    uses-material-design: true
    
    # Código omitido

Vamos criar um arquivo simples, semelhante a JSON, para gerenciar as chaves e valores em cada idioma. O próprio Flutter gerará o código em Dart que utilizaremos no componente.

Após salvar o código, se tudo estiver correto, o Flutter rodará o flutter pub get sem problemas.

Criando o arquivo de configuração l10n.yaml

Fecharemos o arquivo pubspec.yaml e criaremos um arquivo de configuração de localização na raiz do projeto. No explorador, clicaremos com o botão direito em um espaço vazio e selecionaremos "New File". O nome deste arquivo deve seguir um padrão, portanto, o chamaremos de l10n.yaml.

O termo "l10n" significa localization (localização) e "i18n" significa internationalization (internacionalização). Os números se referem à quantidade de letras abreviadas em cada palavra.

A configuração que faremos no interior desse arquivo consiste em três linhas:

l10n.yaml:

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

A primeira linha indica que os arquivos ARB, semelhantes a JSON, estarão na pasta "lib/l10n". A segunda linha define o arquivo de idioma padrão (template), que será o inglês, devido à sua relevância global. A terceira linha especifica que o arquivo gerado automaticamente se chamará app_localizations.dart.

Essas configurações seguem a documentação, mas podem ser ajustadas conforme necessário.

Criando arquivos ARB para os idiomas suportados

Após salvar o código, voltaremos ao explorador e, dentro da pasta "lib", criaremos uma nova pasta chamada "l10n". Dentro dessa pasta, criaremos o arquivo de template app_en.arb.

O VS Code não possui suporte nativo para a extensão ARB, mas podemos instalar a extensão "ARB Editor" da Google para facilitar o trabalho. Para isso, clicaremos na opção "Extensions" na barra de ícones à esquerda do explorador e pesquisar por "ARB Editor" na barra de busca exibida topo da aba que antes continha o explorador.

Antes de selecionar a opção "ARB Editor", confirmaremos que exibe um selo verde e a empresa Google na descrição. Após essa confirmação, clicaremos em "Install" no canto direito da opção.

Após a instalação, podemos fechar a aba de extensões com "Ctrl + B" e fechar a guia da extensão aberta no editor, clicando no "x".

Configurando o arquivo de idioma em inglês

No interior do arquivo app_en.arb, configuraremos:

• O "@@locale" recebendo o código do idioma "en";
• A primeira chave "dashboardEnterButton", representando o botão "Entrar" e recebendo o "Start".

Para evitar erros, é interessante adicionar metainformações sobre cada chave para outras pessoas saberem o que ela significa. Para isso, adicionaremos um @, o nome da chave e um bloco de chaves, dentro do qual acrescentaremos uma description (descrição), informando que se trata do botão "Entrar" da tela de dashboard.

{
    "@@locale": "en",
    "dashboardEnterButton": "Start",
    "@dashboardEnterButton": {
        "description": "Botão 'Entrar' da tela de dashboard"
    }
}

Criando arquivos para português e espanhol

Na mesma pasta, criaremos arquivos para os idiomas português e espanhol, chamados respectivamente de app_pt.arb e app_es.arb. Em seus interiores, colaremos o conteúdo do arquivo criado para o inglês, removendo a description, ajustando o código de idioma no @@locale e traduzindo o valor dos botões para "Começar" (em português) e "Empezar" (em espanhol):

app_pt.arb:

{
    "@@locale": "pt",
    "dashboardEnterButton": "Começar"
}

app_es.arb:

{
    "@@locale": "es",
    "dashboardEnterButton": "Empezar"
}

Conclusão e próximos passos

Com isso, configuramos o Flutter para gerar os arquivos de idioma em Dart e criamos os arquivos ARB de chave-valor. O próximo passo é solicitar que o Dart gere o código e integrá-lo ao componente.

Sobre o curso Flutter i18n: entenda abordagens de internacionalização

O curso Flutter i18n: entenda abordagens de internacionalização possui 177 minutos de vídeos, em um total de 61 atividades. Gostou? Conheça nossos outros cursos de Flutter em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Configurando a i18n
• Internacionalizando o app
• Mudança de idioma dinâmica
• Obtendo idioma do servidor
• Armazenando idioma localmente