Localization

Flutter는 기본적으로 US localization을 지원한다. 다른 언어로의 지원이 필요하다면 flutter_localizations을 패키지를 설치하여 MaterialApp의 속성을 부여해야 한다. 이 글에서는 flutter_localizations의 사용법에 대해 알아보고자 한다.

1. dependencies 설치

다음 명령어를 이용하여 flutter, intl을 설치

flutter pub add flutter_localizations --sdk=flutter
flutter pub add intl

pubspec.yml에 다음과 같이 작성됨을 확인

  dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: any

2. 예시 코드

main.dart

import 'package:flutter_localizations/flutter_localizations.dart';

main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Localizations Sample App',
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [
        Locale('en'), // English
        Locale('es'), // Spanish
      ],
      home: MyHomePage(),
    );
  }

localizationsDelegates는 해당 지역의 컬렉션을 생성한다.
GlobalMaterialLocalization.delegate는 재료 구성 요소 라이브러리에 대한 현지화된 문자열 및 기타 값을 제공한다.
GlobalWidgetsLocalization.delegate는 위젯 라이브러리의 기본 텍스트 방향을 정의한다.

supportedLocales는 지원하는 국가 코드를 작성하면 된다.

3. generate

다음과 같이 generate flag를 추가한다.

flutter:
  generate: true(add this)
  uses-material-design: true

4. l10n.yaml

다음과 같이 root directory 에서 |10n.yaml 파일을 생성한다.

l10n.yaml 에 아래의 내용을 복붙한다.

arb-dir: lib/l10n
template-arb-file: app_ko.arb
output-localization-file: app_localizations.dart
preferred-supported-locales:
  - en
  - ko
use-deferred-loading: true
suppress-warnings: true

5. 파일 생성

아래와 같이 lib/ 아래에 l10n폴더를 만들고, 지원언어의 .arb 파일을 app_(국가코드).arb형태로 생성한다.

6. .arb

.arg 파일 안에는 json형태의 데이터로 원하는 내용을 작성한다.

{
  "@@locale": "ko",//locale 정보
  
  "app_title" : "앱 타이틀",
  "splash_text_1" : "예시1",
  "splash_text_2" : "예시2"//마지막은 , 없음 주의
}

7. gen_l10n

flutter를 빌드해보면 .dart_tool/flutter_gen/gen_l10n에 app_localizations.dart 가 생성됨을 알수 있다.

8. Regenerate

arb 의 내용을 추가할때마다 자동으로 연결되는 것이 아니라 regenerate 해주어야 한다.

아래 명령어 참고

flutter gen-l10n
flutter build

9. AppLocalizations

이제 APP의 어디에서건 AppLocalizations.of(context) 로 접근하여 다국어를 지원할 수 있게 되었다.

또한 위의 예시코드도 다음과 같이 변경할 수 있다.

main.dart

import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Localizations Sample App',
      localizationsDelegates: AppLocalizations.localizationsDelegates,//edit
      supportedLocales: AppLocalizations.supportedLocales,//edit
      home: MyHomePage(),
    );
  }

10. SharedPreferences 로 관리하기

앱에서 마지막으로 설정한 지역코드를 SharedPreferences를 통해 관리할 수 있다.

아래 코드를 사용하여 app전체에서 translation.[변수] 로 편하게 사용할수 있다. 활용해보자.

import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

const String LAN_CODE = 'lanCode';
const String LAN_ENG = 'en';
const String LAN_KOR = 'kr';
const String LAN_JPN = 'ja';

Future<Locale> setLocal(String lanCode) async {
  SharedPreferences _pref = await SharedPreferences.getInstance();
  await _pref.setString(LAN_CODE, lanCode);

  return _locale(lanCode);
}

Future<Locale> getLocale() async {
  SharedPreferences _pref = await SharedPreferences.getInstance();
  String lanCode = _pref.getString(LAN_CODE) ?? LAN_KOR;

  return _locale(lanCode);
}

Locale _locale(String lanCode) {
  switch (lanCode) {
    case LAN_ENG:
      return Locale(LAN_ENG, 'US');
    case LAN_KOR:
      return Locale(LAN_KOR, 'KR');
    case LAN_JPN:
      return Locale(LAN_JPN, 'JA');
    default:
      return Locale(LAN_KOR, 'KR');
  }
}

AppLocalizations translation(BuildContext context) {
  return AppLocalizations.of(context)!;
}

언어 코드 표

언어	코드	언어	코드
아랍어	ar-XA	불가리아어	bg
크로아티아어	hr	체코어	cs
덴마크어	da	독일어	de
그리스어	el	영어	en
에스토니아어	et	스페인어	es
핀란드어	fi	프랑스어	fr
아일랜드어	ga	힌디어	hi
헝가리어	hu	히브리어	he
이탈리아어	it	일본어	ja
한국어	ko	라트비아어	lv
리투아니아어	lt	네덜란드어	nl
노르웨이어	no	폴란드어	pl
포르투갈어	pt	스웨덴어	sv
루마니아어	ro	러시아어	ru
세르비아어	sr-CS	슬로바키아어	sk
슬로베니아어	sl	태국어	th
터키어	tr	우크라이나어	uk-UA
중국어(간체)	zh-chs	중국어(번체)	zh-cht

참고

Flutter Localization Youtube

Flutter Localization Doc