[flutter] flutter_localizations 패키지를 사용한 앱의 다국어 지원 쇼핑몰 구현 방법

12 Dec 2023

flutter

다국어 지원은 앱을 국제 시장으로 확장하는 데 매우 중요합니다. Flutter에서 flutter_localizations 패키지를 사용하여 앱의 문자열을 다국어로 번역하고 언어 설정을 변경하는 방법에 대해 알아보겠습니다.

1. flutter_localizations 패키지 추가

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

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

이후 패키지를 가져오기 위해 다음 명령어를 실행합니다.

flutter pub get

2. 지원할 언어 목록 정의

MaterialApp 위젯으로 앱을 시작할 때 supportedLocales와 localizationsDelegates 속성을 설정하여 지원할 언어 목록을 정의합니다.

예를 들어, 한국어와 영어를 지원하고 싶다면 아래와 같이 설정합니다.

MaterialApp(
  supportedLocales: [
    const Locale('ko', 'KR'), // 한국어
    const Locale('en', 'US'), // 영어
  ],
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  // ...
)

3. 번역 문자열 추가

번역이 필요한 문자열을 별도의 다국어 JSON 파일에 추가합니다. 예를 들어, 한국어와 영어 버전의 문자열을 각각 ko.json과 en.json 파일에 정의합니다.

ko.json

{
  "appBarTitle": "다국어 쇼핑몰",
  "welcomeMessage": "환영합니다!",
  // ...
}

en.json

{
  "appBarTitle": "Multilingual Shop",
  "welcomeMessage": "Welcome!",
  // ...
}

4. 문자열 사용

위에서 정의한 번역 문자열을 사용하기 위해 Localizations 클래스의 of 메서드 및 LocalizationsDelegate 인스턴스를 활용하여 가져옵니다.

String appBarTitle = Localizations.of(context, WidgetsLocalizations).appBarTitle;
String welcomeMessage = Localizations.of(context, WidgetsLocalizations).welcomeMessage;

5. 언어 변경

사용자가 언어를 변경하면, 지원되는 언어 중 하나로 설정을 변경하고, 앱을 다시 불러오면 됩니다.

onLanguageChanged(Locale locale) {
  MyHomePage.of(context).setLocale(Locale(locale.languageCode, locale.countryCode));
  // 앱을 다시 불러오는 방법은 개별적으로 선택하십시오.
}

이제 flutter_localizations 패키지를 사용하여 Flutter 앱에서 다국어를 지원하는 방법을 알게 되었습니다. 이를 통해 앱을 다국어로 번역하여 국제 사용자들에게 더 다양한 경험을 제공할 수 있습니다.

참고 자료:

Flutter Localization 문서: https://api.flutter.dev/flutter/flutter_localizations/flutter_localizations-library.html