Flutter - Localization(현지화) 패키지, easy_localization

앱을 개발할 때, 한 국가만 대상으로 개발하여 출시하는 경우는 드물다.
한국, 미국, 일본 등 글로벌하게 출시하게 된다.
이럴때 고려해야 될 부분 중 하나는 앱 내 텍스트 등의 현지화다.
한국이라면 한국어로, 미국같은 영어권 국가라면 영어로 보여지게 한다는지 등.

안드로이드는 strings.xml 리소스를 분리하고,
iOS는 국가별 문자열 키값 쌍을 만들고 String Extension에서 이를 읽어들여 런타임에 알맞게 보여지도록 구현했었다.
Flutter는 어떻게 할 수 있을까?

---

 

https://pub.dev/packages/easy_localization

easy_localization | Flutter Package

손 쉬운 현지화 패키지, easy_localization를 소개한다.

먼저 아래와 같이 pubspec.yaml에 패키지를 추가한다.

dependencies:
  easy_localization: ^3.0.1

 

 

그리고 아래를 참고하여 현지화에 사용할 텍스트의 json 파일을 생성한다.

assets
└── translations
    ├── {languageCode}.{ext}                  //only language code
    └── {languageCode}-{countryCode}.{ext}    //or full locale code
    
    
ex)
assets
└── translations
    ├── en.json
    └── en-US.json

iOS의 경우는 info.plist에 아래와 같은 설정이 필요하므로 참고하여 설정한다.

<key>CFBundleLocalizations</key>
<array>
	<string>en</string>
	<string>nb</string>
</array>

---

이제 현지화 기능을 사용하기 위해,
앱을 실행하는 MaterialApp 혹은 CupertinoApp에 아래와 같은 코드를 추가해준다.

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await EasyLocalization.ensureInitialized();
  
  runApp(
    EasyLocalization(
      supportedLocales: [Locale('en', 'US'), Locale('de', 'DE')],
      path: 'assets/translations', // <-- change the path of the translation files 
      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()
    );
  }
}

파라미터에 대한 내용은 공식문서를 참고하면 좋겠다.
fallbackLocale은 supportedLocales에 존재하지 않는 언어인 경우 디폴트로 처리할 Locale을 지정한다.

아래는 현지와 기능의 사용 예시다.

// Text Widget을 생성하고 바로 현지화를 적용한다.
Text('title').tr() 

// String Extension을 사용하여 현지화된 텍스트를 획득한다.
print('title'.tr()); 

// static으로 제공되는 tr 함수를 사용하여 현지화된 텍스트를 획득한다.
var title = tr('title')

코드를 보면 알겠지만, 굉장히 쉽게 사용이 가능하다.
특히, Text Widget에 Extension을 제공해주므로 중복 코드도 회피할 수 있다.

텍스트에 파라미터를 전달하는 경우는 아래와 같이 사용할 수 있다.

{
   "msg":"{} are written in the {} language",
   "msg_named":"Easy localization is written in the {lang} language",
   "msg_mixed":"{} are written in the {lang} language",
   "gender":{
      "male":"Hi man ;) {}",
      "female":"Hello girl :) {}",
      "other":"Hello {}"
   }
}

// 순서대로 파라미터 전달
Text('msg').tr(args: ['Easy localization', 'Dart']),

// 파라미터의 이름을 명시하여 전달
Text('msg_named').tr(namedArgs: {'lang': 'Dart'}),

// 순서대로 & 이름을 명시하여 전달
Text('msg_mixed').tr(args: ['Easy localization'], namedArgs: {'lang': 'Dart'}),

// 중첩된 문자열을 분기하여 처리하기
Text('gender').tr(gender: _gender ? "female" : "male"),

텍스트의 다양한 상태에 따라 처리가 가능하다.
알면 알수록 편리하다고 느끼는 중이다.

---

이 외에도 제공되는 기능이 정말 많다.
특히, 기기의 국가 설정을 저장하고 초기화하는 등의 기능도 제공되고 있다.
앱에서 활용할 수 있는 부분이 정말 많다.

한 가지 걱정이었던 것은, 코드로 현지화하는 경우에 key값 입력의 휴먼에러나,
많아졌을 경우에 헷갈리는 등의 상황이 고민이었다.
그러나 이 부분도 해결해주고 있다.

---

Code generation

esay_localization 패키지는 현지화할 텍스트가 많아지는 경우,
이를 코드로 생성해서 불편을 해소해주고 있다.
터미널에서 아래 커맨드를 입력한다.

flutter pub run easy_localization:generate -f keys -o locale_keys.g.dart

그리고 생성된 파일로 아래와 같이 코드에서 접근할 수 있다.

import 'generated/locale_keys.g.dart';

print(LocaleKeys.title.tr());
Text(LocaleKeys.title).tr();

Key값이 많아져서 헷갈리는 경우와 일일이 String으로 키 값을 입력하는 경우의 휴먼에러를 줄일 수 있다.

---

현재 Flutter로 앱을 개발중인데, 이런 현지화 관련된 고민이 있어 찾던 중 좋은 패키지를 발견한 것 같다.
Flutter 앱 개발 시 현지화에 대한 고민이 있다면 이 패키지를 추천한다.