반응형
Flutter에서 Easy Localization 사용하기: 초보자를 위한 완벽 가이드
Easy Localization은 Flutter 앱을 다국어로 쉽게 만들 수 있도록 도와주는 인기 있는 패키지입니다. 이 블로그 게시글에서는 Easy Localization 사용법을 단계별로 안내하고, 다양한 기능과 활용법을 살펴보겠습니다. 걱정하지 마세요! 초보자라도 쉽게 이해할 수 있도록 자세히 설명드리겠습니다.
1. Easy Localization 설치 및 기본 설정:
- pubspec.yaml 파일에 Easy Localization 추가:
dependencies:
easy_localization: ^2.4.2
- Flutter pub get 실행:
flutter pub get
- lib/main.dart 파일에 Easy Localization 설정:
import 'package:flutter/material.dart';
import 'package:easy_localization/easy_localization.dart';
// 앱에서 지원하는 언어 목록
final supportedLocales = [
Locale('ko', 'KR'), // 한국어
Locale('en', 'US'), // 영어
];
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await EasyLocalization.ensureInitialized(); // Easy Localization 초기화
runApp(
EasyLocalization( // Easy Localization 감싸기
supportedLocales: supportedLocales, // 지원 언어 목록 설정
path: 'assets/translations', // 번역 파일 경로 설정
fallbackLocale: Locale('en', 'US'), // 기본 언어 설정
startLocale: Locale('ko', 'KR'), // 초기 언어 설정 (선택사항)
child: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// 기본적으로 필요한 언어 설정
localizationsDelegates: context.localizationDelegates,
supportedLocales: context.supportedLocales,
locale: context.locale,
home: MyHomePage(),
);
}
}
2. 번역 파일 만들기:
- assets/translations 폴더 생성:
mkdir assets/translations
- 각 언어별 JSON 파일 만들기:
- ko-KR.json:
JSON{ "hello": "안녕", "name": "이름", "clear": "청소", "welcome": "환영합니다!" }
- en-US.json:
JSON{ "hello": "Hello", "name": "Name", "clear": "Clear", "welcome": "Welcome!" }
3. 번역 문자열 사용하기:
- Text Widget에 tr() 함수 사용:
-
Dart
Text('hello'.tr()), // 현재 언어로 "안녕" 또는 "Hello" 출력
- String Extension 사용:
print('name'.tr()); // 현재 언어로 "이름" 또는 "Name" 출력
4. 파라미터 전달:
- 순서대로 파라미터 전달:
Text('welcome'.tr(args: ['Easy Localization', 'Flutter'])), // "Easy Localization을 Flutter에 환영합니다!" 출력
- 이름 명시된 파라미터 전달:
Text('product_name'.tr(namedArgs: {'name': '제품 이름'})), // "제품 이름을 구매하셨습니다!" 출력
5. 중첩 문자열 처리:
- Map 형식으로 데이터 전달:
Text('gender'.tr(gender: _gender ? 'female' : 'male')), // "여성입니다" 또는 "남성입니다" 출력
6. 활용 예시:
- 사용자 이름 표시:
Text('my_name'.tr(args: [_user.name])), // "사용자 이름님, 안녕하세요!" 출력
- 제품 가격 표시:
Text('price'.tr(args: [product.price.toString()])), // "제품 가격: 10,000원" 출력
7. 추가 기능:
- 플랫폼별 언어 설정 지원:
- deviceLocale 속성을 사용하여 기기의 언어를 기본 언어로 설정할 수 있습니다.
- useDeviceLocale 속성을 사용하여 기기 언어를 우선적으로 사용하도록 설정할 수 있습니다.
- RTL 언어 지원:
- rtl: true 속성을 사용하여 RTL 언어(예: 아랍어, 히브리어)를 지원하도록 설정할 수 있습니다.
- 번역 문자열 포맷팅:
- plural 키를 사용하여 복수형 형태의 번역 문자열을 정의할 수 있습니다.
- gender 키를 사용하여 성별에 따른 번역 문자열을 정의할 수 있습니다.
- args 및 namedArgs 매개 변수와 함께 포맷팅 문자열을 사용하여 동적인 번역 문자열을 표현할 수 있습니다.
- 번역 문자열 캐싱:
- Easy Localization은 번역 문자열을 캐싱하여 앱 성능을 향상시킵니다.
- 번역 파일 자동 로드:
- assets/translations 폴더에 있는 모든 JSON 파일을 자동으로 로드합니다.
8. 예시 코드:
- 플랫폼별 언어 설정:
EasyLocalization(
supportedLocales: supportedLocales,
path: 'assets/translations',
fallbackLocale: Locale('en', 'US'),
useDeviceLocale: true, // 기기 언어 우선 사용
child: MyApp(),
);
- RTL 언어 지원:
EasyLocalization(
supportedLocales: supportedLocales,
path: 'assets/translations',
fallbackLocale: Locale('en', 'US'),
rtl: true, // RTL 언어 지원
child: MyApp(),
);
- 번역 문자열 포맷팅 (복수형):
{
"items": {
"zero": "상품이 없습니다.",
"one": "상품 1개",
"other": "상품 {count}개"
}
}
Text('items'.tr(args: [_itemCount])), // _itemCount가 0이면 "상품이 없습니다.", 1이면 "상품 1개", 2 이상이면 "상품 2개" 출력
- 번역 문자열 포맷팅 (성별):
JSON
{
"greeting": {
"male": "안녕하세요, {name} 님!",
"female": "안녕하세요, {name} 씨!"
}
}
Text('greeting'.tr(namedArgs: {'name': _user.name, 'gender': _user.gender})), // _user.gender가 "male"이면 "안녕하세요, 김철수 님!", "female"이면 "안녕하세요, 김영희 씨!" 출력
9. 결론:
Easy Localization은 Flutter 앱을 다국어로 쉽게 만들 수 있도록 도와주는 강력하고 유연한 도구입니다. 이 블로그 게시글을 통해 Easy Localization 사용법을 기본적으로 이해하셨기를 바랍니다. Easy Localization을 활용하여 다양한 언어를 지원하는 사용자 친화적인 앱을 개발하시기 바랍니다.
참고자료:
- Easy Localization 공식 문서: https://pub.dev/packages/easy_localization
- Flutter 다국어 지원: https://docs.flutter.dev/ui/accessibility-and-internationalization/internationalization
주의:
- 이 블로그 게시글은 Easy Localization의 기본적인 사용법만을 다룹니다. 더 많은 기능과 사용법은 공식 문서를 참고하시기 바랍니다.
- Easy Localization은 지속적으로 업데이트되고 있습니다. 최신 버전의 문서를 참고하여 사용하시기 바랍니다.
반응형
'Flutter > Flutter Programming' 카테고리의 다른 글
Flutter에서 Scaffold 위젯 이해하기 (0) | 2024.05.22 |
---|---|
[플러터 위젯] ElevatedButton (0) | 2024.05.22 |
플러터 Get.dialog 사용법 및 옵션 완벽 가이드 (0) | 2024.05.20 |
Flutter 안드로이드 에뮬레이터 먹통(응답없음) 문제 해결 가이드 (0) | 2024.05.19 |
Flutter에서 폰트 크기와 텍스트 색상 관리하기 (0) | 2024.05.19 |