Front-End/Flutter

[Flutter] 다국어 처리 easy_localization

양짱 2021. 3. 20. 03:27

Flutter에서 다국어 처리를 위한 easy_localization package 에 대해서 알아보겠습니다.

자세한 사용방법 및 properties 는 아래 pub.dev에서 확인하시면 됩니다.

 

https://pub.dev/packages/easy_localization

 

easy_localization | Flutter Package

Easy and Fast internationalizing and localization your Flutter Apps, this package simplify the internationalizing process .

pub.dev

1. Installation

- pubspec.yaml depencencies 추가

dependencies:
  easy_localization: ^3.0.0

- pub package get

$ flutter pub get

- package import

import 'package:easy_localization/easy_localization.dart';

Example

- 언어별 json 파일 추가 (JSON,CSV,HTTP,XML,Yaml 파일 등 지원 가능)

assets
└── translations
    ├── en-US.json
    └── ko-KR.json 

en-US.json

{
  "title": "Localization Demo"
}

ko-KR.json

{
  "title": "다국어 데모"
}

 

- pubspec.yaml json 파일이 있는 translations 폴더 assets 추가

flutter:
  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/translations/

2. EasyLocalization 설정  부분

-  runApp에 EasyLocalization 설정 추가

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await EasyLocalization.ensureInitialized();

  runApp(
    EasyLocalization(
        supportedLocales: [Locale('en', 'US'), Locale('ko', 'KR')],
        path: 'assets/translations', // <-- change the path of the translation files
        fallbackLocale: Locale('ko', 'KR'),
        child: MyApp()),
  );
}

 

- MaterialApp에 localizationDeletgatess및 suppportedLocales, locale 추가

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }

3. text 값에 localization 적용 -- "title".tr()

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,
      title: "title".tr(),
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: "title".tr()),
    );
  }

4. 실행 결과

Github

github.com/sheep0128/flutter_app_easy_localization

 

easy_localization 패키지의 장점은 intl 보다 훨씬 과정이 간단하고 적용이 빠른것이 아닐까 합니다.

다국어 처리에 관심 있으신 분들은 아래 intl package를 사용하는 방법도 참고하시면 좋을것 같습니다.

 

flutter-ko.dev/docs/development/accessibility-and-localization/internationalization