Eae Devs, blz?
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.
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.
E o en.json serão as frases em inglês
Agora basta eu dar acesso a este diretório lá no pubspec
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.dart.
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.
Já o nosso LocalizationAppDelegate será responsável por delegar o local do nosso aplicativo, ele deve entender da classe LocalizationsDelegate 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.
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.
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().
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)
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.
E como resultado teremos
Agora se eu modificar a língua do meu dispositivo para inglês.
Assim, o texto irá ser trocado para o texto da língua do meu dispositivo ao reabrir o app
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.
Entre em nosso discord para interagir com a comunidade: https://discord.com/invite/flutterbrasil
https://linktr.ee/flutterbrasil
Top comments (0)