Bytebank 6️⃣: Entendendo abordagens de internacionalização ✈️

ℹ️ Sobre o projeto

Aplicação mobile desenvolvida durante o curso Flutter i18n: entenda abordagens de internacionalização de Flutter, na plataforma Alura, pelo instrutor Guilherme Silveira.

🧳 Internacionalization (i18n)

Curiosidade: A sigla i18n foi criada por ter 18 letras entre o i e o n da palavra internacionalization.

A localização (l18n) é relacionada a formatações de moeadas, data, números em neral, entre outros. Ou seja, sua aplicação se adapta ao local onde o usuário estiver. Enquanto a internacionalização é relacionada a atender vários idiomas.

🪛 Exemplo de aplicação da i18n ao projeto

Utilizando o projeto Bytebank com BLoC foram aplicadas algumas traduções pt-br (português brasileiro) e en (inglês). Primeiro foi criado um Cubit de localização (localization):

Classe CurrentLocaleCubit responsável por prover o idioma do local.

class CurrentLocaleCubit extends Cubit<String> {
  CurrentLocaleCubit() : super("pt-br");
}

Também foram criadas as classes LocalizationContainer e ViewI18N:

Classe LocalizationContainer, que possui o BLoC Provider e irá receber um child (o dashboard do app).

class LocalizationContainer extends BlocContainer {
  final Widget child;
  const LocalizationContainer({required this.child, super.key});

  @override
  Widget build(BuildContext context) {
    return BlocProvider<CurrentLocaleCubit>(
      create: ((context) => CurrentLocaleCubit()),
      child: child,
    );
  }
}

Classe ViewI18N, que recebe a localização de CurrentLocaleCubit e a retorna utilizando a função localize.

class ViewI18N {
  String? language;
  ViewI18N(BuildContext context) {
    language = BlocProvider.of<CurrentLocaleCubit>(context).state;
  }

  String? localize(Map<String, String> values) {
    print("linguagem:  $language");
    return values[language];
  }
}

Essa função localize é usada no nosso DashboardView (o qual estende de ViewI18N), que traduz os títulos dos botões da página de Dashborad utilizando um map de linguagem e tradução.

Classe DashboardViewI18N.

class DashboardViewI18N extends ViewI18N {
  DashboardViewI18N(BuildContext context) : super(context);

  String get transfer =>
      localize({
        "pt-br": "Transferir",
        "en": "Transfer",
      }) ??
      "Transfer";

  String get transactionFeed =>
      localize({
        "pt-br": "Transações",
        "en": "Transaction Feed",
      }) ??
      "Transaction Feed";

  String get changeName =>
      localize({
        "pt-br": "Mudar nome",
        "en": "Change name",
      }) ??
      "Change name";
}

Assim, utilizando uma instância de DashboardViewI18N chamada i18n, traduzimos os nomes da página apenas usando i18n.transfer, i18n.transactionFeed ou i18n.changeName, por exemplo.

i18n, instância de DashboardViewI18N.

var i18n = DashboardViewI18N(context);

🕵🏻‍♀️ Eager e Lazy

Existem dois tipos de dados: eager (ansioso) e lazy (preguiçoso). Onde eager são os dados que estão todos disponíveis de uma só vez, enquanto o lazy disponibiliza apenas os dados necessários a medida que são requeridos.

✨ Funcionalidades do projeto

A aplicação possui as mesmas funcionalidades do projeto Bytebank com BLoC, e como adição da internacionalização, ou seja, o projeto pode funcionar tanto em português quanto tem inglês.

🔨 Tecnologias usadas

Neste projeto foram usadas as seguintes tecnologias:

Framework Flutter

Linguagem Dart

▶️ Como executar

Primeiro você deve instalar flutter.

Então, você pode clocar e entrar na pasta do projeto:

git clone https://github.com/jhoisz/Bytebank_i18n
cd Bytebank_i18n

Agora, para testar, você deve instalar os pacotes/dependêncas e usar um dispositivo conectado ao seu computador ou usar um emulador:

Flutter get packages
flutter run