Traduzir seu App em Flutter

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)

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

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

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!”.

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

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.

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

Pacote intl