DEV Community

Cover image for Simplificando sua Internacionalização
Toshi Ossada for flutterbrasil

Posted on

Simplificando sua Internacionalização

Fala Devs, blz? Semanas atrás escrevi um artigo mostrando uma maneira de internacionalizarmos nosso aplicativo utilizando o package flutter_localization, confesso que esta maneira ficou um pouco avançada e um pouco complicada.

Mas graças a comunidade Flutter, principalmente aqui em terras tupiniquins, sempre vão surgindo maneiras de facilitar as coisas e este foi o caso da criação do package localization criado pelo grande

David Santana De Araujo

da Flutterando (@davidsdearaujo).

localization | Flutter Package

Package para simplificar tradução no app. import 'package:localization/localization.dart'; A configuração do package…

pub.dev

Primeiramente vamos instalar o package em nosso projeto.

Depois precisamos criar dentro da pasta assets\lang um json para cada lingua que irei dar suporte ao App.

Após isso construo todos os meus arquivos com um json vazio {}.

Feito isso preciso fazer algumas configurações no meu pubspec.yaml, a primeira delas é dar acesso ao meu aplicativo na pasta lang, colocando na seção assets:, e logo em seguido coloco localization_dir: assets\lang, é recomendado colocar ao final do arquivo.

Agora precisamos configurar o localização para carregar os arquivos, há duas maneiras, a primeira que eu vou mostrar é se o seu aplicativo NÃO utiliza sistema de rotas nomeadas.

Para isto basta em seu MaterialApp(), no atributo home envolver-lo com o widget LocalizationWidget().

Quando a aplicação está utilizando o sistema de rotas do flutter, não é utilizada a propriedade home do MaterialApp. Para resolver esse problema, utilize o método assíncrono estático Localization.configuration().

Esse método deve ser chamado antes de todas as chamadas de tradução. Geralmente, é executado na SplashScreen.

Vamos configurar nosso AppModule para que a rota inicial seja o SplashModule.

E no SplashPage vamos criar o metodo para carregar as configurações do Localization.config() e após terminar de carregar chamaremos a /home dando um pushReplacementNamed(). Nesse momento poderia carregar outras coisas, como o sharedPreferences.

Agora na minha HomePage iremos utilizar a informações que serão configuradas no nosso json, para isso basta utilizarmos “chave”.i18n(), no método i18n() podemos também usar parâmetros para ser utilizado em nossa string. Um ponto importante para que possamos utilizar todo o poder que o slidy nos oferece para gerar os parâmetros da internacionalização é colocarmos na frente de cada chamada do i18n() um comentário com o valor default de nossa chave, assim iremos automatizar a criação de nossas strings.

Por padrão a linguagem padrão é o pt_BR então caso o usuário esteja em uma linguá não suportada pelo aplicativo ele automaticamente ficara no pt_BR. Para trocar a linguagem padrão basta no local que eu executo a Localization.configuration() e adicionar o parâmetro defaultLang e colocar qual a linguagem padrão que desejo.

Vamos utilizar o slidy, para isso no nosso console digitamos o comando

Com isso ele irá gerar todas as chaves em todos nossos json’s com o valor padrão

Agora precisamos traduzir todos os nossos json’s

E nosso resultado será

Se trocarmos a linguagem do nosso dispositivo para português agora ele será automaticamente reconhecido em nosso aplicativo

Bem mais simples né? você pode consultar o código do artigo em meu github. Nos vemos na próxima :)

https://github.com/toshiossada/flutter_localization

Image description

Entre em nosso discord para interagir com a comunidade: https://discord.com/invite/flutterbrasil
https://linktr.ee/flutterbrasil

Top comments (0)