Traduzir seu App em Flutter
Tags: flutter, android, code, traduzir
Published: 2021-03-13 18:13:46

## 1 Introdução

Hey clan, all right?
Eai clan, tudo certo?

Hoje eu venho falar sobre tradução, como deixar seu app flutter em vários idiomas. Afinal, queremos deixar nosso app mais acessível possível né? Haha'

E pra isso vamos falar de flutter localizations.

## 2 Localizações em Flutter

Por padrão, o Flutter fornece apenas localizações em inglês dos Estados Unidos. Para adicionar suporte a outros idiomas seu app deve especificar propriedades adicionais no MaterialApp (ou CupertinoApp) e incluir um pacote chamado **flutter_localizations**. 

Então, o primeiro passo é adicionar o pacote como uma dependência ao seu arquivo **pubspec.yaml** do seu projeto.

```
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations: # Coloque essa linha
    sdk: flutter         # e essa
```
Em seguida execute **pub get packages**, importe a biblioteca **flutter_localizations** e coloque **localizationsDelegates** e **supportedLocales** no **MaterialApp**.


```
import 'package:flutter_localizations/flutter_localizations.dart';
// TODO: descomente a linha abaixo após codegen
// import 'package:flutter_gen/gen_l10n/app_localizations.dart';

// ...

MaterialApp(
 localizationsDelegates: [
   // TODO: descomente a linha abaixo após codegen
   // AppLocalizations.delegate,
   GlobalMaterialLocalizations.delegate,
   GlobalWidgetsLocalizations.delegate,
   GlobalCupertinoLocalizations.delegate,
 ],
 supportedLocales: [
    const Locale('en', ''), // Inglês
    const Locale('pt', ''), // Português
    const Locale.fromSubtags(languageCode: 'zh'), // Chinês *Veja os locais avançados abaixo *
    // ... outras localidades que o aplicativo suporta
  ],
  // ...
)

```

Depois de introduzir o pacote **flutter_localizations** e adicionar o código acima, você pode escolher a ordem de tradução. No caso do código a cima o inglês está em primeiro lugar e isso quer dizer que quando for outro idioma que não tenha na lista **localizationsDelegates** o app vai deixar em inglês. Os widgets devem ser adaptados às mensagens localizadas, juntamente com o layout correto da esquerda para a direita e da direita para a esquerda.

Os elementos da lista **localizationsDelegates** são fábricas que produzem coleções de valores localizados.

**GlobalMaterialLocalizations.delegate** fornece strings localizadas e outros valores para a biblioteca de componentes de materiais. 

**GlobalWidgetsLocalizations.delegate** define a direção do texto padrão, da esquerda para a direita ou da direita para a esquerda, para a biblioteca de widgets.

## 3 Traduzir os textos do seu App

Depois que adicionou o pacote **flutter_localizations** vamos seguir as seguintes etapas:

**1**  Adicionar o pacote **intl** no **pubspec.yaml**:

```
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.17.0    # Adicionar essa linha
```
Esse pacote fornece recursos de internacionalização e localização, incluindo tradução de mensagens, plurais e gêneros, formatação e análise de data/número e texto bidirecional.

> Dica: sempre verifique se existe atualização quando adicionar um pacote. ([pub.dev](https://pub.dev/))

**2**  Habilite o sinalizador de geração no **pubspec.yaml**.

```
# A seção a seguir é específica para Flutter.
flutter:
  generate: true    # Adicione essa linha
```

**3**  Adicione um novo arquivo **yaml** ao diretório raiz do seu projeto chamado de **l10n.yaml** com o seguinte conteúdo:

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

![Arquivo l10n](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o9xpw01tc4atyzed1xzt.png)

Este arquivo configura a ferramenta de localização, isso significa que na:

* Primeira linha: é caminho do arquivo de entrada que vai estar em ${PROJETO_FLUTTER}/lib/l10n,mas não criamos essa pasta ainda.

* Segunda linha: é a tradução base dos textos no formato [JSON](https://pt.stackoverflow.com/questions/4042/o-que-%C3%A9-json-para-que-serve-e-como-funciona) que vamos colocar, no caso está o arquivo **app_en.arb** que é o de inglês.
> Esse arquivo é o principal, então você tem que colocar tudo em inglês primeiro para criar um chave em cada texto.

* Terceira linha: é o arquivo onde as localizações são geradas.

**4**  Crie uma pasta com o nome **l10n** dentro da pasta **lib** e também crie um arquivo com o nome **app_en.arb**, dentro desse arquivo adicione esse conteúdo: 

```
{
  "helloWorld": "Hello World!"
}

```

**5**  Agora, crie outro arquivo com o nome de app_pt.arb no mesmo diretório e traduz somente o valor de helloWorld.

```
{
  "helloWorld": "Óla Mundo!"
}
```	

> Dica: as chaves tem que ser iguais em todos os arquivos.

![pasta l10n](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j4etlirkylnzhs16wofr.png)

**6**  Agora você tem que executar seu projeto para que aconteça o **codegen** e depois disso você consegue ver os arquivos gerados no caminho: `${FLUTTER_PROJECT}/.dart_tool/flutter_gen/gen_l10n.`

**7** Já podemos remover aquele código comentado na nossa main dentro do MaterialApp e atualizar nosso projeto que já irá funcionar.

```
import 'package:flutter_localizations/flutter_localizations.dart';
// import 'package:flutter_gen/gen_l10n/app_localizations.dart'; // remova este comentario

// ...
   
MaterialApp(
  localizationsDelegates: [
    // AppLocalizations.delegate, // remova este comentario
    GlobalMaterialLocalizations.delegate,
    // ...
);

// Use AppLocalizations em qualquer lugar em seu aplicativo.
// Aqui, a mensagem traduzida é usada em um widget de texto
Widget build(BuildContext context) {
  // ...
  return Text(AppLocalizations.of(context).helloWorld);
}

```

Este código `Text(AppLocalizations.of(context).helloWorld)` gera um widget de texto que exibe “Hello World!”.

![Exemplo ola mundo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/th7jj9z4hw20bj3bbvi4.jpg)

Caso você mudar o idioma do seu dispositivo para qual quer outro, neste exemplo de código vai ficar em inglês.

![Exemplo hello world](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/izhjn6hx0pfgmlhvnyf2.jpg)

> Dica: Nos arquivos **.arb**, a chave de cada entrada é usada como o nome do método do getter, enquanto o valor dessa entrada contém a mensagem localizada.

Você pode adicionar o plugin do **intl* também.

![Plugin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cikbhc7c21mtapxx53tf.png)


## 4 Conclusão

Muito simples né? 

Agora você pode colocar seu app em vários idiomas e fazer sucesso no mundo todo. :D

Espero que tenha te ajudado em algo, deixe seu like e compartilhe para os amigos. Vamos sempre estar contribuindo para nossa comunidade dev! 

Valeu, é nóis!

## 5 Referencias:


[Documentação do Flutter](https://flutter.dev/docs/development/accessibility-and-localization/internationalization)

[Pacote intl](https://pub.dev/packages/intl)