Flutter 다국어 지원 - Localization

Flutter 다국어 지원, Flutter Localization 등으로 검색하면 많은 자료가 나옵니다.

 

 참고자료 

1. 기본적으로 참고해야하는 자료는 공식 문서

- https://docs.flutter.dev/development/accessibility-and-localization/internationalization

하지만 영어가 익숙하지 않다보니 공식문서만 보면 이해가 잘 되지 않아서 다른 한글 자료 및 영상 자료를 추가로 참고.

 

2. 유튜브 영상

- https://youtu.be/Zw4KoorVxgg

상세하게 순서 등 다 나오다보니 감사하게 공식 문서와 함께 참고.

 

 

 다국어 지원 절차 

1. 라이브러리 추가

  - pubspec.yaml 파일에 추가
    a. dependencies 에 flutter_localizations, intl 추가

    b. flutter 에 generate 추가

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

....

flutter:
  generate: true

 

2. YAML 파일 새롭게 추가

  - l10n.yaml 루트 경로

arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart

 

3. lib 경로 아래에 다국어 관련 폴더, 파일 추가

  - lib/l10n 경로 추가

  - l10n.dart 추가

class L10n {
 static final all = [
   const Locale('en'),
   const Locale('ko'),
 ];
}

  - json 형태로 app_en.arb, app_ko.arb 파일 추가

app_en.arb

{
  "language": "English",
  "@language": {
    "description": "The current Language"
  },

  "menu": "Menu",
}

app_ko.arb

{
  "language": "한글",
  "@language": {
    "description": "현재 언어"
  },

  "menu": "메뉴",
}

 

4. 빌드하기

  - flutter generate 설정을 true 했기 때문에 빌드하면  .dart_tool/flutter_gen  폴더 아래에 l10n 관련한 localiaztions 파일들이 생성된다.

 

5. main.dart 파일에 다국어 설정

  - supportedLocaled 에 전에 만든 지원할 언어 추가

  - localizationsDelegates 추가

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

  @override
  Widget build(BuildContext context) {
    NotificationApi.init(initScheduled: true);

    return MaterialApp(
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        supportedLocales: L10n.all,
        localizationsDelegates: const [
          AppLocalizations.delegate,
          GlobalMaterialLocalizations.delegate,
          GlobalCupertinoLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
        ],
        home: Home());
  }
}

참고로 IDE 를 사용할 경우에 특정 클래스가 존재하면 해당 클래스 이름을 쓰면 자동으로 import 를 추천하는데 AppLocalizations 는 자동으로 뜨지 않아서 직접 경로를 추가했다.

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

 

6. 사용하기

  - 현재 블로그에서는 language, menu 만 추가했기 때문에 두가지만 사용 가능

AppLocalizations.of(context).language;
AppLocalizations.of(context).menu;