[flutter] 플러터 intl을 활용한 앱에서 동일한 문자열을 다른 언어로 번역하려면 어떤 방법이 있을까요?

플러터는 다국어 지원을 위해 intl 패키지를 제공하고 있습니다. 이 패키지를 사용하면 앱에서 사용되는 문자열을 다른 언어로 번역할 수 있습니다.

먼저, intl 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같은 의존성을 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.17.0

추가한 뒤에는 intl_translation 패키지의 intl_translation 도구를 사용하여 번역 메시지를 추출해야 합니다. 터미널에서 다음과 같은 명령어를 실행합니다:

flutter pub run intl_translation:extract_to_arb --output-dir=i18n/arb --output-file=intl_messages.arb lib/l10n.dart

위의 명령어는 lib/l10n.dart 파일에서 번역할 문자열을 추출하고, i18n/arb 폴더에 intl_messages.arb 파일로 저장합니다. 이 파일은 추후 번역할 메시지를 포함하게 됩니다.

번역할 언어에 대한 번역 파일(intl_messages_<lang>.arb)을 생성한 후, 번역할 문자열과 해당 언어에 대한 번역을 추가합니다. 예를 들어, 한국어로 번역할 경우 intl_messages_ko.arb 파일을 생성하고, 다음과 같이 번역 내용을 추가합니다:

{
  "@@locale": "ko",
  "hello": "안녕하세요",
  "goodbye": "안녕히 가세요"
}

번역 파일을 모두 준비한 후, 다음의 명령어를 사용하여 앱에 번역을 적용합니다:

flutter pub run intl_translation:generate_from_arb --output-dir=lib/l10n --no-use-deferred-loading lib/l10n.dart i18n/arb/*.arb

위 명령어는 번역 메시지를 사용할 수 있는 Dart 클래스 파일을 생성하고, lib/l10n 폴더에 저장합니다.

이제 앱에서 번역된 문자열을 사용할 수 있습니다. l10n.dart 파일에서 Intl.message 함수를 사용하여 번역할 문자열을 래핑합니다:

import 'package:intl/intl.dart';

String getHelloMessage() {
  return Intl.message(
    'hello', // 번역할 문자열 식별자
    name: 'getHelloMessage', // 함수 이름
    desc: 'Hello message', // 번역할 문자열 설명
  );
}

String getGoodbyeMessage() {
  return Intl.message(
    'goodbye', // 번역할 문자열 식별자
    name: 'getGoodbyeMessage', // 함수 이름
    desc: 'Goodbye message', // 번역할 문자열 설명
  );
}

위의 예제에서 getHelloMessage() 함수는 번역할 문자열 식별자인 ‘hello’를 Intl.message 함수의 첫 번째 인자로 전달합니다. 만약 이 함수가 한국어로 호출된다면 번역된 문자열 ‘안녕하세요’를 반환합니다.

번역된 문자열을 사용하기 위해 앱의 로케일을 설정해야 합니다. MaterialApp 위젯에서 localizationsDelegates, supportedLocaleslocaleResolutionCallback 속성을 설정합니다:

MaterialApp(
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('en'), // 영어
    const Locale('ko'), // 한국어
  ],
  localeResolutionCallback: (Locale locale, Iterable<Locale> supportedLocales) {
    return locale;
  },
  // ...
)

위 설정을 통해 번역된 문자열을 사용자의 로케일에 따라 앱에 표시할 수 있습니다. 이제 앱에서 동일한 문자열을 다른 언어로 번역하는 기능을 구현할 수 있습니다!