Simplificando sua Internacionalização
Published: 2024-04-19 02:03:01


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](https://medium.com/u/1a7af23ef213?source=post_page-----ea458ac4fa8d--------------------------------)

da Flutterando (@davidsdearaujo).

[](https://pub.dev/packages/localization?source=post_page-----ea458ac4fa8d--------------------------------)

## 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.

![](https://miro.medium.com/v2/resize:fit:266/1*mF6d4yj-BLQ0TmPER8eqxg.png)

![](https://miro.medium.com/v2/resize:fit:200/1*yeQx6AcJrl8_RWaiPwrRjQ.png)

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

![](https://miro.medium.com/v2/resize:fit:260/1*52R9oaeKtk9-0sH9PAZzMg.png)

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.

![](https://miro.medium.com/v2/resize:fit:689/1*gB4by0FnaVNP3VgXqXdKjw.png)

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()**.

![](https://miro.medium.com/v2/resize:fit:492/1*k_QICq2nAXv_wQ1VJtNoWw.png)

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.

![](https://miro.medium.com/v2/resize:fit:604/1*gHY9JXQ-aGBHLVR4cb83jA.png)

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**.

![](https://miro.medium.com/v2/resize:fit:700/1*cWsIMdmLMzwCNsfoC15zGg.png)

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.

![](https://miro.medium.com/v2/resize:fit:700/1*cPHt2Xlp-0p9eH2P_4CoKg.png)

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.

![](https://miro.medium.com/v2/resize:fit:456/1*_Mf7h9KZXrH56U3T7SSJuw.png)

![](https://miro.medium.com/v2/resize:fit:234/1*mu2fx6E7UWWso3WmD-DVqQ.png)

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

![](https://miro.medium.com/v2/resize:fit:411/1*ibsgR5Ni0DU6Q-3aNTgHqw.png)

Agora precisamos traduzir todos os nossos  **json’s**

![](https://miro.medium.com/v2/resize:fit:331/1*eKdV8KJSKhy8oSq8uCv3zQ.png)

E nosso resultado será

![](https://miro.medium.com/v2/resize:fit:355/1*l_URH76yQ5bJOifkYKpyZw.gif)

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

![](https://miro.medium.com/v2/resize:fit:381/1*21RsjXt620JAgD0tqTa7UQ.png)

![](https://miro.medium.com/v2/resize:fit:355/1*k7BXo3B-H_UN6bXsk0RKDg.gif)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/obcg0d2y00yddve9quky.png)


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