Flutter 앱 다국어 적용 방법

AVLE은 한국 커뮤니티가 만들고 있는데, 현재 지원되는 언어는 영어뿐입니다.

다국어를 지원하려면 표시되는 모든 문자에 대해서 다국어 지원하도록 코딩되어야 합니다.
AVLE은 현재 다국어 지원을 고려하여 개발되지 않았습니다.

아직 기본기능이 안되는 것들이 있지만, 구성은 갖췄기에 다국어 지원을 검토해 보려고 합니다.
Flutter에서 다국어 지원은 @anpigon님의 글을 참고하여 검토해 보고 있습니다.

[개발][Flutter] 플러터 암호화폐 지갑 앱 개발 일기 6번째

소스코드도 공개되어 있어서 참고가 되었습니다.
https://github.com/anpigon/flutter_steem_wallet_app/blob/develop/assets/locales/ko_KR.json
(git에서 master 브랜치가 아니라 develop 브랜치입니다.)

Getx를 사용한 다국어 지원

다국어 지원하는 것은 여러 프레임워크에서 대부분 비슷합니다.

• 문자열에 대한 언어별 파일 생성
• 코드에서 문자열 사용

Getx도 유사한 방식으로 사용됩니다.
https://github.com/jonataslaw/getx/#internationalization

참고로, Getx는 다국어 지원뿐만 아니라 네비게이션, 상태관리 등 여러 기능을 포함하는 훌륭한 패키지입니다.

언어 파일 생성

간단히 다음과 같이 ko_KR.json 한국어 파일을 생성합니다.

// file: ko_KR.json
{
    "g": {
        "title": "AVLE",
        "username": "계정",
        "password": "암호"
    },
    "Signup": {
        "title": "회원 가입"
    }
}

지원하고자 하는 언어마다 위와 같은 파일을 만들어야 합니다. 그래서 다국어 지원은 각 나라별 자원 봉사자들의 도움이 필요합니다.

Flutter 프로젝트에서 이 파일을 assets/locales/ko_KR.json에 위치시킵니다.

그런 다음 이 것을 코드에서 사용할 수 있도록 만들어야 합니다. 이 때 Getx를 사용합니다!

Getx CLI 설치

Getx의 다국어 기능을 사용하기 위해서 먼저, Getx CLI를 설치해야 합니다.

다음 페이지를 참고하여 진행합니다. 그런데 설명이 좀 부실한거 같네요.
https://github.com/jonataslaw/get_cli

여기서는 기존 프로젝트에 적용하는 것을 해보겠습니다.

// get_cli 패키지 설치
$ flutter pub global activate get_cli

// 프로젝트 루트 폴더로 이동, 아래 옵션에서 CLEAN 선택 (차이는 모르겠습니다)
$ get init
? Which architecture do you want to use? (Use arrow keys)
  GetX Pattern (by Kauê)
❯ CLEAN (by Arktekko)

// 그러면 다음과 같이 Warning이 표시됩니다. lib 폴더를 덮어쓰면 안됩니다. No를 선택합니다.
? Your lib folder is not empty. Are you sure you want to overwrite your application?
 WARNING: This action is irreversible (Use arrow keys)
  Yes!
❯ No

그러면 설치가 완료 됩니다. 그리고 다음과 같이 쳐보면 get cli 버전이 표시됩니다.

$ get -v
░██████╗░███████╗████████╗   ░█████╗░██╗░░░░░░██╗
██╔════╝░██╔════╝╚══██╔══╝   ██╔══██╗██║░░░░░░██║
██║░░██╗░█████╗░░░░░██║░░░   ██║░░╚═╝██║░░░░░░██║
██║░░╚██╗██╔══╝░░░░░██║░░░   ██║░░██╗██║░░░░░░██║
╚██████╔╝███████╗░░░██║░░░   ╚█████╔╝███████╗ ██║
░╚═════╝░╚══════╝░░░╚═╝░░░   ░╚════╝░╚══════╝ ╚═╝

Version: 1.7.1

언어 변환 파일 생성

그러면 이제 get_cli를 이용해서 위에서 만들었던 ko_KO.json 파일을 코드에서 사용할 수 있도록 하는 파일을 생성합니다.

// 프로젝트 루트 폴더로 이동
$ get generate locales
✓  File: locales.g.dart created successfully at path: lib/generated/locales.g.dart
✓  locale files generated successfully.

그러면 lib/generated/locales.g.dart에 해당 파일이 생성됩니다.

열어보면 이렇게 되어 있습니다.

// DO NOT EDIT. This is code generated via package:get_cli/get_cli.dart

// ignore_for_file: lines_longer_than_80_chars
// ignore: avoid_classes_with_only_static_members
class AppTranslation {
  static Map<String, Map<String, String>> translations = {
    'ko_KR': Locales.ko_KR,
    'en_US': Locales.en_US,
  };
}

class LocaleKeys {
  LocaleKeys._();
  static const g_title = 'g_title';
  static const g_username = 'g_username';
  static const g_password = 'g_password';
  static const Signup_title = 'Signup_title';
}

class Locales {
  static const ko_KR = {
    'g_title': 'AVLE',
    'g_username': '계정',
    'g_password': '암호',
    'Signup_title': '회원 가입',
  };
}

그럼 이제 코드에서 이것을 사용해 보겠습니다.

 TextFormField(
                            decoration: InputDecoration(
                              prefixIcon: const Icon(Icons.alternate_email),
                              hintText: 'g_username'.tr,

여기서 보면 'g_username'.tr처럼 문자 코드 뒤에 .tr만 붙여주면 됩니다.
이 기능을 사용하려면 다음을 임포트 해야 합니다.

import 'package:get/get_utils/src/extensions/internacionalization.dart';

문자열에 파라미터 사용

문자열이 고정되지 않고, 동적으로 바뀌도록 파라미터를 사용할 수 있습니다.

먼저, 언어 파일에 다음과 같이 만듭니다. 파라미터 부분에 @를 사용합니다.

// ko_KR.json 파일
 "PasswordDialog": {
        "password_guide": "@role 또는 그 이상의 암호를 입력하세요",

그런 다음 코드에서 아래 처럼 @로 입력한 부분을 파라미터로 대체할 수 있습니다.

Text('PasswordDialog_password_guide'.trParams({'role': '포스팅'})),

지금까지 get_cli를 이용하여 다국어 언어 파일을 생성하고 사용하는 방법을 알아봤습니다.
한가지 빼먹은 것이 있는데요, 앱을 아래처럼 GetMaterialApp으로 감싸야 한다는 것입니다.

  return GetMaterialApp(
      ...
      translationsKeys: AppTranslation.translations,
      locale: Get.deviceLocale,
      fallbackLocale: const Locale('en', 'US'),
    );