Internacionalizando seu aplicativo
Published: 2024-04-19 01:59:58

Eae Devs, blz?

![](https://cdn-images-1.medium.com/max/800/1*y51-ASW_0nHOTOFhv-mtTA.png)

As vezes desenvolvemos aplicativos que possuem público de diversos países, que tem diferentes idiomas, uma das opções que temos, e é a mais simples, é deixar nosso aplicativo todo em inglês, afinal é a linguagem universal e todo mundo tem que falar inglês, certo? Errado! E no flutter temos uma solução simples para isso, trata-se do package **flutter_localizations**.

Com nosso projeto criado temos que adicionar a referência ao package do **flutter_localizations** lá em nosso pubspec apontando para o repositório do sdk do flutter.

![](https://cdn-images-1.medium.com/max/800/1*QUwnki5GpIe-STyxa5ZQpQ.png)

Pronto agora podemos começar a desenvolver nosso app, primeiramente irei criar os arquivos de json na pasta assets (que pode ser criado na raiz do projeto) referente as frases que iremos querer que nosso aplicativo traduza.

O arquivo **pt.json** serão as frases em português.

![](https://cdn-images-1.medium.com/max/800/1*Ln6Iw0ZJjRn3GNcSNGU6dA.png)

E o **en.json** serão as frases em inglês

![](https://cdn-images-1.medium.com/max/800/1*zMsqYi2culSwDu8YkHFRpA.png)

Agora basta eu dar acesso a este diretório lá no pubspec

![](https://cdn-images-1.medium.com/max/800/1*885XlqWY4WXFKdvLPATNWA.png)

Agora para realizar a mágica toda iremos criar 2 arquivos que vou deixar na minha pasta **shared/localization,** são o **localization_app_delegate.dart**, **localization_app.dart** e o **translate_app.dar**t.

![](https://cdn-images-1.medium.com/max/800/1*OJLxTkKkKSEtc14-bf4kWw.png)

No meu **LocalizationApp** será o coração de todo nosso sistema de internacionalização, ele irá receber por injeção o objeto Locale que conterá as informações de linguagens do dispositivo do usuário.

Primeiramente temos o método **load()** esse método será responsável por carregar o **json** contendo os valores que configuramos lá no começo na nossa pasta **assets**, através do **languageCode** do nosso **Locale**.

E no final ele irá transformar nosso **json** em um **Map** de chave x valor.

Agora criaremos o método **translate()** que será realmente responsável por receber a chave e retornar o valor do nosso **json**.

![](https://cdn-images-1.medium.com/max/800/1*2RbpVA5i1301eLgAsjlg3Q.png)

Já o nosso **LocalizationAppDelegate** será responsável por delegar o local do nosso aplicativo, ele deve entender da classe **LocalizationsDelegate<LocalizationApp>** e vamos implementar os métodos necessários.

Primeiramente criei um atributo que será a lista de países que meu aplicativo suportará, no caso os códigos são **pt** para português e **en** para inglês.

![](https://cdn-images-1.medium.com/max/800/1*tEF3LI_1-ZRCP064U2w8IQ.png)

Feito isso no método **isSupported(Locale locale)** podemos verificar se o **languageCode** dentro da lista que criamos das línguas suportadas e retornar se encontrou ou não (assim poderemos configurar um valor default para as línguas que não damos suporte).

Agora no método **load(Locale locale)** vou chamar o método **load()** lá do meu **LocalizationApp** e retorno o próprio **localizationApp**.

No método **shouldReload** não abordaremos neste artigo, então apenas iremos mandar ele retornar o valor false.

![](https://cdn-images-1.medium.com/max/800/1*jPnbl_GFgLv7ZuyUbPB7yg.png)

Criaremos um método estático no **LocalizationsApp** para receber do contexto da aplicação que chamaremos de **of(BuilldContext)** e criaremos um atributo chamado **delegate** que irá retornar a instância do meu **LocalizationsAppDelegate().**

![](https://cdn-images-1.medium.com/max/800/1*4q8OKtpVhoTbaY_bzsOFyw.png)

Finalmente nossa classe **TranslateApp** simplesmente ela só precisa receber o contexto por injeção e criaremos o método text(String key) que irá chamar o método **translate()** do nosso **LocalizationsApp**.

Com nossas classes criadas vamos lá em nosso **widget** (Como estou usando o **slidy/modular** o meu **MaterialApp** está lá) e teremos que adicionar as configurações a respeito do **localization** dentro do **MaterialApp**.

Primeiramente o **supportedLocales** recebe uma lista de **Locales** que será suportada pela aplicação, e converteremos o **US** para **en** e o **BR** para **pt** (que são os nomes dos **json**).

No **localizationsDelegate** eu colocarei as classes para dizer como será delegada minhas localizações, adicionarei o **GlobalMaterialLocalizations.delegate**, **GlobalWidgetsLocalizations.delegate** e o **delegate** que criamos **LocalizationApp.delegate**

Agora o **localeResolutionCallback,** é neste lugar que poderemos dizer qual o **supportedLocale** que iremos utilizar, neste caso utilizei o **firstWhere** para encontrar o primeiro valor que condiz com **languageCode** e o **contryCode** .

Também adicionei o argumento **orElse** que serve para caso ele não encontre ninguém dentro da **supportedLocale**, neste caso estou retornando o valor default que é o primeiro valor da minha lista (o **en**)

![](https://cdn-images-1.medium.com/max/800/1*ImVCP3YA4DHjLd1Hvyj3fQ.png)

Agora vamos utilizar nossa internacionalização dentro do nosso aplicativo para chamar o valor da minha internacionalização basta eu chamar o **TranslateApp** passando o contexto e chamar o método texto passando a chave do meu valor.

![](https://cdn-images-1.medium.com/max/800/1*E2IG_CZlu8dunyXykNm7NA.png)

E como resultado teremos

![](https://cdn-images-1.medium.com/max/800/1*fWoa1ZgLXMp2r84eonXJrg.png)

Agora se eu modificar a língua do meu dispositivo para inglês.

![](https://cdn-images-1.medium.com/max/800/1*FBPkKWj4HvyGl9CBFj6J-w.gif)

Assim, o texto irá ser trocado para o texto da língua do meu dispositivo ao reabrir o app

![](https://cdn-images-1.medium.com/max/800/1*exPHGFvcSjDg_TO-EXLA4A.png)

Desta forma podemos ter um aplicativo que suporta diversas linguagens, basta criar um json com os valores para cada língua.

Legal né? Fique ligado sempre trago novidades por aqui, até a próxima.

[Projeto de exemplo](https://github.com/toshiossada/FlutterLocalization)

![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