Flutter 에서 i18n 적용하기

프로젝트에서 사용하던 flutter i18n plugin이 더이상 유지보수를 중단한다고 선언했다..

갑작스런 청천벽력같은 소식에 서둘러서 다른 패키지들을 찾아봤는데 intl 패키지라던가.. flutter_i18n 라던가... 다양한 패키지들을 고려해보았지만 대부분 dart code를 arb로 generate 하고 변환한 arb 파일을 사용하는 형태였는데 본인이 속한 회사에서는 이미 모든 텍스트 리소스가 key:value 형태로 있었기 때문에 이 형태를 벗어나지 않고 진행하고 싶었다.

그래서 결정한 패키지가 easy_localization 이다.

한차례 테스트 후에 잘 동작하는 것 같아서 사용하기로 결정했다.

패키지 설치 및 셋업

여느 Dart 패키지처럼 pubsepc.yaml에 추가

easy_localization: ^2.3.2

그리고 assets에 사용할 asset 파일을 명시해줘야 한다

flutter:
  assets:
    - assets/translations/

⚠️ iOS 에서는 반드시 info.plist 를 수정해야함

xcode에서 Runner.xcworkspace를 열고 info.plist의 Localizations 프로퍼티를 수정해야 한다.

만약 Localizations 프로퍼티가 없으면 +를 눌러서 Localizations 프로퍼티를 추가해주면 된다

Localizations 에 지원할 언어의 item을 추가해주면 된다

사용하기

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:easy_localization/easy_localization.dart';

void main() {
  runApp(
    EasyLocalization(
      supportedLocales: [Locale('en', 'US'), Locale('de', 'DE')],
      path: 'assets/translations', // <-- change patch to your
      fallbackLocale: Locale('en', 'US'),
      child: MyApp()
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,
      home: MyHomePage()
    );
  }
}

• main에서 위 예제처럼 MyApp을 wrapping 하고 지원되는 언어들을 supportedLocales 에 명시한다
• path는 localization resource 파일들의 위치
• 기기의 locale이 지원하지 않는 언어면 사용할 언어는 fallbackLocale 에 지정해주면 된다.

Locale 이 항상 en_US로 잡히는 문제

context.locale 로 MaterialApp의 locale을 지정해주니까 항상 en_US로 locale이 잡히는 문제가 있었다.

나는 아래와 같이 dart:ui를 이용해서 시스템 locale 값을 통해 context.locale을 잡아주도록 해서 해결했다.

void setLocale(BuildContext context) {
    switch (ui.window.locale.languageCode) {
      case 'ko':
        context.locale = Locale('ko', 'KR');
        break;
      case 'es':
        context.locale = Locale('es', 'ES');
        break;
      case 'fr':
        context.locale = Locale('fr', 'FR');
        break;
      case 'it':
        context.locale = Locale('it', 'IT');
        break;
      case 'ja':
        context.locale = Locale('ja', 'JP');
        break;
      case 'nl':
        context.locale = Locale('nl', 'NL');
        break;
      case 'zh':
        if (ui.window.locale.scriptCode == 'Hant') {
          context.locale = Locale('zh', 'TW');
        }
        if (ui.window.locale.countryCode == 'HK' ||
            ui.window.locale.countryCode == 'TW' ||
            ui.window.locale.countryCode == 'CN') {
          context.locale = Locale('zh', ui.window.locale.countryCode);
        } else
          context.locale = Locale('zh', 'CN');
        break;
      default:
        break;
    }
  }
  
  class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    setLocale(context);
    return MaterialApp(
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,
      home: MyHomePage()
    );
  }
}

사용

이제 키값을 통해서 아래처럼 간결하게 다국어 지원이 가능하다

Text('CommonProfile'.tr())