Como localizar o aplicativo no Flutter

Última atualização: 18/03/2021
Flutter

Localizar seu aplicativo é um requisito importante se você deseja que ele seja usado em todo o mundo. Flutter fornece uma maneira simples de localizar seu aplicativo usando arquivos arb Este artigo explicará como localizar seu aplicativo no Flutter . Observe que este artigo é baseado no Flutter 2.0.1, portanto, se você estiver usando versões mais antigas, a maneira explicada neste artigo pode não funcionar.

1. Adicione dependências a pubspec.yaml

Adicione dependências a pubspec.yaml

pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.16.1

Esses pacotes são necessários para localização.

2. Adicione o sinalizador de generate

pubspec.yaml
flutter:
  generate: true

Este sinalizador permite que o Flutter gere a AppLocalizations partir de arb que são necessários para a localização.

3. Crie l10n.yaml

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

Este arquivo fornece configurações ao gerar automaticamente a classe AppLocalizations arb-dir especifica o diretório para arquivos arb template-arb-file especifica o arb usado como template. output-localization-file especifica o nome do arquivo de classe AppLocalizations

4. Crie o arquivo arb

Crie o arb no diretório especificado em l10n.yaml. arb arquivo arb está no formato json e você pode fornecer traduções para cada chave. O kay é chamado de resource id e o valor é chamado de resource value . Por exemplo, o exemplo abaixo fornece a tradução em inglês para o resource id helloWorld .

app_en.arb
{
  "helloWorld": "Hello World!",
  "@helloWorld": {
    "description": "The conventional newborn programmer greeting"
  }
}

Você pode fornecer uma explicação detalhada para a resource id do recurso adicionando o prefixo @ resource id do recurso. No exemplo acima, @helloWorld descreve as informações detalhadas da resource id helloWorld . Em seguida, você pode criar outros arb acordo com o idioma que seu aplicativo suporta. app_ja.arb suporte ao idioma japonês, pode adicionar o arquivo app_ja.arb como abaixo.

app_ja.arb
{
  "helloWorld": "こんにちは世界!"
}

arb arquivo arb fornece várias expressões úteis e aqui apresentarei uma delas, o placeholder . Placeholder permite que você passe parâmetros para o resource value .

placeholder_example.arb
"pricePerMonth": "{price} per month",
"@pricePerMonth": {
  "placeholders": {
    "price": {
      "example": "123.45",
      "description": "price"
    }
  }
}

Você pode passar qualquer parâmetro no resource value como {price} . Em seguida, escreva a descrição do parâmetro em placeholders em @resource id . Depois de criar o placeholder e gerar AppLocalizations classe AppLocalizations, você pode chamá-la de seu aplicativo como abaixo.

AppLocalizations.of(context).pricePerMonth(100.0);

5. Crie AppLocalizations um arquivo de classe AppLocalizations

Se você chamar flutter pub get ou construir seu aplicativo, o AppLocalizations será gerado automaticamente. O nome do arquivo é especificado em l10n.yaml. Nesse caso, o arquivo seria .dart_tool/flutter_gen/gen_l10n/app_localizations.dart . O diretório é determinado pelo sistema.

A propósito, você não precisa submeter este arquivo ao git. Este arquivo é sempre gerado quando você constrói seu aplicativo e reflete o conteúdo do arquivo arb

6. Chame Material / Widget / CupertinoApp

Defina supportedLocales parâmetros localizationsDelegates e supportedLocales. Não se esqueça de importar a classe AppLocalizations

MaterialApp
import 'package:flutter_gen/gen_l10n/app_localizations.dart';


Widget build(BuildContext context) {
  return MaterialApp(
    localizationsDelegates: AppLocalizations.localizationsDelegates, // Add this line
    supportedLocales: AppLocalizations.supportedLocales, // Add this line
    home: // ...
  );
}

7. Ligue para o texto traduzido

Você pode usar texto localizado como o exemplo abaixo. A sintaxe é como AppLocalizations.of(context).<resource id>.

call_l10n
Text(AppLocalizations.of(context).helloWorld);

Localizações para a data

Você também pode exibir a data localizada como abaixo.

date_l10n
Locale locale = Localizations.localeOf(context);
DateFormat.yMd(locale.toString()).format(DateTime.now());

Referências

2019 Copyright Channel.241