Colin's Blog
[flutter] easy_localization을 사용한 앱의 다국어 수영장/워터파크 정보

수영장이나 워터파크에 대한 정보를 제공하는 앱을 만들어 보겠습니다. 우리는 Flutter로 앱을 개발하고, easy_localization 라이브러리를 사용하여 다국어를 지원할 것입니다.

목표

우리의 앱은 사용자가 선택한 언어에 따라 수영장 및 워터파크 정보를 보여줄 것입니다. 우리는 한국어와 영어를 지원하여, 한국어로 앱을 설정한 사용자에게는 정보가 한국어로, 영어로 앱을 설정한 사용자에게는 정보가 영어로 보여지도록 만들 것입니다.

개발 환경

앱 만들기

Flutter 프로젝트를 생성한 후, easy_localization 라이브러리를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  easy_localization: ^3.0.0
  flutter_localizations:
    sdk: flutter

pubspec.yaml 파일에 위의 의존성을 추가하고, 터미널에서 flutter pub get 명령어를 실행하여 라이브러리를 설치합니다.

다국어 지원 설정

우선 main.dart 파일에서 easy_localization 라이브러리를 초기화합니다.

void main() {
  runApp(
    EasyLocalization(
      child: MyApp(),
      supportedLocales: [Locale('en', 'US'), Locale('ko', 'KR')],
      path: 'assets/translations',
      fallbackLocale: Locale('en', 'US'),
    ),
  );
}

supportedLocales 배열에 지원할 언어들을 추가하고, path에 번역 파일이 있는 폴더의 경로를 지정합니다.

번역 파일 생성

assets/translations 폴더에 각 언어별로 번역 파일을 생성합니다.

예를 들어, en.json 파일에는 영어로 된 번역을, ko.json 파일에는 한국어로 된 번역을 작성합니다.

// en.json
{
  "pool_info": "Pool Information",
  "waterpark_info": "Waterpark Information"
}

// ko.json
{
  "pool_info": "수영장 정보",
  "waterpark_info": "워터파크 정보"
}

번역된 텍스트 사용

이제 앱 내에서 easy_localization을 이용하여 번역된 텍스트를 사용할 수 있습니다.

Text('pool_info'.tr(), style: TextStyle(fontSize: 18)),
Text('waterpark_info'.tr(), style: TextStyle(fontSize: 18)),

이렇게 함으로써, 사용자가 선택한 언어에 따라 해당 언어로 번역된 정보가 앱에 표시될 것입니다.

결론

우리는 Flutter를 사용하여 다국어를 지원하는 수영장/워터파크 정보 앱을 만들었습니다. easy_localization 라이브러리를 이용하면 앱의 다국어 지원 기능을 쉽게 구현할 수 있습니다. 사용자들은 이제 원하는 언어로 수영장 및 워터파크 정보를 확인할 수 있게 되었습니다.

© 2018 Colin. All rights reserved.