[flutter] easy_localization을 사용한 앱의 다국어 공원/자연 경치 안내

14 Dec 2023

flutter

안녕하세요! 오늘은 Flutter로 개발된 앱에서 easy_localization 패키지를 사용하여 다국어 지원을 추가하는 방법에 대해 알아보겠습니다. 이번 예제에서는 다국어로 공원 및 자연 경치 관련 정보를 제공하는 앱을 개발하고자 합니다.

1. 시작하기 전에

우리의 앱은 영어, 스페인어 및 중국어를 지원할 예정이므로, easy_localization 패키지를 사용하여 이러한 다국어 지원을 구현할 것입니다. 먼저, 이 패키지를 프로젝트에 추가하고 사용할 각 언어의 번역을 준비해야 합니다.

2. easy_localization 패키지 추가

먼저, pubspec.yaml 파일에 easy_localization 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  easy_localization: ^3.0.0
  # 다른 의존성...

그런 다음, 터미널에서 다음 명령을 실행하여 패키지를 가져옵니다.

flutter pub get

3. 번역 파일 및 구성

assets 폴더 내부에 locales 폴더를 만들고, .json 형식의 각 언어 파일을 추가합니다. 예를 들어, 영어의 경우 `en.json`, 스페인어의 경우 `es.json`, 그리고 중국어의 경우 `zh.json`을 만들어야 합니다.

assets/
  locales/
    en.json
    es.json
    zh.json

JSON 파일 형식은 다음과 같이 각 언어에 맞는 키-값 쌍을 포함해야 합니다.

en.json

{
  "title": "Park & Nature Guide",
  "welcome": "Welcome to the Park & Nature Guide App!",
  "description": "Explore the breathtaking landscapes and diverse flora and fauna in our parks."
  // 다른 키-값 쌍...
}

es.json

{
  "title": "Guía de Parques y Naturaleza",
  "welcome": "¡Bienvenido a la aplicación Guía de Parques y Naturaleza!",
  "description": "Explore los impresionantes paisajes y la diversa flora y fauna en nuestros parques."
  // 다른 키-값 쌍...
}

zh.json

{
  "title": "公园与自然指南",
  "welcome": "欢迎使用公园与自然指南应用！",
  "description": "探索我们公园中令人叹为观止的风景和多样的植物和动物。"
  // 다른 키-值 쌍...
}

4. 언어 지원 추가

이제 main.dart 파일에서 easy_localization 패키지를 초기화하고 지원할 언어를 설정해야 합니다.

import 'package:easy_localization/easy_localization.dart';

void main() {
  runApp(
    EasyLocalization(
      supportedLocales: [Locale('en'), Locale('es'), Locale('zh')],
      path: 'assets/locales', // 번역 파일이 위치한 경로
      fallbackLocale: Locale('en', 'US'),
      child: MyApp(),
    ),
  );
}

5. 다국어 문자열 사용

easy_localization 패키지를 사용하여 다국어에 맞게 문자열을 가져올 수 있습니다.

Text(
  'title'.tr(), // 다국어 문자열 로딩
  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
Text(
  'welcome'.tr(), // 다국어 문자열 로딩
),
Text(
  'description'.tr(), // 다국어 문자열 로딩
)

위 코드에서 tr() 메서드는 현재 선택된 언어에 맞는 문자열을 가져옵니다.

이제 위의 단계를 따라가면, easy_localization 패키지를 사용하여 공원 및 자연 경치 관련 정보를 제공하는 다국어 지원 앱을 쉽게 개발할 수 있습니다. 감사합니다!

참고 문헌:

easy_localization 패키지 공식 문서