Flutter Intl 사용

머리말

Intl 은 다국어 작업을 지원하기 위해 Flutter에서 사용되는 라이브러리로, 개발자가 arb 파일을 통해 현지화 작업을 수행하는 데 편리하므로 일부 확립된 단계가 필요하지 않습니다.

Flutter Intl 은 Intl 라이브러리용으로 개발된 플러그인으로 , 주요 기능은 자동으로 코드를 생성하고 사전 작업을 간소화하며 개발자가 arb 작성에 더 집중할 수 있도록 하는 것입니다.

Flutter Intl 플러그인에는 현재 VSCode 버전 과 IDEA/Android Studio 버전이 있으며 사용 단계는 거의 동일합니다.

arb 파일 의 전체 이름은 Application Resource Bundle (abbr. ARB)로 json 사양을 따르는 현지화된 리소스 형식으로, arb 파일은 번역가에게 제공한 후 별도로 가져올 수 있습니다.

Intl은 l10n 표준( l10n은 localization의 약어임 )을 사용하고 라이브러리의 현재 버전은 0.17.0 이며 작동 단계는 이전 버전과 다를 수 있으므로 식별에 주의하십시오.

이 문서는 VSCode 환경에서 Flutter Intl 플러그인을 사용하는 방법 을 보여줍니다 .Flutter SDK 버전은 3.0.3이고 Dart 버전은 2.17.5입니다.

플러그인 활성화

플러그인 설치

확장된 애플리케이션 마켓에서 "Intl"을 검색하고 "Flutter Intl"을 선택하여 설치합니다.

플러그인 활성화

설치가 완료된 후 Ctrl+Shift+P는 패키지 명령 창을 열고 "Flutter Intl: Initialize"를 선택합니다.

관련 문서 자동 생성

플러그인은 flutter 프로젝트 디렉토리에 다음 디렉토리와 파일을 자동으로 생성합니다.

--lib
  --l10n
    --intl_en.arb
  --generated
  	--l10n.dart
  	--intl
      --messages_all.dart
   	  --messages_en.dart

intl_en.arb 는 해당 영문 번역 문서이며,
l10n.dart는 현지화 관련 클래스를 자동으로 생성하며, 클래스 이름은 기본적으로 S이며 ,
messages_en.dart는 intl_en.arb 의 해당 필드를 매핑하고 ,
messages_all.dart는 messages_en.dart를 작성 및 관리합니다 . 그리고 다른 해당 지역에 있는 messages_xx.dart의 팩토리 클래스;

콜 체인은 다음과 같이 간단하게 이해할 수 있습니다 .

l10n.dart <--messages_all.dart <--message_xx.dart <--intl_xx.arb

해당 파일을 생성하는 것 외에도 플러그인은 pubspec.yaml 파일 끝에 intl의 활성화 플래그를 자동으로 추가합니다 .

flutter_intl:
  enabled: true

현지화 구성

종속성 추가

지역화된 종속성은 직접 pubspec.yaml에 추가해야 합니다.

dependencies:
  flutter_localizations:
    sdk: flutter 

종속성 노드 또는 dev_dependencies 노드에 추가하는 것은 상황에 따라 달라지며 종속성은 프로젝트 종속성을 의미하고 dev_dependencies는 개발 환경 종속성을
의미 합니다 .

Intl 라이브러리의 종속성이 플러그인 작업 아래의 pubspec.lock 파일에 추가되었습니다 .

  intl:
    dependency: transitive
    description:
      name: intl
      url: "https://pub.flutter-io.cn"
    source: hosted
    version: "0.17.0"

그러나 pubspec.lock은 프로젝트 제출 파일로 공식적으로 권장되는 파일이 아니라는 점을 고려하면 pubspec.yaml 파일에 직접 의존하는 것도 우수합니다 .

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.17.0

(종속성을 추가한 후 pub get packages 명령을 실행하여 관련 라이브러리를 원격으로 가져와야 하지만 대부분의 스마트 IDE는 이 과정을 스스로 수행합니다.)

중국어 지원 추가

Ctrl+Shift+P를 눌러 패키지 명령을 열고 "로케일 추가"를 선택합니다.

해당 지역 코드 " zh "를 입력합니다. 실행 후 intl_zh.arb 및 messages_zh.dart

파일이 자동으로 생성되며 디렉토리 구조는 다음과 같습니다.

--lib
  --l10n
    --intl_en.arb
    --intl_zh.arb
  --generated
  	--l10n.dart
  	--intl
      --messages_all.dart
   	  --messages_en.dart
   	  --messages_zh.dart

arb 파일 작업

다음과 같이 intl_en.arb 파일 에서 매핑해야 하는 필드를 추가합니다 .

{
    
    
    "home": "Home",
    "about": "About",
    "greet": "Hi, {name}",
    "askChoice": "There are two choices:{one}? or {two}",
    "@askChoice": {
    
    
        "description": "Give someone two choice and wait for selection",
        "placeHolder": {
    
    
            "one": {
    
    },
            "two": {
    
    }
        }
    },
    "customDateFormat": "current date: {date}",
    "@customDateFormat": {
    
    
        "placeholders": {
    
    
            "date": {
    
    
                "type": "DateTime",
                "format": "EEE, MM/dd/yyyy",
                "isCustomDateFormat": "true"
            }
        }
    }
}

다음과 같이 intl_zh.arb 에 해당 필드를 추가합니다 .

{
    
    
    "home": "首页",
    "about": "关于",
    "greet": "你好, {name}",
    "askChoice": "这里有两个选择:{one}?或是 {two}",
    "@askChoice": {
    
    
        "description": "给某人两个选择，然后等待他的选择",
        "placeHolder": {
    
    
            "one": {
    
    },
            "two": {
    
    }
        }
    },
    "customDateFormat": "当前日期: {date}",
    "@customDateFormat": {
    
    
        "placeholders": {
    
    
            "date": {
    
    
                "type": "DateTime",
                "format": "EEE, MM/dd/yyyy",
                "isCustomDateFormat": "true"
            }
        }
    }
}

일반 필드는 [리소스 참조]와 동일하며 "@" 기호로 시작하는 필드는 규칙 및 주석을 나타냅니다. intl_xx.arb 파일의 각 업데이트 후
해당 messages_xx.dart 및 l10n.dart의 S 클래스는 필드 메서드는 자동으로 업데이트되므로 마지막으로 클래스 S의 메서드를 호출하여 매핑 필드를 얻을 수 있습니다.

현지화된 항목 구성

지역화 필드는 프로그램 항목 또는 UI의 최상위 수준에서 구성되어야 하며 일반적으로 MaterialApp 또는 WidgetsApp
의 항목, 즉 localizationsDelegates 및 supportedLocales 두 개의 필드
입니다. 매핑이고 후자는 지역입니다. 즉, 에 대한 지역 코드 목록을 지원합니다.

위에서 언급했듯이 l10n.dart 에서 생성된 기본 현지화 관련 클래스 S가 여기에서 사용됩니다.

return MaterialApp(
      localizationsDelegates: const [
        S.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: S.delegate.supportedLocales,
      //...其他代码
}

iOS의 현지화 구성에 대해서는 공식 문서 : iOS 앱 번들 업데이트 에서 Flutter 현지화 애플리케이션 의 iOS 현지화 소개를 참조할 수도 있습니다.

사용

다른 로케일로 출력

마지막으로 S.current 또는 S.of(context)의 해당 arb 필드를 호출합니다.

print(S.current.about);
print(S.current.greet("老哥"));
print(S.current.askChoice("确定", "取消"));
print(S.current.customDateFormat(DateTime.now()));

중국어 환경에서 출력:

关于
你好, 老哥
这里有两个选择:确定?或是 取消
当前日期: 周五, 07/15/2022

영어 환경에서 출력:

About
Hi, 老哥
There are two choices:确定? or 取消
current date: Fri, 07/15/2022

물론 위 출력에서 ​​"OK" 및 "Cancel"과 같은 필드도 arb 파일에 미리 정의되어 있어야 합니다.

위 예시는 모두 Intl 라이브러리의 message 메소드 사용에 해당하며, 그 외의 사용법은 Intl API 를 참고하시기 바랍니다 .

로케일 수동 지정

프로그램은 시스템 설정에 따라 로케일을 선택하거나 직접 지정할 수 있습니다.
예를 들어 전역 클래스를 만들고 Intl의 defaultLocale 속성을 지정하여 로케일을 변경할 수 있습니다.

class Application {
    
    
  static Future init() async {
    
    
    Intl.defaultLocale = 'en';
  }
}

그런 다음 프로그램 항목에서 래핑합니다.

Application.init().then((value) => runApp(MyApp()));

Intl.defaultLocale은 일부 플랫폼에서 적용되지 않을 수 있습니다. localeResolutionCallback을 시도하여 기본 로케일을 강제로 지정할 수 있습니다( 이 방법이 더 안정적임 ).

return MaterialApp(
      localeResolutionCallback:
          (Locale? locale, Iterable<Locale> supportedLocales) {
    
    
        var result = supportedLocales
            .where((element) => element.languageCode == locale?.languageCode);
        if (result.isNotEmpty) {
    
    
          print(locale?.languageCode);
          // return locale;
          return Locale('en');
        }
        return Locale('en');
      },
      //...其他
}